Gatsby Starter

Tailwind CSS · TypeScript · SASS · ESLint · Style Lint · Font Awesome · React i18next · React Testing Library · Cypress

A fully loaded starter kit for Gatsby development to get your website up and running in minutes.
Code quality & Testing tools are also already configured for your ease.

🔗 Quick Links

Demo

🚀 Quick start

The generated project have dependencies that require node, npm and Gatsby CLI.

Make sure you have Node version >= 8.0, npm >= 5 & GatsbyCLI

# create a new Gatsby site using this template.
gatsby new my-gatsby-starter https://github.com/brionmario/gatsby-starter

# change the directory
cd my-gatsby-starter/

# start the development server. Site will run on http://localhost:8000
npm start

Table of Contents

• File Structure
• Getting Started
  • Prerequisites
  • Setting Up
  • Running the app
• Styling
• Linting
• Deployment
  • Gatsby Cloud
• Contributing
• Contributors
• License

File Structure

gatsby-starter/
 ├── coverage/                      * unit test coverage reports.
 ├── cypress/                       * cypress tests folder.
 ├── docs/                          * contains documents and document resources.
 ├── i18n/                          * contains i18n translations and config.
 ├── node_modules/                  * contains dependencies pulled from npm.
 ├── public/                        * generated public folder for distribution.
 ├── src/                           * source folder
 │   ├── assets/                    
 │   │   ├── images/                * images and icons.
 │   │   └── styles                 * SASS stylesheets.
 │   ├── components                 * shared reusable components.
 │   ├── layouts                    * app layouts.
 │   ├── models                     * typescript schemas.
 │   ├── pages                      * app pages.
 │   └── types                      * custom typings.
 ├── static                         * contains static assets that needs to be copied to public folder.
 ├── .eslintignore                  * files and folders that need to be ignored from linter.
 ├── .eslintrc.js                   * es-lint configuration file.
 ├── .gitignore                     * contains files that are ignored from git
 ├── gatsby-browser.js              * where Gatsby expects to find any usage of the Gatsby browser APIs.
 ├── gatsby-config.js               * main configuration file for a Gatsby site.
 ├── gatsby-node.js                 * where Gatsby expects to find any usage of the Gatsby Node APIs
 ├── gatsby-ssr.js                  * where Gatsby expects to find any usage of the Gatsby server-side rendering APIs.
 ├── CONTRIBUTING.md                * project contributing guidelines
 ├── cypress.json                   * cypress configuration file.
 ├── LICENSE.md                     * licensing information.
 ├── package.json                   * contains all the npm scripts for building, running, deploying etc. and contains all the dependencies
 ├── package.lock.json              * lock file for npm.
 ├── postcss.config.js              * post-css configurations.
 ├── README.md                      * Readme file for the repository
 ├── tailwind.config.js             * tailwind CSS configuration file.
 ├── stylelint.config.js            * style lint configuration file.
 └── tsconfig.json                  * typescript configuration file.

Getting Started

Prerequisites

What you need to run this app:

Node & npm

Make sure you have Node.js and npm installed by running the following simple commands on the command line and see if you're running the latest stable versions.

• Node.js - Type node -v on the terminal.
• npm - Type npm -v on the terminal.

If you do not have them installed, click here and grab the latest stable version of node and npm will be automatically installed along with it. Or if you have brew already installed in your local machine, execute brew install node command to get node.

Gatsby CLI

Follow the Gasby CLI install instructions and get it installed on your environment. This will enable the usage of gatsby command.

Setting Up

Create a Gatsby site

Use the Gatsby CLI to create a new site, specifying the default starter.

# create a new Gatsby site using this template.
gatsby new my-gatsby-starter https://github.com/brionmario/gatsby-starter

Navigate to source

Navigate into your new site’s directory and start customizing.

# change the directory
cd my-gatsby-starter/

Running the app

You can execute the below command to fire up the server.

npm start

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.

Styling

The index.scss file inside the src/assets/styles directory is the main stylesheet for the project and will be compiled by Gatsby's build. If you want to add your own stylesheet, you can place it under the src/assets/styles/partials folder and import it in the index.scss file.

For example if you want to include the styles for a slider:

1. Create a _slider.scss partial file in the src/assets/styles/partials directory.
2. In index.scss add @import 'partials/slider.scss';

Linting

Execute the following commands to generate linting for styles and scripts.

# all
npm run lint

# JavaScript & Typescript files.
npm run lint:es

# Style files.
npm run lint:styles

Testing

All Tests

Execute the following command to run both unit test suite and e2e test suite.

npm run test

Unit Tests

Execute the following command to run your unit tests.

npm run test:unit

The following command will run the unit tests in watch mode.

npm run test:unit:watch

If you want to generate the code coverage for the project, use the following command.

npm run test:unit:coverage

We have used React Testing Library for unit testing.

End-To-End Tests

Execute the following command to run your unit tests.

npm run test:e2e

We have used Cypress for E2E testing.

Build

Execute the following command to build your app in production mode.

npm run build

Deployment

Gatsby Cloud

Deploy this starter with one click on Gatsby Cloud:

Contributing

Please read CONTRIBUTING.md for contributing guidelines and to learn about our code of conduct.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Brion Mario 💻 📖 🚇 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!

License

This project is licensed under the BSD Zero Clause License(0BSD) License - see the LICENSE.md file for details.