Gatsby MobX Starter

Gatsby MobX Starter is a boilerplate template that combines Gatsby v2 with TypeScript and MobX to give developers a preconfigured starting point for React applications.

What is Gatsby MobX Starter?

Gatsby MobX Starter is a GitHub starter project that scaffolds a Gatsby v2 site with TypeScript and the MobX state-management library already wired up. It takes a blank project and produces a runnable React app with two example stores, linting, formatting, and test infrastructure included. The examples come from @mweststrate's Egghead course on managing complex state in React with MobX, and the project is positioned as a quick alternative to create-react-app --typescript.

Key Features

• Gatsby v2 + TypeScript — The starter uses Gatsby v2 with TypeScript configured for type-safe React development.
• MobX with decorators — MobX is set up with decorator syntax, allowing class-based store definitions.
• Counter example store — A basic MobX store with an observer component that demonstrates how state changes re-render the UI.
• Temperature example store — A second example showing MobX Provider and type-safe inject for passing stores through the React component tree.
• Prettier and EditorConfig — Code formatting rules are preconfigured to keep style consistent across editors.
• TSLint — Linting rules for TypeScript are included to catch common issues.
• Jest setup — A test runner is preinstalled with scripts for running tests in single-run or watch mode.
• Development scripts — npm scripts cover start, build, type-check, lint, format, and test commands via package.json.

Who is it for?

• React developers who want to build a Gatsby site or app without manually configuring TypeScript and MobX.
• Developers coming from create-react-app who want a similar quick start but with Gatsby's static generation and file-based routing.
• MobX learners who want working examples of stores, observers, Provider, and inject to study.
• Teams that need a consistent starting point with linting, formatting, and tests already enforced.

What can you do with Gatsby MobX Starter?

• Scaffold a new React app with Gatsby's build pipeline and add MobX stores for state management in minutes.
• Use the Counter example as a minimal reference for a MobX store and observer pattern.
• Use the Temperature example as a template for providing stores globally and injecting them into components with TypeScript types.
• Run the project as a static site by building it and serving the output with a local web server.

How does Gatsby MobX Starter work?

1. Make sure you are on a Unix-like shell; on Windows, use Git Bash or MSYS2 because the npm scripts may call rm -rf.
2. Install dependencies with yarn.
3. Start the development server with yarn start.
4. Build a static version with yarn build, then preview it locally with npx local-web-server -d public.

Alternatives

• create-react-app --typescript — A similar React app starter that does not include Gatsby's static generation or file-based routing.