LeooR22 / React-App-Template-LeooR22

Basic structure for a React App using CRA

Basic structure for a React App using CRA

This is a project template which uses and already has the following packages configured:

• Redux Toolkit
• react-router-dom v6
• RTK-query
• MUI5
• Formik
• Yup
• Redux-persist
• redux-persist-transform-encrypt
• camelcase-keys
• snakecase-keys

This projects also uses a middleware on RTK-query to connect a React application with a snake case python backend.

Live Demo

Clone the project

git clone https://github.com/kabirivan/React-App-Template

Setup

Requirements

Node >= 12

Set environment variables

Create an .env.development and .env.production files on root folder and copy the content from .env.example. Feel free to change it according to your own configuration for development and production.

Install packages

On the root folder run:

yarn install

Start the project on development mode

In this mode the app reads and uses the .env.development environment variables Open http://localhost:3000 to view it in the browser.

yarn start:development

Start the project on production mode

In this mode the app reads and uses the .env.production environment variables Open http://localhost:3000 to view it in the browser.

yarn start:production

Test the code

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Run a static code analisys

In order to run more sophisticated static analysis, you can follow the instructions on this post for more information.

Create a production bundle

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed! It uses .env.production credentials

yarn build

See the section about deployment for more information.

Preview

Firebase CI/CD using github actions

You can edit the workflow on .github/workflows/main.yml

The following secrets should be configured on github. It uses borales/actions-yarn@v2.3.0, w9jds/firebase-action@master and act10ns/slack@v1.

REACT_APP_BACKEND_ENDPOINT
REACT_APP_ENCRYPT_STORAGE
REACT_APP_REDUX_SECRET_KEY
REACT_APP_JWT_SECRET
PORT
SLACK_WEBHOOK_URL
FIREBASE_TOKEN

You can check here how to configure secrets on github account

TODO List:

• Add redux toolkit setup
• Add encrypt storage
• Add JWT authentication
• Add RTK-Query for data fetching
• camelcase-keys and snakecase-keys middlewares
• Add Redux persist with encryption for storage
• Add Formik form example
• Add MUI5
• Add eslint
• Add sonarqube for static code analysis
• Github action for CI/CD on firebase
• Add a moment example
• Add a Formik example with Yup

PR are welcome ❤️

License

• This project is licensed under the terms of the MIT license