Need help with react-starter-kit?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kriasoft
20.9K Stars 4.1K Forks MIT License 3 Commits 8 Opened issues

Description

React Starter Kit — front-end starter kit using React, Relay, GraphQL, and JAM stack architecture

Services available

!
?

Need anything else?

Contributors list

# 65
React
GraphQL
TypeScr...
reactjs
3 commits

React Starter Kit

The web's most popular front-end template for building web applications with React, Relay, and GraphQL.

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 and utility functions
├──
dialogs
— React components implementing modal dialogs
├──
fragments
— common (shared) Relay fragments
├──
hooks
— React hooks such as
useLocation()
,
useCurrentUser()
, etc.
├──
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
yarn deploy

├──
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

Tech Stack

Requirements

Getting Started

  • Clone the repo
    git clone -o seed -b main --single-branch https://github.com/kriasoft/react-starter-kit.git
  • Install project dependencies —
    yarn install
  • 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.

Scripts

  • yarn start
    — Launches the app in development mode on
    http://localhost:3000
  • 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
prod
(production) environments are up-to-date found in the
config.ts
file, as well as Cloudflare account credentials found in the
.env
file:
# 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]

Where

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

Contributors 👨‍💻

              

Backers 💰

              

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.


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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.