React App Boiler Plate

​

GitHub repo

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 changes.

​

Boilerplate

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 CLI.

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 tutorial-boilerplate tag.

​

Running app boilerplate

After you have the boilerplate code on your machine, you can start the app using the following yarn command:

yarn install
yarn start

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 connect to your graph database.