Gatsby Starter Default TypeScript

Gatsby Starter Default TypeScript is a community-maintained boilerplate that converts the official Gatsby default starter to TypeScript, providing a typed foundation for building static React sites with Gatsby.

What is Gatsby Starter Default TypeScript?

This is a starter template for Gatsby, the static site generator for React. It accepts a new project name through the Gatsby CLI and outputs a complete Gatsby project skeleton configured with TypeScript, including src/pages/index.tsx as the entry page. The starter runs on Node.js and is maintained by Andy Kenward on GitHub.

Key Features

• TypeScript from the start — Every source file is TypeScript-ready, and compilation is handled by gatsby-plugin-typescript rather than the tsc command, as stated in tsconfig.json.
• GraphQL Code Generator — A codegen.yml file watches the schema.json output and generates TypeScript typings for GraphQL queries; run it with npm run codegen:watch.
• Type checking watch mode — npm run type-check:watch continuously checks project typings using the TypeScript compiler.
• Standard Gatsby configuration — Includes gatsby-config.js, gatsby-node.js, gatsby-browser.js, and gatsby-ssr.js, mirroring the official default starter structure.
• Prettier preconfigured — Ships with .prettierrc to keep code style consistent across contributors.
• GraphiQL built in — The development server at localhost:8000 exposes a GraphiQL explorer at /___graphql for query experimentation.
• Netlify deploy button — The README links to one-click deployment on Netlify using the starter's repository URL.

Who should use Gatsby Starter Default TypeScript?

• JavaScript developers moving to TypeScript — They can learn Gatsby's structure while working in a typed environment without setting up the toolchain themselves.
• React developers starting static sites — They get a pre-configured Gatsby project with typed GraphQL queries for content-driven pages.
• Teams enforcing type safety — The included codegen and type-check scripts make it straightforward to keep GraphQL and TypeScript types in sync.

What can you do with it?

• Quick project scaffold: Run gatsby new my-default-starter https://github.com/andykenward/gatsby-starter-default-typescript to generate a new site.
• Fast development loop: Start the dev server with npm start, edit src/pages/index.tsx, and see browser updates in real time.
• Generate query typings: Use npm run codegen:watch to produce TypeScript definitions from the GraphQL schema in schema.json.
• Deploy without a custom setup: Click the Netlify deploy link in the README to publish the repository.

How does it work?

After scaffolding, you run npm start to launch the server. Separately, npm run codegen:watch watches the GraphQL schema and generates TypeScript types, while npm run type-check:watch runs TypeScript checks in watch mode during development.

Alternatives

• gatsby-starter-default — the original JavaScript-based default starter from Gatsby.
• gatsby-starter-blog — an official Gatsby starter focused on blog sites, also available in JavaScript.

FAQ

Is this starter free to use?

Yes, the project is open source under the MIT license, the same license used by Gatsby itself.

How do I create a site with this starter?

Use the Gatsby CLI command gatsby new my-default-starter https://github.com/andykenward/gatsby-starter-default-typescript from your terminal.

What files are included?

The root contains gatsby-config.js, gatsby-node.js, gatsby-browser.js, gatsby-ssr.js, tsconfig.json, codegen.yml, schema.json, .prettierrc, package.json, and a src directory with index.tsx.

Does this starter compile TypeScript with tsc?

No. The tsconfig.json is used only for type checking; gatsby-plugin-typescript handles actual compilation during the Gatsby build.