Crow's Nest - Frontend

A React web-application working as Crow's Nest frontend.

Development in VSCode

1. Clone the crowsnest-frontend repository.
2. Open the crowsnest-frontend directory in VSCode.
3. Install the dependencies with: npm install
4. Open a terminal window and start the frontend development server: npm start (accessible at localhost:3000).

Production

The Crow's Nest frontend is meant to be served by a docker container. The latest Docker container image can be pulled from MORISE's public docker registry.

To build the image yourself:

1. Clone the crowsnest-frontend repository.

   • with HTTPS: git clone https://github.com/MO-RISE/crowsnest-frontend.git
   • with SSH: git clone git@github.com:MO-RISE/crowsnest-frontend.git

2. Cd into the main directory (i.e. where the Dockerfile file is) and run the following command:

docker build . -t crowsnest-frontend .

Afterwards, the production container can be run with a command similar to this one:

docker run --rm -p 8888:80 crowsnest-frontend

The application will then be available at the URL http://localhost:9999. Note that the production container exposes its webserver on port 80, so the -p flag must be used to bind this port to the host. Furthermore, the -e flag can be used to pass the environmental variable MQTT_BROKER_URL. This variable points to the URL where the web application can reach an MQTT broker. If MQTT_BROKER_URL is not given, the default value of XXXX is used.

Issues

Plotting maps does not work in Firefox because it is not compatible with OffscreenCanvas.