Skip to content

TypeScript starter for Gatsby. No plugins and styling. Exactly the necessary to start. Ready for Gatsby 5 πŸ”₯

License

Notifications You must be signed in to change notification settings

jpedroschmitz/gatsby-starter-ts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b382ec9 Β· May 9, 2023
Oct 19, 2022
Oct 13, 2022
Oct 22, 2022
Apr 8, 2020
Apr 8, 2020
Oct 22, 2022
Oct 13, 2022
Oct 17, 2022
Nov 13, 2022
Oct 10, 2021
Jan 6, 2022
Nov 16, 2022
Oct 13, 2022
May 18, 2022
May 9, 2023
May 9, 2023
May 18, 2022
Oct 22, 2022
Oct 22, 2022
Oct 22, 2022

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.