Table of contents

• React-template
• Usage
• Build
• Vite
• Docker
• Linter
• Continuous integration
• Code documentation
• Technologies

React-template

This is a frontend react typescript template ready to use with MaterialUI

It contains lot of tools already set as describe below.

And don't hesitate to check the already installed packages in package.json.

Usage

• To launch the template in development mode :

yarn

yarn run dev

Build

• To build a production ready package :

yarn run build

• Once built you can view locally a preview of your production build :

yarn run serve

Vite

This template uses Vite instead of react-scripts as it is providing a faster and leaner development experience, Typescript speed is increased by 20 times compared to webpack or others, and it provides a build command pre-configured to output highly optimized static assets for production.

Docker

A dockerfile and docker-compose implementation is provided.

• To launch the template in a docker container :

docker-compose up --build

Linter

A Linter is also included Eslint.

• To use it :

yarn run lint

• To automatically fix all the warnings :

yarn run lint:format

You can also add your own rules in the file .eslintrc.js in the rules part.

Continuous integration

This template provides Github Actions CI.

It handles :

• Docker build

• Linter

• Readme table of contents update.

Dependabot is also used in this template to automatically merge with the most recent dependencies. To enable mergify bot to apply on your repository please follow the instructions here on Mergify.

Code documentation

Go to src folder.

• components folder is for any generic component that is reusable in your code

• helper contains :

  • types.ts file for your interfaces

  • utilities.ts for any utility function

• api contains :

  • add your files for your your API calls, it already contains a CRUD for the user management, go check :)

• routes is for all your routes :

  • you'll find at the root the entrypoint index.tsx where you define your paths

  • still at the root App.css for your style

  • in the User folder you already have signin, signup, password reset pages with their API call linked

Now, simply add your folder/routes in the routes folder, apply your styles in App.css if you need and create your paths in index.tsx

Enjoy :)

Technologies

• Typescript
• Eslint (styling)
• Docker
• Vite
• Github action (CI/CD)
• Mergify