Non-opinionated TypeScript starter for Gatsby
A TypeScript starter for Gatsby. No plugins and styling. Exactly the necessary to start.
Created by João Pedro with the help of many wonderful contributors.
Features
- ⚡️ Gatsby 4
- ⚛️ React 18
- ⛑ TypeScript
- 🐐 Tests — Jest and Testing Library out of the box
- 📏 ESLint — To find and fix problems in your code
- 💖 Prettier — Code Formatter for consistent style
- 🐶 Husky — For running scripts before committing
- 📄 Commitizen — To define a standard way of committing rules
- 🚓 Commitlint — To make sure your commit messages follow the convention
- 🖌 Renovate — To keep your dependencies up to date
- 🚫 lint-staged — Run ESLint and Prettier against staged Git files
- 👷 PR Workflow — Run Type Check & Linters on Pull Requests
- ⚙️ EditorConfig - Consistent coding styles across editors and IDEs
- 🗂 Path Mapping — Import components or images using the
@
prefix
Quick Start
The best way to start with this template is using the Gatsby CLI.
npx gatsby new starter-ts https://github.com/jpedroschmitz/gatsby-starter-ts
Development
To start the project locally, run:
yarn start
Open http://localhost:8000
with your browser to see the result.
Documentation
Requirements
- Node.js >= 14.17
- Yarn 1 (Classic)
Directory Structure
__helpers__
— Helpers files for testing configuration.__mocks__
— Mocks for testing..github
— GitHub configuration including the CI workflow..husky
— Husky configuration and hooks.src
— Application source code, including pages, components, styles.
Scripts
yarn start
— Starts the application in development mode athttp://localhost:8000
.yarn build
— Compile your application and make it ready for deployment.yarn serve
— Serve the production build of your siteyarn clean
— Wipe out the cache (.cache
folder).yarn type-check
— Validate code using TypeScript compiler.yarn lint
— Runs ESLint for all files in thesrc
directory.yarn format
— Runs Prettier for all files in thesrc
directory.yarn commit
— Run commitizen. Alternative togit commit
.yarn test
— Run tests.
Path Mapping
TypeScript are pre-configured with custom path mappings. To import components or files, use the @
prefix.
import { Button } from '@/components/Button';
// To import images or other files from the static folder
import avatar from '@/static/avatar.png';
Switch to npm
This starter uses Yarn 1 (Classic) by default, but this choice is yours. If you'd like to switch to npm, delete the yarn.lock
file, install the dependencies with npm i
, change the CI workflow, and Husky Git hooks to use npm commands.
License
This project is licensed under the MIT License - see the LICENSE.md file for more information.