frontend

Flotilla frontend

This document describes how to run the frontend. For information on best practises related to development, see the best practises document.

Setup

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.

Automatic environment setup

See Flotilla readme

Manual environment setup

As a starting point, make a copy of the .env.example file and rename it to .env.

Install

To install the application, navigate to the frontend folder and run the following command:

npm ci

Run

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.

Run in Docker

To run the frontend in docker, run the following command in the root folder of flotilla:

docker compose up --build frontend

Authentication

Authentication is implemented for the frontend following the official Microsoft tutorial on Oauth2 flow in React.

Automatically generated models

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.ts

Formatting

We 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.

Config

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.