Migrate to Vite

events was needed for mapbox-gl-geocoder
mapbox/mapbox-gl-geocoder#493 (comment)

.eslintrc.js → .eslintrc.cjs

@@ -36,4 +36,12 @@ module.exports = {
     'react/function-component-definition': 'off',
     'eol-last': 'off',
   },
+    settings: {
+  'import/resolver': {
+     alias: {
+       map: [['~', './src/']],
+       extensions: ['.ts', '.js', '.tsx'],
+     },
+   },
+},
 };

.github/workflows/deploy_development.yml

@@ -33,14 +33,14 @@ jobs:
     - name: Run TypeScript typecheck
       run: npm run typecheck
     - name: Set git commit
-      run: echo "REACT_APP_GIT_COMMIT=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
+      run: echo "VITE_GIT_COMMIT=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
     - name: Build app
       env:
-        REACT_APP_ENV: development
-        REACT_APP_OSM_API_URL: ${{ secrets.REACT_APP_OSM_API_URL }}
-        REACT_APP_OSM_OAUTH2_CLIENT_ID: ${{ secrets.REACT_APP_OSM_OAUTH2_CLIENT_ID }}
-        REACT_APP_OSM_OAUTH2_CLIENT_SECRET: ${{ secrets.REACT_APP_OSM_OAUTH2_CLIENT_SECRET }}
-        REACT_APP_BACKEND_API_URL: ${{ secrets.REACT_APP_BACKEND_API_URL_NEW }}
+        VITE_ENV: development
+        VITE_OSM_API_URL: ${{ secrets.VITE_OSM_API_URL }}
+        VITE_OSM_OAUTH2_CLIENT_ID: ${{ secrets.VITE_OSM_OAUTH2_CLIENT_ID }}
+        VITE_OSM_OAUTH2_CLIENT_SECRET: ${{ secrets.VITE_OSM_OAUTH2_CLIENT_SECRET }}
+        VITE_BACKEND_API_URL: ${{ secrets.VITE_BACKEND_API_URL_NEW }}
       run: npm run build
     - name: Create robots.txt
       run: |

.github/workflows/deploy_production.yml

@@ -33,14 +33,14 @@ jobs:
     - name: Run TypeScript typecheck
       run: npm run typecheck
     - name: Set git commit
-      run: echo "REACT_APP_GIT_COMMIT=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
+      run: echo "VITE_GIT_COMMIT=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
     - name: Build app
       env:
-        REACT_APP_ENV: production
-        REACT_APP_OSM_API_URL: ${{ secrets.REACT_APP_OSM_API_URL }}
-        REACT_APP_OSM_OAUTH2_CLIENT_ID: ${{ secrets.REACT_APP_OSM_OAUTH2_CLIENT_ID }}
-        REACT_APP_OSM_OAUTH2_CLIENT_SECRET: ${{ secrets.REACT_APP_OSM_OAUTH2_CLIENT_SECRET }}
-        REACT_APP_BACKEND_API_URL: ${{ secrets. REACT_APP_BACKEND_API_URL_NEW }}
+        VITE_ENV: production
+        VITE_OSM_API_URL: ${{ secrets.VITE_OSM_API_URL }}
+        VITE_OSM_OAUTH2_CLIENT_ID: ${{ secrets.VITE_OSM_OAUTH2_CLIENT_ID }}
+        VITE_OSM_OAUTH2_CLIENT_SECRET: ${{ secrets.VITE_OSM_OAUTH2_CLIENT_SECRET }}
+        VITE_BACKEND_API_URL: ${{ secrets. VITE_BACKEND_API_URL_NEW }}
       run: npm run build
     - name: Create robots.txt
       run: touch build/robots.txt

README.md

@@ -45,11 +45,11 @@ Second way is if you are using VS Code and have Docker installed you can use dev
 Create .env file and put these variables there:
 ```
 SKIP_PREFLIGHT_CHECK=true
-REACT_APP_VERSION=$npm_package_version
-REACT_APP_OSM_API_URL=https://master.apis.dev.openstreetmap.org
-REACT_APP_BACKEND_API_URL=https://backdev.openaedmap.org
-REACT_APP_OSM_OAUTH2_CLIENT_ID=xXaPFXSLizLHuZzoLI1eebHncPdDdVH7nA917S9uFUo
-REACT_APP_OSM_OAUTH2_CLIENT_SECRET=vSfLjZquQ5xlcD9Lq9rhyDuH1ItpakgY5DW59WrRtHY
+VITE_VERSION=$npm_package_version
+VITE_OSM_API_URL=https://master.apis.dev.openstreetmap.org
+VITE_BACKEND_API_URL=https://backdev.openaedmap.org
+VITE_OSM_OAUTH2_CLIENT_ID=xXaPFXSLizLHuZzoLI1eebHncPdDdVH7nA917S9uFUo
+VITE_OSM_OAUTH2_CLIENT_SECRET=vSfLjZquQ5xlcD9Lq9rhyDuH1ItpakgY5DW59WrRtHY
 HOST=127.0.0.1
 ```
 
@@ -67,18 +67,10 @@ Open [http://127.0.0.1:3000](http://127.0.0.1:3000) to view it in your browser.
 The page will reload when you make changes.\
 You may also see any lint errors in the console.
 
-#### `npm test`
-
-Launches the test runner in the interactive watch mode.
-
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
 #### `npm run build`
 
 Builds the app for production to the `build` folder.
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
 #### `npm run sprites`
 
 Creates sprites from marker icons.
@@ -110,5 +102,3 @@ Map and AED locations are from [OpenStreetMap](https://www.openstreetmap.org/cop
 - [spritezero-cli](https://gitlab.com/beyondtracks/spritezero-cli)
 - [i18next](https://github.com/i18next/i18next)
 - [React-Select](https://react-select.com/home)
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

public/index.html → index.html

@@ -10,22 +10,13 @@
     <meta name="theme-color" content="#f5f5f5" />
     <meta name="msapplication-TileColor" content="#da532c">
     <link href="https://openaedmap.org" rel="canonical" />
-    <link rel="icon" href="%PUBLIC_URL%/img/favicon.ico" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/img/logo-aed-192.png" />
+    <link rel="icon" href="/img/favicon.ico" />
+    <link rel="apple-touch-icon" href="/img/logo-aed-192.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" />
-    <!--
-        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`.
-      -->
+    <link rel="manifest" href="/manifest.json" />
   </head>
 
   <body>
@@ -41,6 +32,7 @@
         To begin the development, run `npm start` or `yarn start`.
         To create a production bundle, use `npm run build` or `yarn build`.
       -->
+      <script type="module" src="/src/index.tsx"></script>
       <!-- Cloudflare Web Analytics -->
       <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "fc2ac1d03c1a48d18bf9233fbadfc858"}'></script>
       <!-- End Cloudflare Web Analytics -->