gatsby-starter-essentials v0.0.6
Gatsby default starter extended with tools to help you boost your development experience.
Feel free to submit suggestions and bug reports.
π Getting Started
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
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.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.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 editsrc/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 | |
π Production ready | βοΈ Offline | |
π Webpack Root Import | ||
ποΈββοΈ Webpack Size |
π .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';
π§ 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
.
βββ .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
βββ .huskyrc.js # Husky
βββ .prettierignore # Ignored files by Prettier
βββ .prettierrc.js # Prettier
βββ 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 π.
3 years ago