Getting Started

Set up

You are going to get started by setting up a new React app. You’ll use the create-react-app tool to create a new application. Run the command then change to the newly created directory.

yarn create react-app graphql-real-time-race --template typescript

Once this is done, change directory and start the app

cd graphql-real-time-race
yarn start

The application launches locally on port 8080.

To view the application, click on Preview, and select Preview Running Application.

preview the application

Next, you’ll set up the shell of the application and install some needed dependencies.

Right click on the lab-start.zip link above and copy the link to this file. Depending on your browser, this could be: “Copy Link Address”, “Copy Link Location”, etc…

Open a new terminal tab in cloud9 and navigate to the graphql-real-time-race/ directory. Run this command, replacing APPLICATION_ZIP_LINK with the file link you just copied.

wget APPLICATION_ZIP_LINK

Unzip the file and then delete it (rm). From the terminal:

# from the graphql-real-time-race folder
unzip -o lab-start.zip
rm lab-start.zip

Then install the dependencies that are specified in the updated package.json file

yarn install

You may have to stop/start your server at this point. From that terminal, run:

yarn start

You should see the application and open up the top menu. From there, you can navigate to different pages. There’s not much too see at the moment. Let’s change that by creating some new racing events that users will be able to see and provide feedback on in real time!

menu