VEMAP Quick Start

Welkom bij de VEMAP applicatie! Deze guide helpt je om snel aan de slag te gaan met het opstarten en configureren van een ontwikkelomgeving voor de VEMAP applicatie.

VEMAP Quick Start Guide

Systeem vereisten

Tool	Versie	Gebruik
Node.js	18^	Frontend ontwikkeling
Python	3.12	Backend en MMMS ontwikkeling (maximaal ondersteunde versie door AWS Chalice)
Git	-	Versiebeheer
AWS CLI	-	Deployment (optioneel voor lokale ontwikkeling)

GitHub repositories

# Frontend repository
git clone https://github.com/{gebuikersnaam}@MAPtrafficmanagement/vemap-frontend.git
cd vemap-documentation/frontend

# Backend (Core API)
git clone https://github.com/{gebuikersnaam}@MAPtrafficmanagement/vemap-backend.git
cd vemap-backend

Frontend Setup

Dependencies installeren

file-locatie/vemap-frontend/frontend

# Open de .code-workspace in VS Code
npm install

Development Server Starten

Opstarten van de development server voor de frontend. De default poort is http://localhost:4321.

file-locatie/vemap-frontend/frontend

npm run dev

CORS Configuration

Gebruik altijd de default poort http://localhost:4321 voor de development server, dit heeft te maken met de backend en MMMS CORS configuratie. Voor veiligheidsredenen zijn slechts bepaalde origins toegestaan.

Build Commands

# Development
npm start

# Of
npm run dev

Deployment

# Deploy naar Netlify
npm run deploy

# node scripts/generate-build-id.js && netlify deploy --prod --build

De npm run deploy command is een alias voor de volgende command:

node scripts/generate-build-id.js && netlify deploy --prod --build

Het zorgt ervoor dat de build ID wordt gegenereerd, voor client side cache busting. Vervoglens worden alle tests gedraaid via het geconfigureerde predeploy script.

Alle commando’s

package.json

{
  "name": "vemap-frontend",
  "short": "vemap",
  "type": "module",
  "version": "1.0.0",
  "scripts": {
    "start": "astro dev",
    "dev": "astro dev",
    "astro": "astro",
    "test": "vitest run",
    "test:watch": "vitest",
    "test:coverage": "vitest run --coverage",
    "deploy": "node scripts/generate-build-id.js && netlify deploy --prod --build",
    "predeploy": "npm run test"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

---

Backend Setup

Note

Belangrijk is om de backend in de virtual environment te starten, om eventuele conflicten te voorkomen met de global python versie.

Installeer de dependencies altijd in de virtual environment.

Virtual Environment Setup

E:/Dev/vemap-backend

# 1. Maak virtual environment met Python 3.12 in de root van het project
python -m venv venv312

# 2. Navigeer naar de backend directory
cd backend

# 3. Activeer virtual environment
..\venv312\Scripts\activate

Dependencies installeren

file-locatie/vemap-backend/backend

# Draai de dependencies installatie in de virtual environment
pip install -r requirements.txt

requirements.txt

chalice>=1.26.0
boto3>=1.26.0
psycopg2-binary>=2.9.0
pydantic>=2.0.0
email-validator>=2.0.0
requests>=2.31.0

Development server starten

E:/Dev/vemap-backend/backend

# Start de development server
chalice local

Het opstarten van de development backendserver gebeurt default op poort http://localhost:8000. Voor het configureren van een andere poort, voeg de --port parameter toe aan het commando, gevolgd door de poort nummer.

De backend API is nu beschikbaar op http://localhost:8000.

Note

Het wordt sterk aangeraden om de default port te gebruken voor de development server, zodat er geen wijzigingen aangebracht hoeven te worden in de frontend én backend configuratie.

---

MMMS Setup

GitHub Repository

# MMMS (Mail Microservice)
git clone https://github.com/{gebuikersnaam}@MAPtrafficmanagement/vemap-mmms.git
cd vemap-mmms

Note

Het MMMS (Mail Microservice) vereist ook een virtual environment. Gebruik dezelfde virtual environment als de backend of maak een aparte virtual environment aan voor het MMMS.

Installeer de dependencies altijd in de virtual environment.

Virtual Environment Setup

E:/Dev/mmms

# 1. Maak virtual environment met Python 3.12 in de root van het project
python -m venv venv312

# 2. Activeer virtual environment
venv312\Scripts\activate

Dependencies installeren

file-locatie/mmms

# Draai de dependencies installatie in de virtual environment
pip install -r requirements.txt

requirements.txt

boto3>=1.34.0
botocore>=1.34.0
chalice>=1.26.0
psycopg2-binary>=2.9.0
pydantic>=2.0.0
email-validator

Development server starten

E:/Dev/mmms

# Start de development server
chalice local --port 8001

Note

Het opstarten van de development MMMS-server gebeurt op poort http://localhost:8001. Dit is de aanbevolen poort om conflicten te voorkomen met de backend (poort 8000) en de frontend (poort 4321).

De MMMS API is nu beschikbaar op http://localhost:8001.

---

Database Setup

Development Database

Voornemen: Er zijn plannen om een aparte development database aan te maken om conflicten met klantdata te voorkomen. Dit zorgt voor een veilige ontwikkelomgeving zonder risico op data corruptie in productie.

Huidige situatie: Voor nu wordt de bestaande database gebruikt voor development.

---

AWS Setup

AWS Credentials

aws configure

Environment Variables

# Backend
export AWS_REGION=eu-west-1
export DATABASE_URL=postgresql://user:pass@host:5432/db

# MMMS
export AWS_REGION=eu-west-1
export SES_REGION=eu-west-1
export SQS_QUEUE_URL=https://sqs.eu-west-1.amazonaws.com/account/queue