React Starter Boilerplate

A highly scalable and focused on performance and best practices boilerplate code for TypeScript based React SPA applications.

This project was bootstrapped with Vite and modified by TSH team.

Start your new React application in seconds!

Features

Quick scaffolding

Generate React code snippets from the CLI by using Plop micro-generator framework.

TypeScript

The best way to write modern frontend applications. Code is easier to understand. By using TypeScript it is more difficult to write invalid code as was the case in dynamically typed languages.

Static code analysis

Focus on writing code, not formatting it! Code formatter and linter keeps the code clean which makes work and communication with other developers more effective!

How to bootstrap your React project

To start your new React project based on the react-starter-boilerplate you need to follow this steps:

1. Clone this repository:

git clone https://github.com/TheSoftwareHouse/react-starter-boilerplate.git

2. Change the name of project directory to the name of your project. Also don't forget to change the name of your application in package.json file.

3. Restore git history of the project. To do that, run following commands:

   sudo rm -r .git
   git init
   git remote add origin <your empty project repository>
   git remote -v

4. Replace this file with PROJECT_README.md and fill all the placeholders with data about your project:

   mv PROJECT_README.md README.md

5. Add all files to git history and create initial commit:

   git add .
   git commit -m 'Initial commit'
   git push origin master

6. Copy the .env.dist file to .env.local and populate the environment variables with the values used in the local environment

cp .env.dist .env.local

Now, your project is bootstrapped successfully! 🎉

You can install dependencies and start developing your React application 🚀

Scripts

npm run [command_name]

• start - Launches the app in development mode on http://localhost:3000
• build - Compiles and bundles the app for deployment*
• build:ci - Build command optimized for CI/CD pipelines
• build:analyze - Builds the app and opens the rollup-plugin-visualizer report in the browser
• typecheck - Validate the code using TypeScript compiler
• preview - Boot up a local static web server that serves application build. It's an easy way to check if the production build looks OK on your local machine
• test - Run unit tests with vitest
• coverage - Run unit tests with code coverage calculation
• lint - Validate the code using ESLint and Prettier
• lint:fix - Validate and fix the code using ESLint and Prettier
• plop - Run CLI with commands for code generation
• translations - Run Babelsheet tool for fetch the latest translations
• serve:cypress - Run Cypress E2E tests panel
• version - Build CHANGELOG file base on git commits history
• e2e:open - Run E2E tests panel
• e2e:ci:firefox: Run E2E tests on Firefox browser in CI pipelines
• e2e:ci:chrome: Run E2E tests on Chrome browser in CI pipelines

*See the section about deployment for more information.

Table of Contents

1. Technology stack
2. Application structure
3. React Query abstraction
4. Using plop commands
5. E2E tests

How to Contribute

Anyone and everyone is welcome to contribute. Start by checking out the list of open issues.

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

License

Copyright © 2021-present The Software House. This source code is licensed under the MIT license found in the LICENSE file.

^{Made with ♥ by The Software House (website, blog) and contributors.}