- Install nvm.
- Install Node 12:
nvm install 12 - Switch to using Node 12:
nvm use 12 - From this directory,
npm run setupto install front end dependencies and create an.envfile - get a Mapbox API token and add that to your
.envfile as theMAPBOX_TOKEN - get the
API_URLfrom a team member and add that to your.envfile. Alternatively, you can bring up your own local server and use that (if you are running your own local server, setAPI_URLto 'http://localhost:5000')
Setup complete!
- From this directory,
npm startto check your.envfile and start webpack dev server
Your browser should open to 0.0.0.0:3000 and the site should render. Webpack will detect saved code changes, rebuild the bundle in memory, and update the site in your browser.
Stop webpack dev server with Ctrl-C.
Whenever new code changes are made to the client, developers should consider running a Lighthouse audit in Google Chrome to identify and resolve any potential issues. A Lighthouse audit will offer ways to improve site quality, performance, accessibility, search engine optimization and end user experience.
To run Lighthouse:
- Open Google Chrome and navigate to the site containing your code
- Inspect the site either by pressing
f12orRight-click > Inspect - At the top of the Inspect window, select the 'Lighthouse' panel ('Lighthouse' may be hidden so you may need to click
>>to see more) - Customize your report and click
Analyze page load
npm run setup # install dependencies listed in package.json and check .env file
npm run check-env # checks .env file exists and has all required keys
npm start # check .env file and start webpack dev server
npm run dev # start webpack dev server (no .env check)
npm run build # run webpack in production mode - output is placed in dist directory
npm run lint # lint javascript in client directory