ample / gatsby-starter-ample

This starter serves as the starting point for Ample’s Gatsby projects.
https://gatsby-starter-ample.netlify.app
MIT License
2 stars 1 forks source link
css-modules gatsby linters

Ample's Gatsby Starter

This is the Gatsby Starter that serves as the starting point for most Ample development projects. It is built from Gatsby's Default Starter, with our pre-configured preferences to make getting started less cumbersome for you.

Quick Start

To start a new project from this template, run the following command:

gatsby new [PROJECT_NAME] ample/gatsby-starter-ample
cd [PROJECT_NAME]

Install NVM, if needed

zsh or bash

Install Node

nvm install 15

Install node packages

yarn

Start the development server (http://localhost:8000)

yarn develop

Generator

Generate new Components, Templates and Fragments with boilerplate code to speed up the development process. Run the following command to bring up the help menu.

yarn generate

Read more about the gatsby-ample-generator plugin.

Alias Imports

This project supports alias imports through the gatsby-alias-imports plugin. This provides a means for being able to import components without needing to know exactly where you are in the tree. It can make moving items around a little less painful.

The convention is to treat directories in our project like NPM scopes. The scope is prepended with a @ character. There are three prefixes supported out of the box:

Unfortunately, for seamless integration across the board, we have to configure aliases for every place in which we're going to use them, which means at least Gatsby, VS Code, and Jest. Therefore, they are replicated (with the appropriate syntax) in:

If you wish to add a custom alias to your project, make sure to touch all appropriate config files.

Storybook

This starter uses Storybook for documentation, development, and visual testing. To start the server in development, run the storybook command:

yarn storybook

This will launch a browser at localhost:6006, running storybook. Documentation specific to this project can be found in Storybook. You can also find more information about working with Gatsby within Ample's Dev Playbook.

Linters

It's recommended to set up seamless integration with your editor.

Note: When using VS Code most ESLint and Stylelint conventions will be fixed automatically.

Linters run pre-push to ensure there are no errors or warnings.

License

gatsby-starter-ample is distributed under the MIT License.