greater-gatsby

BAREBONES and LIGHTWEIGHT GatsbyJS Default Starter with Typescript, PostCSS, Storybook, & Tailwind CSS

Features

BAREBONES and LIGHTWEIGHT GatsbyJS Default Starter, stripped of example styles and with the following additions:

• Storybook (latest)
• PostCSS
• TailwindCSS (v1.0+)
• TypeScript
• Styled Components (v5+)
• twin.macro for TailwindCSS integration into styled-components
• fully configured eslint (via xo)
• Prettier code-formatting
• lint-staged for Code Quality.
• Cypress for easy end-to-end testing
• Jest for unit testing

Perfect for your best JAMStack projects in 2020 and beyond!

Quick Start

gatsby new PROJECT_NAME https://github.com/rbutera/greater-gatsby

For a more detailed understanding on what's going on with this starter underneath the hood, check out the blog post written by rbutera on Medium:

BLOG POST: JAMStack Tutorial Part 1: GatsbyJS with Storybook, TailwindCSS, and Typescript Setup on Medium.com

Development Instructions

Starting the Development Server

To install all the required dependencies using Yarn, run yarn install

Then you can start the development server:

gatsby develop

By default the development server will be running on port 3000, so to visit it open a browser and go to https://localhost:3000

Component Development Using Storybook

To develop components, run Storybook:

yarn storybook

By default Storybook runs on will be running on port 6006, so to visit it open a browser and go to https://localhost:6006

Project Structure and Instructions

Components

We have included an example <Logo /> component (complete with an example storybook story).

You can check these out at: ./src/components/layout/logo.tsx ./src/components/layout/logo.stories.tsx

See also the components for the index page

Testing

By the way, we've installed testing-library libraries for you for react, jest and cypress 😄

Unit Testing

Unit testing is included using Jest, which has been preconfigured with jest-extended and jest-dom.

To run unit tests:

yarn test:unit:ci # run once, OR...
yarn test:unit:dev # ... run and watch for changes

End-to-End Testing

End to End testing is included using Cypress.

Accessibility is automatically tested using cypress.test.js

See the index end to end test

To run end to end tests:

yarn test:e2e:ci # run once, OR...
yarn test:e2e:dev # ... run and watch for changes

Plans for Future Development

• We intend to keep this starter lightweight, but also add some further opinionated customizations
• We admire the work in gatsby-universal and so we'll probably steal some of the features of that starter for this one.

Roadmap and TODO

• add typescript
• add postCSS
• remove default styles
• remove default styles
• write blog post
• add unit tests
• add favicon generation
• add other features from gatsby-universal

Contribution

All contributions / suggestions are very very welcome! Please open an issue, PR or send an email to rbutera ([email protected])

Thanks

Big thanks to the following people for contributing:

• rbutera
• DBozhinovski