Gatsby TypeScript Boilerplate

Gatsby TypeScript Boilerplate is an opinionated starter for building static websites with Gatsby V2 and TypeScript, preconfigured with offline support, PWA features, and an SCSS styling pipeline.

What is Gatsby TypeScript Boilerplate?

Gatsby TypeScript Boilerplate is a starter repository that scaffolds a Gatsby V2 site written in TypeScript, with SCSS for styling and a set of Gatsby plugins already wired up. It produces a static site that includes offline support, device favicons, and a web app manifest, so the output is a PWA-ready bundle of HTML, CSS, and JavaScript.

The boilerplate is opinionated: it comes with linting and formatting tools such as TSLint (using Airbnb config), Prettier, Stylelint, and PostCSS with Autoprefixer and CSS Nano. The repository metadata describes it as an "Opinionated Gatsby starter with typescript." It currently has 3 stars on GitHub.

Key Features

• Offline support — Uses gatsby-plugin-offline to generate a service worker so pages work without a network connection.
• PWA (Progressive Web Application) — Includes gatsby-plugin-manifest to create a web app manifest, letting users add the site to their device home screen.
• Fav Icons for various devices — Uses gatsby-plugin-favicon to generate favicons sized for different devices and browsers.
• TypeScript preconfigured — The entire project is set up for TypeScript, with TSLint rules from tslint-config-airbnb and tslint-plugin-prettier to enforce style.
• SCSS styling pipeline — Styles are written in SCSS and processed through PostCSS, Autoprefixer, and CSS Nano, with CSS MQ Packer for media query consolidation.
• SEO and metadata management — react-helmet is included so you can manage head tags such as title, meta descriptions, and Open Graph tags.
• Image optimization — gatsby-image, gatsby-plugin-sharp, and gatsby-transformer-sharp are preinstalled for optimized, responsive images.

Who should use Gatsby TypeScript Boilerplate?

• Developers starting a new Gatsby project who want TypeScript configured from the first commit instead of adding it themselves.
• Teams that follow the Airbnb JavaScript style guide — the repository includes tslint-config-airbnb, so linting rules match that convention.
• Static site owners who need PWA capabilities — offline support and a manifest are built in, which is useful for sites that must work on flaky connections.

What can you do with it?

• Prototype a typed static site — Scaffold a Gatsby site with TypeScript components right away, with build tools like Prettier and Stylelint already installed.
• Ship a lightweight PWA — Use the built-in manifest and offline plugin to make a progressive web app without extra configuration.
• Build an SEO-friendly content site — Manage page metadata via react-helmet and take advantage of Gatsby's static generation for fast loads.

The repository lists these Gatsby plugins: gatsby-plugin-favicon, gatsby-source-filesystem, gatsby-plugin-offline, gatsby-plugin-tslint, gatsby-plugin-sharp, gatsby-transformer-sharp, gatsby-plugin-manifest, and gatsby-image. Other included tools are autoprefixer, cssnano, Prettier, Stylelint, and CSS MQ Packer.