JonFreer · JonFreer · Nov 20, 2023 · Nov 20, 2023
diff --git a/web/public/index.html → web/index.html b/web/public/index.html → web/index.html
@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="West Midlands Cycle Data: Interactive Map and Stats"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo96.png" />
+    <link rel="apple-touch-icon" href="/logo96.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -34,6 +34,9 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id="root"></div>
+
+    <script type="module" src="/src/index.tsx"></script>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -16,13 +16,13 @@
     "react-apexcharts": "^1.4.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.5",
+    "typescript": "^5.2.0",
     "web-vitals": "^3.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -42,5 +42,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.0",
+    "vite": "^5.0.0",
+    "vite-tsconfig-paths": "^4.2.1"
   }
 }
diff --git a/web/src/pages/about.tsx b/web/src/pages/about.tsx
@@ -68,7 +68,7 @@ function About() {
             </div>
             <img
               className={styles.about_box_image}
-              src={process.env.PUBLIC_URL + "/about/api.png"}
+              src={"/about/api.png"}
             ></img>
           </a>
         </div>
@@ -89,7 +89,7 @@ function About() {
             </div>
             <img
               className={styles.about_box_image}
-              src={process.env.PUBLIC_URL + "/about/github.png"}
+              src={"/about/github.png"}
             ></img>
           </a>
         </div>

diff --git a/web/src/react-app-env.d.ts b/web/src/react-app-env.d.ts
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -1,15 +1,16 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["vite/client"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
+    "module": "ESNext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,

diff --git a/web/vite.config.ts b/web/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsconfigPaths from 'vite-tsconfig-paths';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+server: {
+    port: 80,
+    host: "0.0.0.0",
+    },
+  plugins: [
+    react(), 
+    viteTsconfigPaths(),
+  ],
+});