React App Boiler Plate
All of the code for building the example React app shown in this tutorial is available in GitHub in the Message Board App Tutorial repo.
Each step in the tutorial is recorded as a tag on the
learn-tutorial branch in
that repo. That means you can complete each step in the tutorial and also look
at the git diff if you’re comparing what’s described to the corresponding code
You’d start an app like this with
npx create-react-app ... and then
yarn add ... to add the dependencies listed on the previous page (i.e., Tailwind CSS, Semantic
UI React, etc.)
This tutorial starts with the minimal boilerplate already complete. To read through the setup process that was used to build this tutorial, see this blog about setting up a Dgraph Cloud app.
For this tutorial, you can start with the boilerplate React app and CSS by checking out the setup from GitHub. To do this, see the tutorial-boilerplate tag.
You can do this using the
git clone https://github.com/dgraph-io/discuss-tutorial cd discuss-tutorial git fetch --all --tags git checkout tags/tutorial-boilerplate -b learn-tutorial
Alternatively, you can visit https://github.com/dgraph-io/discuss-tutorial/tags
and download the archive (.zip or .tar.gz) for the
Running app boilerplate
After you have the boilerplate code on your machine, you can start the app
using the following
This command builds the source and serves the app UI in development mode. The
app UI is usually served at
http://localhost:3000, but the exact port may
vary depending on what else is running on your machine. Yarn will report the URL
as soon as it has the server up and running.
Navigate to the provided URL, and you’ll see the boilerplate app running, as seen below:
At this point, you have just the CSS styling and minimal React setup. Next, you’ll move on to building the app.