React Starter Kit
- 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:
.github — GitHub configuration including CI/CD workflows
.vscode — VSCode settings including code snippets, recommended extensions etc.
common — common (shared) React components
core — core modules and utility functions
dialogs — React components implementing modal dialogs
fragments — common (shared) Relay fragments
hooks — React hooks such as
icons — custom icon React components
menu — 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
theme — application theme - colors, fonts, paddings, etc.
workers — Cloudflare Worker scripts (reverse proxy, SSR)
config — client-side application settings per environment
index.ts — application entry point
- React, Relay, Emotion, Material UI v5
- TypeScript, Babel, ESLint, Prettier, Jest, Yarn v2 with PnP, Webpack v5
- Clone the repo
git clone -o seed -b main --single-branch https://github.com/kriasoft/react-starter-kit.git
- Install project dependencies —
- Launch the app —
yarn start, it will become available at http://localhost:3000
IMPORTANT: Ensure that VSCode is using the workspace versions of TypeScript and ESLint.
yarn start— Launches the app in development mode on
yarn update-schema— Update GraphQL API schema by running an introspection query
yarn relay— Updates GraphQL fragments used in the code
yarn build— Compiles and bundles the app for deployment
yarn lint— Validate code using ESLint
yarn tsc— Validate code using TypeScript compiler
yarn test— Run unit tests with Jest, Supertest
yarn deploy— Deploys the app to Cloudflare
How to Deploy
Ensure that client-side application settings for
test (QA) and
(production) environments are up-to-date found in the
file, as well as Cloudflare account credentials found in the
# Cloudflare # https://dash.cloudflare.com/ # https://developers.cloudflare.com/api/tokens/create CLOUDFLARE_ACCOUNT_ID= CLOUDFLARE_ZONE_ID= CLOUDFLARE_API_TOKEN=
Compile and deploy the app by running:
$ yarn build $ yarn deploy [--env #0]
--env argument is the target environment, 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 pnpify --sdk 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
- 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.