The ENTS client is built with React, a component based web library and MUI as the UI component library.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.\
Starts the vitest
Starts the vitest with interactive UI
Runs a coverage test with vitest using --coverage flag
Runs lint
Runs lint and fixes fixable lint errors
Builds the app for production to the build folder.\
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
For testing, it uses vitest as the testing framework, msv as the API mocking library, and testing library's testing utilities.
Testing files are denoted in these formats *.test.js or *.test.jsx depending on type of tests. Tests are stored with their components, under a __tests__ for multiple tests or an individual file. For integration tests, they should be store with the highest level and relevant component. End to end testing have not been implemented to due changing scope of the backend.
Files are to be linted under the eslint config.
To lint run
npm run lintFiles are to be formatted uner the prettier config.
To format, for vscode, install the extentiona nd follow the guide. For other ides, setup prettier using their docs
The ENTS client has two docker targets, development and production. The development target runs npm start and hot reload is supported in docker-compose.yml with volumes. The production target builds the client using npm build and servers static files using nginx
The ENTS client uses Axios as it's http client. There are two main instances of Axios used, one that handles authenticated requests and the other that handles all other requests. See auth
The charts generated by ENTS client are bootstrapped using Chart.js and react-chartjs-2. At the time of writing this, react-chartjs-2 may potientially be losing support, hence an alternative may need to replace this in the future
The authentication context is set using the useAuth hook. For authenticated requests, seperate Axios instance, useAxiosPrivate is used to intercept http requests and mutate them with the auth headers.