Home

Awesome

React Starter Kit

<a href="https://github.com/kriasoft/react-starter-kit?sponsor=1"><img src="https://img.shields.io/badge/-GitHub-%23555.svg?logo=github-sponsors" height="20"></a> <a href="http://patreon.com/koistya"><img src="https://img.shields.io/badge/dynamic/json?color=%23ff424d&label=Patreon&&query=data.attributes.patron_count&suffix=%20patrons&url=https%3A%2F%2Fwww.patreon.com%2Fapi%2Fcampaigns%2F233228" height="20"></a> <a href="https://discord.gg/2nKEnKq"><img src="https://img.shields.io/discord/643523529131950086?label=Chat" height="20"></a> <a href="https://github.com/kriasoft/react-starter-kit/stargazers"><img src="https://img.shields.io/github/stars/kriasoft/react-starter-kit.svg?style=social&label=Star&maxAge=3600" height="20"></a> <a href="https://twitter.com/koistya"><img src="https://img.shields.io/twitter/follow/koistya.svg?style=social&label=Follow&maxAge=3600" height="20"></a>

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

Features

<a href="https://reactstarter.com/s/1"><img src="https://reactstarter.com/s/1.png" height="60" /></a>  <a href="https://reactstarter.com/s/2"><img src="https://reactstarter.com/s/2.png" height="60" /></a>  <a href="https://reactstarter.com/s/3"><img src="https://reactstarter.com/s/3.png" height="60" /></a>


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<br> ├──.vscode — VSCode settings including code snippets, recommended extensions etc.<br> ├──app — Web application front-end built with React and Joy UI<br> ├──db — Firestore database schema, seed data, and admin tools<br> ├──edge — Cloudflare Workers (CDN) edge endpoint<br> ├──env — Application settings, API keys, etc.<br> ├──scripts — Automation scripts such as yarn deploy<br> ├──server — Node.js application server built with tRPC<br> ├──tsconfig.base.json — The common/shared TypeScript configuration<br> └──tsconfig.json — The root TypeScript configuration<br>

Tech Stack

Requirements

Getting Started

Generate a new project from this template, clone it, install project dependencies, update the environment variables found in 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/ (press q + Enter to exit).

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

Scripts

How to Deploy

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 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]

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

How to Update

Contributors 👨‍💻

<a href="https://reactstarter.com/c/1"><img src="https://reactstarter.com/c/1.png" height="60" /></a>  <a href="https://reactstarter.com/c/2"><img src="https://reactstarter.com/c/2.png" height="60" /></a>  <a href="https://reactstarter.com/c/3"><img src="https://reactstarter.com/c/3.png" height="60" /></a>  <a href="https://reactstarter.com/c/4"><img src="https://reactstarter.com/c/4.png" height="60" /></a>  <a href="https://reactstarter.com/c/5"><img src="https://reactstarter.com/c/5.png" height="60" /></a>  <a href="https://reactstarter.com/c/6"><img src="https://reactstarter.com/c/6.png" height="60" /></a>  <a href="https://reactstarter.com/c/7"><img src="https://reactstarter.com/c/7.png" height="60" /></a>  <a href="https://reactstarter.com/c/8"><img src="https://reactstarter.com/c/8.png" height="60" /></a>

Backers 💰

<a href="https://reactstarter.com/b/1"><img src="https://reactstarter.com/b/1.png" height="60" /></a>  <a href="https://reactstarter.com/b/2"><img src="https://reactstarter.com/b/2.png" height="60" /></a>  <a href="https://reactstarter.com/b/3"><img src="https://reactstarter.com/b/3.png" height="60" /></a>  <a href="https://reactstarter.com/b/4"><img src="https://reactstarter.com/b/4.png" height="60" /></a>  <a href="https://reactstarter.com/b/5"><img src="https://reactstarter.com/b/5.png" height="60" /></a>  <a href="https://reactstarter.com/b/6"><img src="https://reactstarter.com/b/6.png" height="60" /></a>  <a href="https://reactstarter.com/b/7"><img src="https://reactstarter.com/b/7.png" height="60" /></a>  <a href="https://reactstarter.com/b/8"><img src="https://reactstarter.com/b/8.png" height="60" /></a>

Related Projects

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

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


<sup>Made with ♥ by Konstantin Tarkus (@koistya, blog) and contributors.</sup>