Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kriasoft/react-starter-kit

The web's most popular Jamstack front-end template (boilerplate) for building web applications with React
https://github.com/kriasoft/react-starter-kit

boilerplate cloudflare firebase firestore graphql hackathon hono javascript jotai joy-ui nodejs react reactjs scaffolding serverless starter-kit template trpc typescript vite

Last synced: about 2 months ago
JSON representation

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

Awesome Lists containing this project

README 

        
# React Starter Kit














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

[React](https://react.dev/).



## 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, 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 with [React Starter Kit](https://github.com/kriasoft/react-starter-kit).

Be sure to join our [Discord channel](https://discord.com/invite/2nKEnKq) for assistance.



## Directory Structure



`├──`[`.github`](.github) — GitHub configuration including CI/CD workflows


`├──`[`.vscode`](.vscode) — VSCode settings including code snippets, recommended extensions etc.


`├──`[`app`](./app) — Web application front-end built with [React](https://react.dev/) and [Joy UI](https://mui.com/joy-ui/getting-started/)


`├──`[`db`](./db) — Firestore database schema, seed data, and admin tools


`├──`[`edge`](./edge) — Cloudflare Workers (CDN) edge endpoint


`├──`[`env`](./env) — Application settings, API keys, etc.


`├──`[`scripts`](./scripts) — Automation scripts such as `yarn deploy`


`├──`[`server`](./server) — Node.js application server built with [tRPC](https://trpc.io/)


`├──`[`tsconfig.base.json`](./tsconfig.base.json) — The common/shared TypeScript configuration


`└──`[`tsconfig.json`](./tsconfig.json) — The root TypeScript configuration



## Tech Stack



- [React](https://react.dev/), [React Router](https://reactrouter.com/), [Jotai](https://jotai.org/), [Emotion](https://emotion.sh/), [Joy UI](https://mui.com/joy-ui/getting-started/), [Firebase Authentication](https://firebase.google.com/docs/auth)

- [Cloudflare Workers](https://workers.cloudflare.com/), [Vite](https://vitejs.dev/), [Vitest](https://vitejs.dev/),

  [TypeScript](https://www.typescriptlang.org/), [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [Yarn](https://yarnpkg.com/) with PnP



## Requirements



- [Node.js](https://nodejs.org/) v18+ with [Corepack](https://nodejs.org/api/corepack.html) (`$ corepack enable`)

- [VS Code](https://code.visualstudio.com/) editor with [recommended extensions](.vscode/extensions.json)

- Optionally [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)

  and [Reactime](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga?hl=en) browser extensions



## Getting Started



[Generate](https://github.com/kriasoft/react-starter-kit/generate) a new project

from this template, clone it, install project dependencies, update the

environment variables found in [`env/*.env`](./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 at [http://localhost:5173/](http://localhost:5173/) (press `q` + `Enter` to exit).



**IMPORTANT**: Ensure that VSCode is using the workspace [version of TypeScript](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions)

and ESLint.



![](https://files.tarkus.me/typescript-workspace.png)



## Scripts



- `yarn start` — Launches the app in development mode on [`http://localhost:5173/`](http://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



## How to Deploy



Ensure that all the environment variables for the target deployment environment

(`test`, `prod`) found in [`/env/*.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  [--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](https://github.com/kriasoft/graphql-starter) — monorepo template, pre-configured with GraphQL API, React, and Relay

- [Cloudflare Workers Starter Kit](https://github.com/kriasoft/cloudflare-starter-kit) — TypeScript project template for Cloudflare Workers

- [Node.js API Starter Kit](https://github.com/kriasoft/node-starter-kit) — project template, pre-configured with Node.js, GraphQL, and PostgreSQL



## How to Contribute



Anyone and everyone is welcome to [contribute](.github/CONTRIBUTING.md). Start

by checking out the list of [open issues](https://github.com/kriasoft/react-starter-kit/issues)

marked [help wanted](https://github.com/kriasoft/react-starter-kit/issues?q=label:"help+wanted").

However, if you decide to get involved, please take a moment to review the

[guidelines](.github/CONTRIBUTING.md).



## License



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

[LICENSE](https://github.com/kriasoft/react-starter-kit/blob/main/LICENSE) file.



---



Made with ♥ by Konstantin Tarkus ([@koistya](https://twitter.com/koistya), [blog](https://medium.com/@koistya))

and [contributors](https://github.com/kriasoft/react-starter-kit/graphs/contributors).