-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Tech] Migre le Frontend de CRA vers Vite (#1150)
## Taches effectuées - Migration des imports SVG en tant que composants pour les adapter à Vite. - Séparation des envs Frontend des autres via un fichier `/frontend/.env.example` (⚠️ **qu'il faut maintenant copier localement dans un `/frontend/.env`**). - Injection des variables d'environnement Frontend au runtime (et non au buildtime) via [`import-meta-env`](https://import-meta-env.org/), comme sur MonitorFish. [Voir l'ADR correspondant](https://github.com/MTES-MCT/monitorfish/blob/master/adrs/0001-frontend-runtime-env-var-injection.md). - Création d'un utilitaire `isPuppeteer()` pour différencier les conditions que l'on applique pour les tests Puppeteer de celles qu'on applique aux tests Cypress. Même principe qu'avec `isCypress()`. - Traduction à la volée des instructions de contribution legacy et déplacement vers le fichier `CONTRIBUTING.md`. - Début d'écriture des instructions de contribution mises à jour dans ce même fichier, en anglais, pour faciliter le partage éventuel avec d'autres équipes de l'UE. - Remplacement de la commande `npm run cypress:open` par `npm run test:e2e:open`. - Petite refacto qui déplace les constantes de `frontend/src/features/missions/MissionForm/sse.ts` dans un fichier séparé pour éviter un import cycle. ~~Je me suis aussi permis de désactiver un des tests des points d'întérêt parce qu'on est à près de 10% de failure, il y a au moins 4 bugs notables connus sur cette feature et Adeline a prévu de la revoir entièrement.~~  ## Notes - GitGuardian râle pour une clé de dév qui était déjà présente mais qui a été déplacée dans le nouveau ficher `fontend/.env.example`. - Il y aura un soucis avec monitor-ui concernant `cy.fill()` lorsqu'on passera à une der versions Rsuite `>5.45.0` qui casse la structure DOM des fields en assignant l'attribut `id` au wrapper (`div`) au lieu de le passer à l'input. Cet attribut est ciblé par attributs `for` des labels. Je ferai le fix. - Les tests e2e des missions sont localement instables à cause de `clickOutside()` manquants ou qui ne ferment pas correctement certains dropdowns. À investiguer ? ## Review - Ca serait idéal si vous pouviez tester que tout fonctionne bien localement chez vous. Env est assez léger pour tourner sur Chrome en mode dev chez moi contrairement à Fish. - Je vous conseille de cloner cette branche sous un autre dossier car le switch entre CRA et Vite n'est pas fun d'une branche à l'autre. ##⚠️ Derniers points à voir ensemble - Faire le tour des impications staging / prod concernant les variables d'environnement @louptheron @thoomasbro. - Il n'y a pas de `FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED` dans le docker compose de prod, c'est normal @louptheron ? Rien de problématique mais juste pour être sûr. ## Related Pull Requests & Issues - Resolve #964 - #1014 ---- - [ ] Tests E2E (Cypress)
- Loading branch information
Showing
61 changed files
with
3,949 additions
and
13,458 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| # Contributing | ||
|
|
||
| - [Getting Started: Backend \& Frontend](#getting-started-backend--frontend) | ||
| - [Requirements](#requirements) | ||
| - [First Setup](#first-setup) | ||
| - [Local Development](#local-development) | ||
| - [Getting Started: Data Pipeline](#getting-started-data-pipeline) | ||
| - [Requirements](#requirements-1) | ||
| - [First Setup](#first-setup-1) | ||
| - [Local Development](#local-development-1) | ||
| - [Technical Stack](#technical-stack) | ||
| - [Legacy Instructions](#legacy-instructions) | ||
| - [Technical Stack (Main Components)](#technical-stack-main-components) | ||
| - [Development Environment Setup](#development-environment-setup) | ||
| - [Prerequisites](#prerequisites) | ||
| - [Configuration](#configuration) | ||
| - [Sentry](#sentry) | ||
| - [Frontend](#frontend) | ||
| - [Linting](#linting) | ||
| - [Environment Variables](#environment-variables) | ||
| - [Backend](#backend) | ||
|
|
||
| --- | ||
|
|
||
| ## Getting Started: Backend & Frontend | ||
|
|
||
| ### Requirements | ||
|
|
||
| - Debian-based Linux or macOS | ||
| - Docker v25 (with Docker Compose v2) | ||
| - Java Development Kit (JDK) 19 | ||
| - Node.js v20 (with npm v10) | ||
|
|
||
| ### First Setup | ||
|
|
||
| ```sh | ||
| git clone https://github.com/MTES-MCT/monitorenv.git | ||
| cd monitorenv | ||
| cp infra/.env.example infra/.env | ||
| cp frontend/.env.example frontend/.env | ||
| cd frontend && npm i | ||
| ``` | ||
|
|
||
| ### Local Development | ||
|
|
||
| In a first CLI tab, for the Backend (in project root): | ||
|
|
||
| ```sh | ||
| make dev-run-back-with-infra | ||
| ``` | ||
|
|
||
| In a second CLI tab, for the Frontend: | ||
|
|
||
| ```sh | ||
| cd frontend && npm run dev | ||
| ``` | ||
|
|
||
| ## Getting Started: Data Pipeline | ||
|
|
||
| ### Requirements | ||
|
|
||
| - Debian-based Linux or macOS | ||
| - Docker v25 (with Docker Compose v2) | ||
| - Python v3.10 (with Poetry) | ||
|
|
||
| ### First Setup | ||
|
|
||
| __TODO__ | ||
|
|
||
| ### Local Development | ||
|
|
||
| __TODO__ | ||
|
|
||
| ## Technical Stack | ||
|
|
||
| - Databases | ||
| - PostgreSQL | ||
| - GeoServer | ||
| - Backend | ||
| - Language: Kotlin | ||
| - Framework: Spring | ||
| - ORM: Hibernate | ||
| - Testing: JUnit, Mockito | ||
| - Documentation: Swagger | ||
| - Frontend | ||
| - Language: TypeScript | ||
| - Framework: React (with Vite) | ||
| - UI: Rsuite (mostly customized via [monitor-ui](https://github.com/MTES-MCT/monitor-ui)) | ||
| - Testing: Jest, Cypress, Puppeteer | ||
| - Data Pipeline | ||
| - Language: Python (with Poetry) | ||
| - Workflow: Prefect | ||
| - Testing: Pytest | ||
|
|
||
| --- | ||
| --- | ||
|
|
||
| ## Legacy Instructions | ||
|
|
||
| > [!IMPORTANT] | ||
| > These instructions must be cleaned, updated and clarified. They are kept here in the meantime. | ||
| ### Technical Stack (Main Components) | ||
|
|
||
| - Infrastructure: | ||
| - Docker | ||
| - Backend: | ||
| - Kotlin | ||
| - Spring | ||
| - PostgreSQL | ||
| - Geoserver | ||
| - Frontend: | ||
| - React (Create React App) | ||
| - OpenLayers | ||
| - Rsuite | ||
| - Data pipeline: | ||
| - Python 3.10 | ||
| - Poetry | ||
| - Prefect | ||
|
|
||
| ### Development Environment Setup | ||
|
|
||
| #### Prerequisites | ||
|
|
||
| - npm | ||
| - openjdk (osx: `brew install openjdk`) | ||
| - postgres (only `psql` is required. osx: `brew install libpq`) | ||
| - docker + docker-compose | ||
| - python 3.10 + poetry | ||
|
|
||
| #### Configuration | ||
|
|
||
| Create a `./infra/.env` file based on `./infra/.env.template` | ||
| Optionally modify `./infra/configurations/backend/application-dev.properties` | ||
|
|
||
| ##### Sentry | ||
|
|
||
| SENTRY_DSN is an environment variable used by Sentry to identify the application. It is used by both the frontend and backend. It is defined in the `./infra/.env` file and injected into the frontend application via the `./public/env.js` file. | ||
|
|
||
| If `SENTRY_DSN` is set, the backend logs will automatically be sent. | ||
|
|
||
| #### Frontend | ||
|
|
||
| `make dev-install`: install frontend dependencies | ||
| `make dev-run-front`: starts the frontend development server | ||
| The browser will automatically open at the URL <http://localhost:3000> | ||
|
|
||
| ##### Linting | ||
|
|
||
| Before pushing a commit, check the linting with `npm run test:lint` | ||
|
|
||
| ##### Environment Variables | ||
|
|
||
| React CRA allows the introduction of environment variables at build time. | ||
| To allow the use of environment variables at the application's runtime, and to avoid compiling the frontend application for each environment, the variables are injected into the application via the static `public/env.js` file loaded by the client. This file is updated with the environment variables via an `env.sh` script. | ||
| In development, the environment variables are injected via CRA. The `src/env.js` file manages the import of variables for the entire application, regardless of the environment (development or production). | ||
|
|
||
| #### Backend | ||
|
|
||
| Check the configuration: `make dev-check-config` | ||
| Start the backend: | ||
| `make dev-run-back-with-infra`: | ||
|
|
||
| - optionally removes previous docker instances | ||
| - creates a docker instance of the database + geoserver | ||
| - launches the development backend server | ||
|
|
||
| The backend is then accessible at <http://localhost:8880> by default. | ||
| A Swagger interface is available at the URL: <http://localhost:8880/swagger-ui.html> | ||
|
|
||
| It may be necessary to load context data for frontend development and configure Geoserver to distribute this data. | ||
|
|
||
| To restart the backend without recreating the database and geoserver containers, run the command `make dev-run-back` | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.