Skip to content

jpedroschmitz/gatsby-starter-ts

Repository files navigation

Gatsby TypeScript Starter


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 5
  • βš›οΈ React 18
  • β›‘ TypeScript
  • 🐐 Tests β€” Vitest 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
  • πŸš“ 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:

pnpm start

Open http://localhost:8000 with your browser to see the result.

Documentation

Requirements

  • Node.js >= 18
  • pnpm 7

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

  • pnpm start β€” Starts the application in development mode at http://localhost:8000.
  • pnpm build β€” Compile your application and make it ready for deployment.
  • pnpm serve β€” Serve the production build of your site
  • pnpm clean β€” Wipe out the cache (.cache folder).
  • pnpm type-check β€” Validate code using TypeScript compiler.
  • pnpm lint β€” Runs ESLint for all files in the src directory.
  • pnpm format β€” Runs Prettier for all files in the src directory.
  • pnpm test β€” Run tests with Vitest.
  • pnpm test:watch β€” Run tests on watch mode.

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 Yarn/npm

This starter uses pnpm by default, but this choice is yours. If you'd like to switch to Yarn/npm, delete the pnpm-lock.yaml file, install the dependencies with Yarn/npm, change the CI workflow, Husky Git hooks to use Yarn/npm commands, and uninstall the gatsby-plugin-pnpm plugin (you also need to remove it from the gatsby-config file).

License

This project is licensed under the MIT License - see the LICENSE.md file for more information.