CONTRIBUTING.md

Contributing

• Get Started
  • Requirements
  • First Setup
  • Local development
  • Main directories
  • Stack
• Deployment
• Common Tasks
  • Generate a new database migration
• IDEs
  • Recommended Visual Studio Code settings
  • Recommended Visual Studio Code extensions

Get Started

Requirements

• Node.js
• Yarn
• Docker
• gsed

First Setup

⚠️ Important
If you're under Windows, please run all the CLI commands within a Linux shell-like terminal (i.e.: Git Bash).

Then run:

git clone https://github.com/betagouv/metiers-numeriques.git
cd metiers-numeriques
yarn
yarn dev:setup
yarn dev:docker
yarn db:migrate

If you have the production API_KEY secret env, you can seed the production data locally by copy/pasting its value into the .env file PROD_API_SECRET key and running yarn dev:seed.

📋 Note
The yarn command install the dependencies but also run the scripts/dev/setup.js scripts. This script does the following tasks, if necessary:

• Copy .env.example file to a .env one.
• Generate a RSA Key Pair (required in order to generate and verify JWTs)

Local development

yarn dev:docker
yarn dev

This will run MongoDB within a Docker container via Docker Compose and run the webapp which should then be available at http://localhost:3000.

It will also watch for file changes and automatically re-hydrate the webapp on the go.

Main directories

api/                # API code base
app/                # Application code base
common/             # Code base common to both API and Application
config/             # Various configuration and setup files
e2e/                # Playwright end-to-end tests
graphql/            # GraphQL schemas
pages/              # Path-based entrypoint files (natively handled by Next.js)
prisma/             # Prisma ORM schema, migrations and seeds
public/             # Public assets (natively handled by Next.js)
scripts/            # Scripts code base

Stack

It's a full Typescript application (for both backend & frontend code).

• The WebApp & API are under Next.js framework.
• The database is a PostgreSQL one managed through Prisma ORM (including migrations & seeds).

Deployment

This website should be ready to be deployed on Scalingo as is. Request an access in Mattermost if you need one.

Common Tasks

Generate a new database migration

Each time you add a final change in ./prisma/schema.prisma, you need to generate a migration as well as updating Prisma typings in order to record it:

yarn dev:migrate

You then need to name your new migration. Please check previous generated migrations to keep some naming consistency.

And don't forget to restart your local instance in order for Prisma to load the new schema.

IDEs

Recommended Visual Studio Code settings

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": true,
  "eslint.codeActionsOnSave.mode": "all",
  "eslint.format.enable": true,
  "eslint.packageManager": "yarn",
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma"
  }
}

Recommended Visual Studio Code extensions

.vscode/extensions.json

{
  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "ms-playwright.playwright", "Prisma.prisma"]
}