1. Welcome!
2m

How to use this companion course

You can use this course as a reference throughout the workshop. Here you'll find instructions, code snippets and exercise solutions that we'll be going through in the workshop.

Note that lessons starting with Exercise are designed to be an exercise for you, the learner, to try your best to solve! If you need help, you can consult the solution in that same lesson.

Workshop Setup Instructions

Please complete the following before the workshop, to set up your computer with all the tools you'll need.

  • Node.js
  • Git
  • Starter code

We recommend using Google Chrome as a browser. Firefox also works!

Download and install Node.js.

Instructions

Choose the appropriate version for your operating system from the Node.js Downloads page. We recommend using v16.

How do I know if it's working?

From the terminal, run the command below. You should see something like the output message shown.

node --version
v16.17.0

Download and install Git

Instructions

Use this installation guide to set up Git for your operating system.

How do I know if it's working?

From the terminal, run the command below. It should output a list of available Git commands (like "clone", "init", or "add").

git

Download and install VS Code

Instructions

Use this installation guide to set up VS Code for your operating system.

How do I know if it's working?

You should be able to open up the VS Code application.

Clone the starter code repo

Help us conserve hotel bandwidth by setting up the starter code before the workshop.

From the terminal, run the command below to download a copy of the starter code.

git clone https://github.com/apollographql-education/workshop-frontend-getting-started.git

Now run the command below to change into the project directory and install the required dependencies.

cd workshop-frontend-getting-started/client && npm install

Check that everything is working by starting the frontend app using the command below.

npm start

It should open a new browser window at http://localhost:3000, showing the UI skeleton for an app called Catstronauts, and a message like "TODO: Replace me with real tracks!"

Setup check

You should have:

  • Node.js
  • Git
  • Starter code
  • VS Code

Task!

Next