feat: Migrate to Vite 5

assemblee-virtuelle · Mar 31, 2024 · 030736f · 030736f
1 parent bb4f597
commit 030736f
Show file tree

Hide file tree

Showing 13 changed files with 796 additions and 8,852 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,5 @@ lerna-debug.log
 .DS_Store
 /data
 /.idea
+.vscode
+*.sparql
diff --git a/deploy/frontend/Dockerfile b/deploy/frontend/Dockerfile
@@ -29,4 +29,4 @@ RUN yarn run build
 
 EXPOSE 4000
 
-CMD serve -s build -l 4000
+CMD serve -s dist -l 4000
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

diff --git a/frontend/public/index.html → frontend/index.html b/frontend/public/index.html → frontend/index.html
@@ -1,26 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+    <title>Archipelago</title>
+
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="SemApps admin interface"
+      content="Archipelago"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin="" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet-defaulticon-compatibility@0.1.1/dist/leaflet-defaulticon-compatibility.css" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
     <link rel="stylesheet" href="https://unpkg.com/react-mde@11.5.0/lib/styles/css/react-mde-all.css" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/main.min.css" />
-    <title>Archipelago</title>
+
+    <meta name="apple-mobile-web-app-title" content="Archipelago">
+    <meta name="application-name" content="Archipelago">
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,7 +15,9 @@
     "@semapps/list-components": "0.6.0",
     "@semapps/markdown-components": "0.6.0",
     "@semapps/semantic-data-provider": "0.6.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "date-fns": "~2.8.1",
+    "dotenv": "^16.4.5",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
     "leaflet.markercluster": "^1.5.3",
@@ -24,7 +26,8 @@
     "react": "^18.1.0",
     "react-admin": "^4.16.12",
     "react-dom": "^18.1.0",
-    "react-scripts": "5.0.1"
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^4.2.4",
@@ -34,10 +37,9 @@
     "yalc": "1.0.0-pre.53"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "link-semapps-packages": "yalc link @semapps/activitypub-components @semapps/auth-provider @semapps/date-components @semapps/field-components @semapps/geo-components @semapps/input-components @semapps/list-components @semapps/markdown-components @semapps/semantic-data-provider",
     "unlink-semapps-packages": "yalc remove --all && rm -rf node_modules/@semapps && yarn install --force"

diff --git a/frontend/src/HomePage.jsx b/frontend/src/HomePage.jsx
@@ -1,16 +1,17 @@
 import React from 'react';
 import { useShowController, ShowContextProvider } from 'react-admin';
 import PageShow from './resources/Page/PageShow';
+import config from './config/config';
 
 const HomePage = () => {
-  const config = {
-    id: process.env.REACT_APP_MIDDLEWARE_URL + 'pages/accueil',
+  const showConfig = {
+    id: config.middlewareUrl + 'pages/accueil',
     resource: 'Page'
   };
 
   return (
-    <ShowContextProvider value={useShowController(config)}>
-      <PageShow {...config} />
+    <ShowContextProvider value={useShowController(showConfig)}>
+      <PageShow {...showConfig} />
     </ShowContextProvider>
   );
 };

diff --git a/frontend/src/common/input/LocationInput.jsx b/frontend/src/common/input/LocationInput.jsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { extractContext, LocationInput as SemAppsLocationInput } from '@semapps/geo-components';
+import config from '../../config/config';
 
 const LocationInput = props => (
   <SemAppsLocationInput
     mapboxConfig={{
-      access_token: process.env.REACT_APP_MAPBOX_ACCESS_TOKEN,
+      access_token: config.mapboxAccessToken,
       types: ['place', 'address'],
       country: ['fr', 'be', 'ch']
     }}

diff --git a/frontend/src/config/config.js b/frontend/src/config/config.js
@@ -1,4 +1,10 @@
 const config = {
+  // Middleware API url (ex: https://<host>:<port>/). Should contain a trailing slash.
+  middlewareUrl: process.env.MIDDLEWARE_URL,
+
+  // Mapbox Access Token used for addresses completion
+  mapboxAccessToken: process.env.MAPBOX_ACCESS_TOKEN,
+
   // Displays import tab when creating resource if it is listed here
   importableResources: [
     "Event",

diff --git a/frontend/src/config/dataProvider.js b/frontend/src/config/dataProvider.js
@@ -3,14 +3,15 @@ import ontologies from './ontologies.json';
 import dataServers from './dataServers';
 import resources from '../resources';
 import { withLifecycleCallbacks } from 'react-admin';
+import config from './config';
 
 const baseDataProvider = semanticDataProvider({
   dataServers,
   resources: Object.fromEntries(Object.entries(resources).map(([k, v]) => [k, v.dataModel])),
   ontologies,
   jsonContext: [
     'https://www.w3.org/ns/activitystreams',
-    process.env.REACT_APP_MIDDLEWARE_URL + '.well-known/context.jsonld'
+    config.middlewareUrl + '.well-known/context.jsonld'
   ]
 });
 

diff --git a/frontend/src/config/dataServers.js b/frontend/src/config/dataServers.js
@@ -1,6 +1,8 @@
+import config from "./config";
+
 const dataServers = {
   default: {
-    baseUrl: process.env.REACT_APP_MIDDLEWARE_URL,
+    baseUrl: config.middlewareUrl,
     authServer: true,
     default: true,
     uploadsContainer: '/files'
@@ -30,4 +32,4 @@ const dataServers = {
   // }
 };
 
-export default dataServers;
+export default dataServers;
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+}
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+  ],
+  define: {
+    'process.env.MIDDLEWARE_URL': `"${process.env.REACT_APP_MIDDLEWARE_URL}"`,
+    'process.env.MAPBOX_ACCESS_TOKEN': `"${process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}"`,
+  },
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,3 +4,5 @@ lerna-debug.log @@
     .DS_Store
     /data
     /.idea
+    .vscode
+    *.sparql
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,4 +29,4 @@ RUN yarn run build

		EXPOSE 4000

		CMD serve -s build -l 4000
		CMD serve -s dist -l 4000