This document describes how to run the frontend. For information on best practises related to development, see the best practises document.
The app uses TypeScript and React. For development, Node v20.x needs to be installed. Installation instructions can be found here.
The application reads environment variables from the .env file in the frontend folder.
See Flotilla readme
As a starting point, make a copy of the .env.example file and rename it to .env.
To install the application, navigate to the frontend folder and run the following command:
npm ci
To start the app, run the following command in the root folder:
npm start
This command runs the app in the development mode. Open http://localhost:3001/robotics-frontend to view it in the browser.
The page will reload if you make edits. You will also be able to see any lint errors in the console.
To run the frontend in docker, run the following command in the root folder of flotilla:
docker compose up --build frontend
Authentication is implemented for the frontend following the official Microsoft tutorial on Oauth2 flow in React.
The typescript models have been automatically generated using an openapi-to-typescript npm package. This can be updated by cloning the flotilla-openapi repository and then running:
npx openapi-typescript <path-to-flotilla-openapi>/openapi.yaml --output ./src/models/schema.tsWe use prettier for formatting. To test the formatting locally, run
npm run prettier_check
We recommend to install the prettier extension for vs code
and set the format on save option for vs code to true.
You can do this by going to File -> Preferences -> Settings and then searching for "Format On Save" and tick the box.
The application reads custom environment variables from the .env file on startup. The files need to be prefixed REACT_APP_ to be included in the application.
These are parsed and defined in config.ts.