project
Your project this week is to build an interactive game-like thing using React.
Spike
Now that you're using a framework there is a bit more initial environment setup involved before you can start writing code. Make sure you get this setup done and deployed to Netlify at the beginning.
Acceptance Criteria
Stretch criteria
Example projects
"Interactive game-like thing" is a bit vague, so here are some apps built previously:
If you're struggling for inspiration consider adapting a simple board/card/arcade game that you like.
Setup
We'll be using Vite to handle bundling our app and providing a local dev server. You can quickly scaffold a new app using their CLI:
npm create vite myapp -- --template react
cd myapp
npm install
to install the dependenciesnpm run dev
start the dev server
Open the project in your editor—you should see an example app. Feel free to delete the logo/CSS files that you won't be using.
Static assets
Vite supports importing static assets (like images or CSS). For example:
CSS files will automatically be copied to the final built site and included on the page. Images and other assets will provide the URL of the final asset to use in your components.
Linting
We strongly recommend you configure ESLint. This will help catch mistakes as you're coding and save you time debugging problems caused by simple typos.
You can use Oli's minimal React config (follow the instructions in the readme to install).
Deployment
We'll be deploying our apps to Netlify.
Create your repo and push it to GitHub
Go to https://app.netlify.com and login with Github
Click the "New site from Git" button
Choose "Github" as your provider (and authorize it)
Choose the repo you want to deploy
Choose "Deploy site" (the build settings should be pre-filled)
Now every time you push to the main
branch your site will redeploy.
API secrets
That said, if you have a token you want to keep off GitHub, but don't mind people potentially finding using dev tools (i.e. not a token attached to your credit card!) you can use a .env.local
file.
Vite will automatically read any environment variables prefixed with VITE_
and make them available to your code on import.meta.env
. E.g. if you have a .env.local
file like this:
You can access that using import.meta.env.VITE_APP_API_KEY
.
Vite also generates a .gitignore
that stops .local
files from ending up on GitHub.
You will also need to configure Netlify to inject this value when it deploys your site too (just like Heroku). You can do this under "Site settings" > "Build & deploy" > "Environment" > "Environment variables".
Last updated