react-starter-kit

Web project starter kit including modern tools and workflows based on create-react-app and best practices from the community. Provides a scalable base template and a good learning base. Suitable for enterprise usage

Includes:

• Redux-toolkit
• Vscode setup (debugging + snippets)
• Jest, @testing-library and Cypress
• Immer

Table of contents

• Getting started
• Project structure
• "Forking" outside of Github
• Configuration
  • Using the config.ts file
  • adding values

Getting started

1. npm install
2. npm start (localhost:3000)
3. npm test (run jest + coverage on localhost:8080)

Project structure

Only the important files are shown

.
├── .vscode # vscode setup (debug, snippets, etc)
├── config # tool configuration
├── cypress # e2e tests
├── dist # production version
├── public
├── public # directory with public files (config, icons, etc), will be copied to dist
│   ├── i18n # directory to house i18n language files
│   ├── config.js # default runtime application config
│   └── configOverride.js # default config overrides.
├── scripts # Modified default create-react-app scripts
├── src # application source
│   ├── app # redux-toolkit hooks + store
│   └── infrastructure # infrastructure code (wrappers, navigation, config file class)
├── CHANGELOG.md # update this whenever you update the application
├── Dockerfile # Dockerfile to build nginx container
├── jest.config.js # configuration for jest
├── package.json
├── README.md # keep this up to date
└── tsconfig.json

"Forking" outside of Github

To use this base in other git software (not Github) you will have to manually manage the upstream. Go into your existing repo and execute the following commands:

1. git remote add upstream <clone-url>
2. git pull upstream master # or other branchname
3. git push

Then, when you need to sync again you can repeat step 2 and 3

Configuration

This starter kit comes with runtime configuration out-of-the-box. It achieves this with 2 config files in the public directory: config.js and configOverrides.js. config.js is meant to be filled with a default for all of your application's runtime configurations. configOverrides.js is meant to be replaced during deployment with environment specific runtime overrides.

Using the config.ts file

To use the config you import Config from config.ts and use the typed object:

import { Config } from "../config";

import { FunctionComponent } from "react";

export const Navbar: FunctionComponent<{}> = () => {
  return <h1>{JSON.stringify(Config)}</h1>;
};

adding values

To add a value to the runtime config you have to take 2 steps:

1. Add a type to the RuntimeConfig type in src/infrastructure/config/RunTimeConfig.ts

   type RunTimeConfig = {
     version: number;
     name: string;
     myNewKey: string;
   };
   

2. Add a key (if required) to public/config.js