• Getting Started
• Usage
  • Run the website
  • Build the website
  • Run the built website
  • Clean Gatsby cache
• Project Structure
• Code Style
  • ESLint
  • Prettier
  • VS Code

1. Install dependencies

npm install

2. 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=

⚠️ Please ask project owners for private variables or, if you have access to Gatsby Dashboard, just pull them out from the 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

1. Main JavaScript File
2. Index File

1. Folder with images and icons
2. 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:

• ESLint
• Prettier

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.