nilsnolde · sammaji · Apr 4, 2023 · Apr 4, 2023 · Apr 4, 2023 · Apr 4, 2023
diff --git a/.env b/.env
@@ -1,9 +1,9 @@
 SKIP_PREFLIGHT_CHECK=true
-REACT_APP_VALHALLA_URL=https://valhalla1.openstreetmap.de
-REACT_APP_NOMINATIM_URL=https://nominatim.openstreetmap.org
-REACT_APP_TILE_SERVER_URL="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-REACT_APP_CENTER_COORDS="52.51831,13.393707"
+VITE_VALHALLA_URL=https://valhalla1.openstreetmap.de
+VITE_NOMINATIM_URL=https://nominatim.openstreetmap.org
+VITE_TILE_SERVER_URL="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+VITE_CENTER_COORDS="52.51831,13.393707"
 
 # uncomment this variable to set boundaries on the leaflet map
 #                       southwest corner, northeast corner
-REACT_APP_MAX_BOUNDS="-90,-1e7,90,1e7"
+VITE_MAX_BOUNDS="-90,-1e7,90,1e7"
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -49,6 +49,7 @@
     "no-useless-return": 2,
     "no-var": 2,
     "one-var": [2, "never"],
+    "parser": "@babel/eslint-parser",
     "prefer-arrow-callback": 2,
     "prefer-const": 2,
     "prefer-promise-reject-errors": 2,

diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <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.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Valhalla FOSSGIS Server Demo App</title>
+  </head>
+  <body>
+    <div id="valhalla-app-root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -35,6 +35,9 @@
     "throttle-debounce": "^5.0.0"
   },
   "scripts": {
+    "vite:start": "vite",
+    "vite:build": "vite build",
+    "vite:preview": "vite preview",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -74,6 +77,7 @@
     "not op_mini all"
   ],
   "devDependencies": {
+    "@vitejs/plugin-react": "^3.1.0",
     "babel-eslint": "^10.0.2",
     "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
@@ -88,6 +92,7 @@
     "husky": "^8.0.2",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
-    "redux-devtools-extension": "^2.13.8"
+    "redux-devtools-extension": "^2.13.8",
+    "vite": "^4.2.1"
   }
 }
diff --git a/src/Controls/Isochrones/index.js → src/Controls/Isochrones/index.jsx b/src/Controls/Isochrones/index.js → src/Controls/Isochrones/index.jsx
diff --git a/src/Map/Map.jsx b/src/Map/Map.jsx
@@ -33,7 +33,7 @@ import {
 import { colorMappings, buildHeightgraphData } from 'utils/heightgraph'
 import formatDuration from 'utils/date_time'
 import './Map.css'
-const OSMTiles = L.tileLayer(process.env.REACT_APP_TILE_SERVER_URL, {
+const OSMTiles = L.tileLayer(import.meta.env.VITE_TILE_SERVER_URL, {
   attribution:
     '<a href="https://map.project-osrm.org/about.html" target="_blank">About this service and privacy policy</a> | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 })
@@ -61,7 +61,7 @@ const highlightRouteSegmentlayer = L.featureGroup()
 const highlightRouteIndexLayer = L.featureGroup()
 const excludePolygonsLayer = L.featureGroup()
 
-const centerCoords = process.env.REACT_APP_CENTER_COORDS.split(',')
+const centerCoords = import.meta.env.VITE_CENTER_COORDS.split(',')
 let center = [parseFloat(centerCoords[0]), parseFloat(centerCoords[1])]
 let zoom_initial = 10
 
@@ -71,7 +71,7 @@ if (localStorage.getItem('last_center')) {
   zoom_initial = last_center.zoom_level
 }
 
-const maxBoundsString = process.env.REACT_APP_MAX_BOUNDS?.split(',')
+const maxBoundsString = import.meta.env.VITE_MAX_BOUNDS?.split(',')
 const maxBounds = maxBoundsString
   ? [
       //south west corner

diff --git a/src/index.css b/src/index.css
@@ -1,9 +1,3 @@
-@import '~semantic-ui-css/semantic.css';
-@import '~leaflet/dist/leaflet.css';
-@import '~tachyons/css/tachyons.css';
-@import '~react-toastify/dist/ReactToastify.css';
-@import '~leaflet-extra-markers/dist/css/leaflet.extra-markers.min.css';
-
 body {
   margin: 0;
   padding: 0;

diff --git a/src/main.jsx b/src/main.jsx
@@ -0,0 +1,32 @@
+import App from './App'
+import React from 'react'
+import { render } from 'react-dom'
+
+import { createStore, applyMiddleware } from 'redux'
+import { composeWithDevTools } from 'redux-devtools-extension'
+import { Provider } from 'react-redux'
+import thunk from 'redux-thunk'
+
+import reducer from './reducers'
+
+import './index.css'
+import 'semantic-ui-css/semantic.css'
+import 'leaflet/dist/leaflet.css'
+import 'tachyons/css/tachyons.css'
+import 'react-toastify/dist/ReactToastify.css'
+import 'leaflet-extra-markers/dist/css/leaflet.extra-markers.min.css'
+
+const middleware = [thunk]
+
+const store = createStore(
+  reducer,
+  composeWithDevTools(applyMiddleware(...middleware))
+)
+
+const container = document.getElementById('valhalla-app-root')
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  container
+)
diff --git a/src/utils/nominatim.js b/src/utils/nominatim.js
@@ -1,7 +1,7 @@
 import axios from 'axios'
 
-export const NOMINATIM_URL = `${process.env.REACT_APP_NOMINATIM_URL}/search`
-export const NOMINATIME_URL_REVERSE = `${process.env.REACT_APP_NOMINATIM_URL}/reverse`
+export const NOMINATIM_URL = `${import.meta.env.VITE_NOMINATIM_URL}/search`
+export const NOMINATIME_URL_REVERSE = `${import.meta.env.VITE_NOMINATIM_URL}/reverse`
 
 export const forward_geocode = (userInput) =>
   axios.get(NOMINATIM_URL, {

diff --git a/src/utils/valhalla.js b/src/utils/valhalla.js
@@ -1,6 +1,6 @@
 import { decode } from './polyline'
 
-export const VALHALLA_OSM_URL = process.env.REACT_APP_VALHALLA_URL
+export const VALHALLA_OSM_URL = import.meta.env.VITE_VALHALLA_URL
 
 export const buildLocateRequest = (latLng, profile) => {
   let valhalla_profile = profile

diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,34 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import svgr from 'vite-plugin-svgr'
+
+const path = require('path')
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: [
+      {
+        find: 'actions',
+        replacement: path.resolve(__dirname, './src/actions'),
+      },
+      {
+        find: 'components',
+        replacement: path.resolve(__dirname, './src/components'),
+      },
+      {
+        find: 'Controls',
+        replacement: path.resolve(__dirname, './src/Controls'),
+      },
+      {
+        find: 'images',
+        replacement: path.resolve(__dirname, './src/images'),
+      },
+      {
+        find: 'utils',
+        replacement: path.resolve(__dirname, './src/utils'),
+      },
+    ],
+  },
+  plugins: [svgr(), react()],
+})