React Starter Kit

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

Features

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, Jest, 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 with React Starter Kit. Be sure to join our Discord channel for assistance.

Directory Structure

├──.github — GitHub configuration including CI/CD workflows
├──.vscode — VSCode settings including code snippets, recommended extensions etc.
├──common — Common (shared) React components
├──core — Core modules, React hooks, environment variables, etc.
├──dialogs — React components implementing modal dialogs
├──icons — Custom icon React components
├──menus — React components implementing popup menus
├──public — Static assets such as robots.txt, index.html etc.
├──routes — Application routes and page (screen) components
├──scripts — Automation scripts such as yarn deploy
├──theme — Application theme - colors, fonts, paddings, etc.
├──workers — Cloudflare Worker scripts (reverse proxy, SSR)
└──index.ts — Application entry point

Tech Stack

React, Emotion, Material UI v5
TypeScript, Babel, ESLint, Prettier, Jest, Yarn with PnP, Webpack v5

Requirements

Node.js v16 or newer, Yarn package manager
VS Code editor with recommended extensions

Getting Started

Generate a new project from this template, clone it, install project dependencies, update the environment variables found in core/*.env, and start hacking:

$ git clone https://github.com/kriasoft/react-starter-kit.git
$ cd ./react-starter-kit
$ yarn install
$ yarn start

The app will become available at http://localhost:3000.

IMPORTANT: Ensure that VSCode is using the workspace version of TypeScript and ESLint.

Scripts

yarn start — Launches the app in development mode on http://localhost:3000
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 Jest, Supertest
yarn cf publish — Deploys the app to Cloudflare

How to Deploy

Ensure that all the environment variables for the target deployment environment (test, prod) found in /core/*.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 cf 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.

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

Contributors 👨‍💻

Backers 💰

Related Projects

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

Anyone and everyone is welcome to contribute. Start by checking out the list of open issues marked help wanted. However, if you decide to get involved, please take a moment to review the guidelines.

License

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

OmarFaruk-0x01/react-starter-kit