README.md

FRONTEND - Mission transition écologique

Report Bug • mission-transition-ecologique.beta.gouv.fr

---

CSS - SCSS

La documentation des styles est disponible dans le fichier ./style.md.

Environment variables

The env variables you can use for deployment are listed in the .env.example file.

# To hide the "debug" switch
# If this variable is set to 'true'
# it overrides the `debug-switch` parameters to prohibit debug mode
VITE_NO_DEBUG_SWITCH = false

# To indicate built source while copying the widget
VITE_DEPLOY_URL = https://tee-frontend.osc-fr1.scalingo.io

# To set up global contact email
VITE_CONTACT_EMAIL = [email protected]

# To set up PostHog analytics
# create a posthog account and use the corresponding API key
VITE_POSTHOG_API_KEY = your_key
# To set up Matomo analytics
# Note : if VITE_MATOMO_DEACTIVATE is set to 'true' it prohibits the tracking
# even if VITE_MATOMO_URL and VITE_MATOMO_APP_ID are correctly set
VITE_MATOMO_DEACTIVATE = true
VITE_MATOMO_URL = https://stats.beta.gouv.fr
VITE_MATOMO_APP_ID = 42

# To indicate the backend url
VITE_TEE_BACKEND_URL=https://tee-backend.osc-fr1.scalingo.io

---

Legacy projects

• Aides territoires + Mission transition
  • http://mission-transition.beta.gouv.fr/
  • http://mission-transition.beta.gouv.fr/integration

Projet TEE

• https://www.figma.com/file/tHgzORFkJYTVspsQgR2kg6/TEE-V5
• https://docs.google.com/presentation/d/1zP32OOaRsVEgPTaIXjWUxq3DccR79m4Zv8blfJa-0vQ/edit#slide=id.g22df2b368bb_0_655
• https://whimsical.com/offres-aux-entreprises-dans-la-tee-2gHnT3nFgRZs32pa7aYmPL

Aid programs APIs

• API - Liste des aides Entreprises sur AGIR :
  • https://agirpourlatransition.ademe.fr/entreprises/aides-financieres/recherche?aap%5B0%5D=vous_etes%3AEntreprise
  • https://ppd-x-ademe-externe-api.de-c1.eu1.cloudhub.io/api/v1/r2da/listeDispositif (needs client secret token)
• API - Aides-territoires : https://aides-territoires.beta.gouv.fr/api/swagger/
  • https://github.com/MTES-MCT/aides-territoires/wiki/Comment-publier-vos-donn%C3%A9es-pour-une-reprise-sur-Aides-territoires
  • https://aides-territoires.beta.gouv.fr/api/swagger/?version=1.4
• API - Aides 1 jeune 1 solution :
  • https://mes-aides.1jeune1solution.beta.gouv.fr/api/benefits
  • https://github.com/betagouv/aides-jeunes/blob/master/contribuer/public/admin/config.yml
  • https://github.com/betagouv/aides-jeunes/tree/master/data/benefits/javascript
  • https://contribuer-aides-jeunes.netlify.app/admin/#/
  • (contribution w/ Netlify CMS) https://github.com/betagouv/aides-jeunes/tree/master/data/benefits/javascript

Links and references

• Questionnaires
  • https://diag.bpifrance.fr/
  • https://clic-agil.climaxion.fr/
  • https://entreprendre.service-public.fr/vosdroits/N31906
• Schemas / aid data models
  • https://schema.data.gouv.fr/etalab/schema-dispositif-aide/0.0.2/documentation.html#propriete-condition-eligibilite
  • https://github.com/MTES-MCT/aides-territoires/wiki/Format-des-donn%C3%A9es-publi%C3%A9es-sur-Aides-territoires
  • https://www.insee.fr/fr/information/2406147
  • https://publi.codes/
  • cf "open fisca"
  • cf "mon entreprise"
• Others
  • https://www.entreprises.gouv.fr/files/files/secteurs-d-activite/industrie/decarbonation/transition-ecologique-guidedes-aides-pour-les-tpe-pme.pdf
  • https://www.gouvernement.fr/france-nation-verte
  • https://conseillers-entreprises.service-public.fr/aide-entreprise/accueil/theme/environnement-transition-ecologique
  • https://agirpourlatransition.ademe.fr/entreprises/aides-financieres/2022/tremplin-transition-ecologique-pme

---

Data models - (R&D)

All documentation about data models and references are on our SE Notion space

---

Stack

• Type script
• Vuejs 3
• Vite
• Design System de l'Etat

Technical references / tutorials

• create vue app + vite : https://github.com/vuejs/create-vue
• vue3 + typescript :
  • https://blog.logrocket.com/how-to-use-vue-3-typescript/
  • https://dev.to/nurlan_tl/tips-to-create-web-components-using-vue-3-ts-vite-3a7a
• vue + vite + nuxt + dsfr : https://github.com/laruiss/create-vue-dsfr
• vue3 composition API :
  • https://vuejs.org/guide/extras/composition-api-faq.html
  • https://vuejs.org/guide/reusability/composables.html
• issues templates : https://github.com/stevemao/github-issue-templates/tree/master

---

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

VSCode: Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension

• Run Extensions: Show Built-in Extensions from VSCode's command palette
• Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)

2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

---

Project Setup

npm install
cp .env.example .env

Development mode

Compile and Hot-Reload for Development

npm run dev

Should run on http://localhost:4242

Lint with ESLint

npm run lint

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Cypress

npm run test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

Production Mode

Type-Check, Compile and Minify for Production

npm run build

Run End-to-End Tests with Cypress on Production Build

It's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

npm run build
npm run test:e2e