- Install dependencies
npm install
- Fill up the environment variables
cp .env.example .env
An .env
file should consist of publicly available included in .env
as well as private ones:
ALGOLIA_ADMIN_KEY=
Environment variables
section.
npm run start
npm run build
npm run serve
npm run clean
βββ src
β βββ components
β β βββ pages β React components that are being used specifically on a certain page
β β βββ shared β React components that are being used across the whole website
β βββ constants
β βββ hooks
β βββ icons
β βββ images
β βββ pages
β βββ styles
β βββ templates
β βββ utils
β βββ html.jsx β HTML template for all generated pages. Read more about it here β gatsbyjs.org/docs/custom-html
βββ static
β βββ fonts
β βββ images
βββ gatsby-browser.js β Usage of the Gatsby browser APIs
βββ gatsby-config.js β Main configuration file for a Gatsby site
βββ gatsby-node.js β Usage of the Gatsby Node APIs
βββ gatsby-ssr.js β Usage of the Gatsby server-side rendering APIs
- Main JavaScript File
- Index File
- Folder with images and icons
- Folder with data
Also, each component may include another component that follows all above listed rules.
component
βββ nested-component
β βββ data
β β βββ nested-component-lottie-data.json
β βββ images
β β βββ nested-component-image.jpg
β β βββ nested-component-inline-svg.inline.svg
β β βββ nested-component-url-svg.url.svg
β βββ nested-component.js
β βββ index.js
βββ data
β βββ component-lottie-data.json
βββ images
β βββ component-image.jpg
β βββ component-inline-svg.inline.svg
β βββ component-url-svg.url.svg
βββ component.js
βββ index.js
ESLint helps find and fix code style issues and force developers to follow same rules. Current configuration is based on Airbnb style guide.
Additional commands:
npm run lint
Run it to check the current status of eslint issues across project.
npm run lint:fix
Run it to fix all possible issues.
Prettier helps to format code based on defined rules. Difference between Prettier and ESLint.
Additional commands:
npm run format
Run it to format all files across the project.
Following extensions required to simplify the process of keeping the same code style across the project:
After installation enable "ESLint on save" by adding to your VS Code settings.json the following line:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
You can navigate to settings.json by using Command Pallete (CMD+Shift+P) and then type "Open settings.json".
To enable Prettier go to Preferences -> Settings -> type "Format". Then check that you have esbenp.prettier-vscode as default formatter, and also enable "Format On Save".
Reload VS Code and auto-format will work for you.