React Starter Kit
The web's most popular Jamstack front-end template for building web applications with React.
- Optimized for serverless deployment to CDN edge locations (Cloudflare Workers)
- HTML page rendering (SSR) at CDN edge locations, all ~100 points on Lighthouse
- Hot module replacement during local development using React Refetch
- Pre-configured with CSS-in-JS styling using Emotion.js
- Pre-configured with code quality tools: ESLint, Prettier, TypeScript, Vitest, etc.
- Pre-configured with VSCode code snippets and other VSCode settings
- The ongoing design and development is supported by these wonderful companies:
.github — GitHub configuration including CI/CD workflows
.vscode — VSCode settings including code snippets, recommended extensions etc.
app — Web application front-end built with React and Material UI
edge — Cloudflare Workers (CDN) edge endpoint
env — Application settings, API keys, etc.
scripts — Automation scripts such as
tsconfig.base.json — The common/shared TypeScript configuration
tsconfig.json — The root TypeScript configuration
- React, React Router, Recoil, Emotion, Material UI, Firebase Authentication
- Cloudflare Workers, Vite, Vitest, TypeScript, ESLint, Prettier, Yarn with PnP
- Node.js v18+ with Corepack (
$ corepack enable)
- VS Code editor with recommended extensions
- Optionally React Developer Tools and Reactime browser extensions
$ git clone https://github.com/kriasoft/react-starter-kit.git example $ cd ./example $ yarn install $ yarn start
The app will become available at http://localhost:5173/ (press
q key to exit).
IMPORTANT: Ensure that VSCode is using the workspace version of TypeScript and ESLint.
yarn start— Launches the app in development mode on
yarn build— Compiles and bundles the app for deployment
yarn lint— Validate the code using ESLint
yarn tsc— Validate the code using TypeScript compiler
yarn test— Run unit tests with Vitest, Supertest
yarn edge deploy— Deploys the app to Cloudflare
How to Deploy
Ensure that all the environment variables for the target deployment environment
prod) found in
/env/*.env files are up-to-date.
If you haven't done it already, push any secret values you may need to CF Workers
environment by running
yarn workspace edge wrangler secret put <NAME> [--env #0].
Finally build and deploy the app by running:
$ yarn build $ yarn deploy [--env #0] [--version #0]
--env argument is the target deployment area, e.g.
yarn deploy --env=prod.
How to Update
yarn set version latest— Bump Yarn to the latest version
yarn upgrade-interactive— Update Node.js modules (dependencies)
yarn dlx @yarnpkg/sdks vscode— Update TypeScript, ESLint, and Prettier settings in VSCode
- GraphQL API and Relay Starter Kit — monorepo template, pre-configured with GraphQL API, React, and Relay
- Cloudflare Workers Starter Kit — TypeScript project template for Cloudflare Workers
- Node.js API Starter Kit — project template, pre-configured with Node.js, GraphQL, and PostgreSQL
How to Contribute
Copyright © 2014-present Kriasoft. This source code is licensed under the MIT license found in the LICENSE file.