Gatsby Starter Essentials

Gatsby's default starter extended with tools to help you boost your development experience.

Help us improve by submitting suggestions and bug reports.

🚀 Getting Started

1. Create a Gatsby site.

   Use the Gatsby CLI to create a new site, specifying the gatsby-essentials-starter.

   # create a new Gatsby site using the `gatsby-essentials-starter` starter
   gatsby new hello-world https://github.com/MK-IT/gatsby-starter-essentials

2. Configure.

   Navigate into your new site’s directory and copy the example dotenv secrets.

   cd hello-world && cp .env.example .env

   Note: You can change any of the secrets defined in .env. However, all of the pre-defined variables are required by the installed Gatsby plugins.

3. Start developing.

   Start it up.

   gatsby develop

   Note: You can change the contents of src/ in any way you like. The pre-defined pages and components are for demo purposes only.

4. Open the source code and start editing!

   Your site is now running at http://localhost:8000!

   Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

   Open the hello-world directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

⭐ Features

Project	Plugins	Components
💪 Latest JS support	♻️ NProgress	🌐 Page
💎 ReactJS & PropTypes	📈 Google Analytics	🌐 Header (stub)
⚡️ ESLint, Prettier, EditorConfig	📈 Facebook Pixel	🌐 Footer (stub)
🛠 .env configuration	📬 MailChimp	🌐 SEO + JSON-LD
📂 Clean folder structure	⛑ React Helmet
🚦 Pre-commit hooks	📜 Manifest
🤝 Commit message linting	🤖 Robots.txt
🧗🏻‍♂️ Built-in semver automation	🌐 Sitemap
🐛 VSCode Launch and Debug	✈️ Offline
🚀 Production ready	👉 Webpack Root Import
	🏋️‍♂️ Webpack Bundle Analyser v2

🛠 .env configuration

You can provide environment variables to your site to customize its behavior in different environments. See Gatsby's guide on environment variables.

Gatsby's Node API can access both "OS Env Vars" and "Project Env Vars" all the time. Your client-side JS can access any "OS Env Vars" and any "Project Env Vars" prefixed with GATSBY_.

🤝 Commit message linting

Keep your commit messages human- and robot-readable using a shared convention, i.e. Commitlint.

Husky's Git hooks make sure that your commit messages follow the convention. Moreover your code will be formatted and linted before every commit.

You can use Commitlint's CLI for fast authoring of your commit messages.

:🧗🏻‍♂️: Built-in semver automation

The package standard-version helps you generate CHANGELOG.md, tag, and bump the version by following the semver convention.

👉 Webpack Root Import (Path Aliases)

The project uses Webpack's resolve.alias feature to ease module imports.

# path aliases can be found in `gatsby-config.js`, `jsconfig.json`, and `.eslintrc.js`
~src --> src/
~pages --> src/pages/
~layout --> src/layout/
~containers --> src/containers/
~components --> src/components/

// instead of...
import MyComponent from '../../../components/MyComponent';
// you can do...
import MyComponent from '~components/MyComponent';

🏋️‍♂️ Webpack Bundle Analyser v2

Under the hood the plugin uses Webpack Bundle Analyzer to visualize the size of your bundle's output files.

The plugin automatically generates a static HTML report on production build, i.e. on yarn build.

You can find the generated report under /public/report.html.

🧐 What's inside?

👷‍♂️ Available Scripts

# local development
yarn develop

# production build
yarn build

# serve production build
yarn serve

# clean tmp files (.cache, public)
yarn clean

# format code with Prettier
yarn format

# lint code with ESLint
yarn lint

# semver and release
yarn release

📂 Folder Structure

.
├── .husky                # VSCode workspace config
│   ├── commit-msg          # commitlint messages
│   └── pre-commit          # format and lint code
├── .vscode               # VSCode workspace config
│   ├── extensions.json
│   └── settings.json
├── src                   # Source code
│   ├── components          # Components
│   ├── containers          # Containers
│   ├── layout              # Top level "layout" components
│   └── pages               # Pages
├── static                # Static assets
│   └── images
├── .commitlintrc.js      # Commitlint
├── .editorconfig         # EditorConfig
├── .env.example          # Default `dotenv` secrets
├── .eslintrc.js          # ESLint
├── .gitignore            # Ignored files by Git
├── .prettierrc.js        # Prettier
├── .versionrc.js         # Standard Version
├── gatsby-browser.js     # Gatsby Browser API
├── gatsby-config.js      # Gatsby Config
├── gatsby-node.js        # Gatsby Node API
├── gatsby-ssr.js         # Gatsby SSR API
├── jsconfig.json         # VSCode JS settings
├── CHANGELOG.md
├── LICENSE
├── README.md
├── ROADMAP.md
├── package.json
└── yarn.lock

💫 Deploy

Do yarn build to build your app. The output in public/ is your ready-to-use production bundle.

The public/ folder can then be statically served by any CDN, GitHub Pages or more advanced service like Netlify.

Before deploying, make sure you run yarn build && yarn serve to preview your changes 🏁.