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.
To use .scss
.
npm install sass
Client routing.
npm install react-router-dom
npm install @reduxjs/toolkit react-redux
HTTP request.
npm install axios
For JWT Token decode.
npm install jwt-decode
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/lab
npm install @mui/icons-material
Material-Table (https://material-table.com/#/)
npm install material-table
npm install @material-ui/core
<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>
Formik (https://formik.org/docs/overview)
Form validation.
npm install formik
npm install yup
Date formatting.
npm install date-fns
Framer Motion (https://www.framer.com/motion/)
Animation plugin.
npm install framer-motion
Encryption/Decription libraries.
npm install cripto-js
CKEditor (https://ckeditor.com/docs/ckeditor5/latest)
Text editor interface.
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
REACT_APP_BASE_URL: http://<url_to_api>
docker compose up -d
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>