Use package-lock.json when building since newer versions of the libraries, expecially MUI will break the code.

Code was written a couple of years ago, and was not updated since then.

Plugins

Essential plugins

SASS

To use .scss.

npm install sass

React Router DOM

Client routing.

npm install react-router-dom

REDUX (https://redux-toolkit.js.org/introduction/getting-started)

npm install @reduxjs/toolkit react-redux

AXIOS (https://axios-http.com/docs/api_intro)

HTTP request.

npm install axios

JWT-TOKEN

For JWT Token decode.

npm install jwt-decode

MUI plugins

Material-UI (https://mui.com/pt/material-ui/getting-started/installation/)

npm install @mui/material @emotion/react @emotion/styled

Para os componentes ainda em Testes

npm install @mui/lab

Material-UI (Icons)

npm install @mui/icons-material

Material-Table (https://material-table.com/#/)

npm install material-table

Caso não esteja ja usando MUI instalar o core

npm install @material-ui/core

Robot Fonts (https://mui.com/pt/material-ui/getting-started/installation/)

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>

<style>
    * {
        margin: 0;
        font-family: 'Roboto', sans-serif;
    }
</style>

Extra Plugins

Formik (https://formik.org/docs/overview)

Form validation.

npm install formik

Yup (https://github.com/jquense/yup)

npm install yup

Date-fns

Date formatting.

npm install date-fns

Framer Motion (https://www.framer.com/motion/)

Animation plugin.

npm install framer-motion

Cripto-JS (https://www.code-sample.com/2019/12/react-encryption-decryption-data-text.html)

Encryption/Decription libraries.

npm install cripto-js

CKEditor (https://ckeditor.com/docs/ckeditor5/latest)

Text editor interface.

Default build

npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

Progress-bar (https://github.com/badrap/bar-of-progress)

Top page progress bar.

npm install @badrap/bar-of-progress

Clonedeep (https://lodash.com/docs/#cloneDeep)

For cloning objects in JS.

npm install lodash.clonedeep

Match-sorter (https://github.com/kentcdodds/match-sorter)

For custom array sorting based on multiple and similar values.

npm install match-sorter

Rechart (https://recharts.org/en-US/api)

Chart plugin.

npm install recharts

Environment Variables

REACT_APP_BASE_URL: http://<url_to_api>

Deploy

docker compose up -d

If not using Docker

If using Apache, include this .htaccess in the project root, so React Routes can work.

<IfModule mod_rewrite.c>
    Options -Indexes

    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule . itrade/index.html [L]
</IfModule>