Merge pull request #28 from GemeenteUtrecht/feature/vite

Migrate to Vite & Vitest
GemeenteUtrecht · May 23, 2024 · a8ad8af · a8ad8af
2 parents cd646a0 + 4cac889
commit a8ad8af
Show file tree

Hide file tree

Showing 53 changed files with 5,636 additions and 28,753 deletions.
diff --git a/.env.development b/.env.development
@@ -1 +1,3 @@
-REACT_APP_API_ROOT=/
+NODE_ENV=development
+VITE_DEBUG=true
+VITE_API_ROOT=/
diff --git a/.env.prod b/.env.prod
diff --git a/.env.production b/.env.production
@@ -0,0 +1 @@
+VITE_API_ROOT=https://api.nationaalwegenbestand.nl/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ## [Unreleased](https://github.com/GemeenteUtrecht/bereikbaarheid-frontend/compare/v0.7.1...HEAD)
 
+### Fixed
+- migrate from Create React App to Vite
+- migrate from Jest to Vitest
+
 
 ## [v0.7.1 - 2024-05-06](https://github.com/GemeenteUtrecht/bereikbaarheid-frontend/compare/v0.7.0...v0.7.1)
 

diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:18 as builder
+FROM node:18.18 as builder
 
 ENV BROWSER=none
 
@@ -17,11 +17,9 @@ RUN npm ci
 
 COPY . /app
 
-ARG BUILD_ENV=prod
-COPY .env.${BUILD_ENV} /app/.env
-
 # Build the app
-RUN npm run build
+ARG BUILD_ENV=production
+RUN npm run build -- --mode ${BUILD_ENV}
 
 # Deploy
 FROM nginxinc/nginx-unprivileged:mainline-alpine-slim

diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ Deze folder is als volgt ingedeeld:
 
 ### To have a look around
 - Make sure the API is running locally, for more info see the [bereikbaarheid-backend repo](https://github.com/GemeenteUtrecht/bereikbaarheid-backend).
-- Run the docker container: `docker-compose up --build`.
+- Run the docker container: `docker compose up --build`.
 
 ### Om aanpassingen aan de frontend te maken
 1. Installeer [Node.js](https://nodejs.org/en/)
@@ -33,16 +33,16 @@ Deze folder is als volgt ingedeeld:
 
 Een hot-reloaded versie van de frontend is beschikbaar via [http://localhost:3000](http://localhost:3000). De pagina wordt ververst als je bronbestanden (in de `src` folder) wijzigt. Zowel in je IDE als in de console zijn linting en formatting errors te zien.
 
-De frontend is gescaffold met [Create React App](https://github.com/facebook/create-react-app).
-
 ### Hoe is het CORS issue opgelost in de verschillende scenario's?
-- Tijdens ontwikkeling van de frontend zorgt CRA voor de proxy, zie `package.json`. 
+- Tijdens ontwikkeling van de frontend zorgt Vite voor de proxy, zie `vite.config.ts`. 
 - Om CORS issues in de docker-compose setup te vermijden, wordt een aparte NGINX setup (`nginx.dockercompose.conf`) gebruikt. Via een build argument wordt bepaald welke nginx configuratie wordt geladen.
 
 ## Available Scripts
 In this directory, you can run:
 
-- `npm start`: runs the app in the development mode. For more info, see 'Getting started'.
-- `npm test`: launches the test runner in the interactive watch mode.
+- `npm start`: runs the app in the development mode.
+- `npm run lint`: lints the application code.
+- `npm run test`: launches the test runner.
+- `npm run test:watch`: launches the test runner in the interactive watch mode.
 - `npm run build`: builds the app for production to the `build` folder.
-- `npm run eject`: this app is currently **not** ejected.
+- `npm run preview`: preview the built app.
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,18 +2,19 @@
 <html lang="nl">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
+    <link rel="icon" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#cc0000" />
     <meta
       name="description"
       content="Informatie over het Nationaal wegenbestand"
     />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <title>Nationaal wegenbestand</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		VITE_API_ROOT=https://api.nationaalwegenbestand.nl/