Piattaforma Proiezioni Climatiche per il Nord-Est

This is the frontend component of the ARPAV-PPCV system.

Climate Projections Platform for North-Eastern Italy

About

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 IT License.

Commissioned by & Data credits to

Current version was designed and developed in Italy by

A previous version had originally been developed by inkode

Install & development

This project uses node version 16. It uses the Yarn Package Manager and is known to work with yarn v1.22.22. Start by ensuring you meet these conditions (install node and yarn).

Now for installing this project:

yarn install --frozen-lockfile

Before launching the application, ensure you have the following environment variables:

• ARPAV_BACKEND_API_BASE_URL - base URL of the backend. Example: http://localhost:8877
• ARPAV_TOLGEE_BASE_URL - base URL of the tolgee service. Example: http://localhost:8899

Create the public/injectedEnv.js file by running:

yarn inject-env public

Then launch application in development mode:

yarn start

Open the browser and enter the following URL in the address bar

http://localhost:3000

Dependencies

• React: entire project is based on React;
• Redux: for state management;
• Redux-Saga: Side effects manager;
• Material UI: design system;
• Leaflet: library used for map visualization;
• ECharts: library used display the timeseries charts.

Project Structure

• src/app/index.tsx: application's entry point;
• src/app/pages/MapPage/index.tsx: main container, it's rendered throughout the application;
• src/app/pages: Application pages;
• src/app/components: React components;
• src/app/Services/API: APIs consumers, based on axios, to communicate with the server and other services such as Thredds;
• src/app/utils/theme.ts: Material UI theme customizations.
• src/locales/it/translation.json: Italian terms dictionary;
• src/app/pages/MapPage/slice: Redux and Redux-Saga management;
• src/utils: Utility functions.

Running in production

Build the docker image:

docker build -t ppcv_frontend -f Dockerfile .

Run the built container with:

docker run \
    -e ARPAV_BACKEND_API_BASE_URL=http://localhost:8877 \
    -e ARPAV_TOLGEE_BASE_URL=http://localhost:8899 \
    -p 3000:80 \
    ppcv_frontend