Gatsby Starter Ts screenshot

Gatsby Starter Ts

Author Avatar Theme by Jpedroschmitz
Updated: 9 May 2023
304 Stars

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

Categories

Overview:

This product is a Gatsby template that includes several features and tools to streamline the development process. It is built with Gatsby, React, and TypeScript, and includes features such as ESLint, Prettier, Husky, Commitlint, and Renovate. It also comes with testing tools like Vitest and Testing Library, and supports PR workflow with Type Check & Linters. The template includes a directory structure for easy navigation and organization of files. It also supports path mapping for easy importing of components and files. The template can be installed using the Gatsby CLI and requires Node.js and pnpm.

Features:

  • Gatsby: A static site generator that helps build fast, optimized websites.
  • React 18: The latest version of the popular JavaScript library for building user interfaces.
  • TypeScript: A typed superset of JavaScript that helps catch errors and improve code quality.
  • Tests: Comes with Vitest and Testing Library out of the box for easy testing.
  • ESLint: A linting tool for identifying and fixing problems in code.
  • Prettier: A code formatter that ensures consistent code style.
  • Husky: A Git hook tool that runs scripts before committing code.
  • Commitlint: Ensures commit messages follow a specified convention.
  • Renovate: Keeps dependencies up to date by automatically updating them.
  • lint-staged: Runs ESLint and Prettier against staged Git files.
  • PR Workflow: Runs Type Check & Linters on Pull Requests for better code review.
  • EditorConfig: Enforces consistent coding styles across different editors and IDEs.
  • Path Mapping: Import components or files using the @ prefix for easy navigation.

Installation:

To install and use this template, follow these steps:

  1. Make sure you have Node.js version 18 or higher installed.
  2. Install pnpm by running the command npm install -g pnpm.
  3. Create a new Gatsby site using this template by running gatsby new my-site https://github.com/example/repository.
  4. Change to the directory of the newly created site by running cd my-site.
  5. Install the project dependencies by running pnpm install.
  6. Start the development server by running pnpm start.
  7. Open your browser and navigate to http://localhost:8000 to see the result.

Summary:

This Gatsby template provides a powerful development environment for building fast and optimized websites. With features like TypeScript, ESLint, Prettier, Husky, and Commitlint, it helps ensure code quality and consistency. The template also includes testing tools like Vitest and Testing Library, as well as PR workflow support for better code reviews. The directory structure and path mapping make it easy to navigate and import files. Overall, this template is a comprehensive solution for developing Gatsby sites efficiently.