Repository files navigation

The web's most popular Jamstack front-end template for building web applications withReact.

• 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:

This project was bootstrapped withReact Starter Kit.Be sure to join ourDiscord channel for assistance.

├──.github — GitHub configuration including CI/CD workflows
├──.vscode — VSCode settings including code snippets, recommended extensions etc.
├──app — Web application front-end built withReact andJoy UI
├──db — Firestore database schema, seed data, and admin tools
├──edge — Cloudflare Workers (CDN) edge endpoint
├──env — Application settings, API keys, etc.
├──scripts — Automation scripts such asyarn deploy
├──server — Node.js application server built withtRPC
├──tsconfig.base.json — The common/shared TypeScript configuration
└──tsconfig.json — The root TypeScript configuration

• React,React Router,Jotai,Emotion,Joy UI,Firebase Authentication
• Cloudflare Workers,Vite,Vitest,TypeScript,ESLint,Prettier,Yarn with PnP

• Node.js v18+ withCorepack ($ corepack enable)
• VS Code editor withrecommended extensions
• OptionallyReact Developer ToolsandReactime browser extensions

Generate a new projectfrom this template, clone it, install project dependencies, update theenvironment variables found inenv/*.env, and start hacking:

$ git clone https://github.com/kriasoft/react-starter-kit.git example$ cd ./example$ corepack enable$ yarn install$ yarn workspace app start

The app will become available athttp://localhost:5173/ (pressq +Enter to exit).

IMPORTANT: Ensure that VSCode is using the workspaceversion of TypeScriptand ESLint.

• yarn start — Launches the app in development mode onhttp://localhost:5173/
• 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

Ensure that all the environment variables for the target deployment environment(test,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 Workersenvironment by runningyarn workspace edge wrangler secret put <NAME> [--env #0].

Finally build and deploy the app by running:

$ yarn build$ yarn deploy [--env #0] [--version #0]

Where--env argument is the target deployment area, e.g.yarn deploy --env=prod.

• 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

Anyone and everyone is welcome tocontribute. Startby checking out the list ofopen issuesmarkedhelp wanted.However, if you decide to get involved, please take a moment to review theguidelines.

Copyright © 2014-present Kriasoft. This source code is licensed under the MIT license found in theLICENSE file.

^{Made with ♥ by Konstantin Tarkus (@koistya,blog)andcontributors.}