Node.js 18.x.
-
Clone the repo to local folder
-
Yarn (v1) is used to manage the project dependencies. If you don’t have Yarn installed, run:
npm install yarn -g
- Run
yarn installto install the project dependencies
Note: Gatsby CLI is needed to run the Gatsby development/build commands. It’s included in the package.json file.
- Create
.env.developmentand.env.productionfiles in the root of the project. These will hold the environment variables for the Prismic CMS integration. Contact a AP Website team member to get the content of these files.
-
Run
gatsby develop -
After building, a hot reload server is started automatically. Browse to
http://localhost:8000to view the development site. Each subsequent save in the code editor will re-load the dev site.
Running the development build will also start the visual GraphiQL tool which you can use to build GraphQL queries and then copy and paste into the code.
In a browser go to http://localhost:8000/___graphql to open the GraphiQL editor.
If you made changes in Prismic you will likely need to clear the cache in Gatsby so that the new data is pulled in.
Run gatsby clean && gatsby develop to clear the cache (deletes the .cache folder) and restart the dev build/server.
Note: You will only need to run gatsby clean when new data has come in.
It’s useful to build an optimized production version of the site locally to ensure the site builds and works as expected before deploying it live.
-
Run
gatsby build && gatsby serveto build an optimized production version locally. Thegatsby servecommand will start a local server. -
Open a browser and go to
http://localhost:9000to view the production-optimized version of the site.
(From Gatsby starter README)
gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.
gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).
gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.