kirushenski / gatsby-starter-vadyan

🤓 A modern content-agnostic Gatsby starter

A modern content-agnostic Gatsby starter

Demo

Why?

This starter’s purpose is to help you setup essential tools like Typescript, ESLint, Jest and Storybook on the top of Gatsby. Otherwise you need to repeat this tedious process from project to project. Unlike the most starters gatsby-starter-vadyan doesn't make opinions about your site content: it just gives you the opinionated setup of trending frontend tools which I used for myself

Hot features

• ⚡️ Based on Gatsby@3
• 🏔 Modern setup with Webpack@5 and React@17
• 💬 Static type checking with Typescript
• 🥇 Bulletproof dev environment with ESLint, Prettier, husky & lint-staged
• 🎲 Test environment with Jest & react-testing-library
• 🎨 Utility-first styling with Tailwind
• 📕 Supports Storybook@6 with docs and controls
• 🖼 Work with images like a pro with gatsby-plugin-image and SVGR
• 📦 Full PWA on Workbox under the hood with manifest support and automatic favicons generation
• ✅ Simple workflow example to get started with Github Actions
• 🤖 Build-in SEO component to improve SEO with React Helmet
• 📊 Analyze generated build with Webpack Bundle Analyzer
• 💥 Simplified imports with Webpack Aliases

Quick start

Project requires node >= 12.13.0 and uses npm as the package manager

1. Create a Gatsby site

   You can use Gatsby CLI:

   gatsby new project-name https://github.com/p1t1ch/gatsby-starter-vadyan

   Or use Github template feature — simply click on the button "Use this template"

2. Setup the project

   Install dependencies and run validation scripts:

   npm run setup

3. Run the application

   This script starts the development server on http://localhost:8000:

   npm start

Scripts list

npm run <command>	Description
start	Build app in dev mode and start development server on 8000
build	Build app in prod mode in public folder
serve	Browse production build from public folder locally on 8000
storybook	Build Storybook in dev mode and start development server on random port
storybook:build	Build Storybook in prod mode in docs folder
storybook:serve	Browse Storybook production build from docs folder locally on 8080
test	Run Jest in watch mode
test:coverage	Run Jest in coverage mode. Use in CI or locally when you want to generate coverage reports
coverage	Оpen coverage reports. You need to generate them with test:coverage first
stats	Open Webpack Bundle Analyzer reports. You need to generate them with build first
lint	Run ESLint in fix mode on .tsx, .ts and .js files except of ignored folders
format	Run Prettier in write mode on all files except of ignored folders
type-check	Run Typescript compiler for types checking
validate	Full code quality control: lint, format, type-check and test:coverage
clean	Clean public and .cache folders for the moments when you cannot rely on cache
setup	Install dependencies and run validation script

Notes

1. If you are using npm@7 and it gives you console errors on install run npm i with --legacy-peer-deps flag to avoid conflicts
2. Make sure that public directory exists before trying to run Storybook (run npm start for once)
3. webpack version is locked for Storybook compatibility