1778 migrate from webpack to vite

.eslintignore

@@ -2,7 +2,6 @@
 *.test.js*
 **/v1/*
 **/dist/*
-webpack.*.js
 **/node_modules/
 **/public/*
 **/Temp/*

.eslintrc.js

@@ -21,7 +21,6 @@ module.exports = {
     'import/extensions': ['.js', '.jsx'],
     'import/resolver': {
       node: {},
-      webpack: 'webpack.config.js',
     },
   },
   plugins: ['react', 'react-hooks'],

.github/workflows/main.yml

@@ -34,7 +34,7 @@ jobs:
 
       - name: Setup environment
         run: |
-          echo "MAPBOX_TOKEN=${{ secrets.MAPBOX_TOKEN }}" > .env
+          echo "VITE_MAPBOX_TOKEN=${{ secrets.VITE_MAPBOX_TOKEN }}" > .env
           echo "SOCRATA_API_URL=${{ secrets.SOCRATA_API_URL }}" >> .env
           echo "SOCRATA_TOKEN=${{ secrets.SOCRATA_TOKEN }}" >> .env
           echo "CONTENTFUL_SPACE=${{ secrets.CONTENTFUL_SPACE }}" >> .env

.gitignore

@@ -23,7 +23,6 @@ __snapshots__
 tags/
 Temp/
 *-new.*
-webpack-stats.json
 *.old
 *\ copy.*
 stats.json

App.jsx

@@ -1,20 +1,45 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'proptypes';
 import { HashRouter } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { getMetadataRequest } from '@reducers/metadata';
 
 import Header from '@components/Header';
 import Footer from '@components/Footer';
 import AppRoutes from './Routes';
 
+const TITLE = '311-Data Neighborhood Engagement Tool';
+const DESCRIPTION =
+  'Hack for LA’s 311-Data Team has partnered with the Los Angeles Department of Neighborhood Empowerment and LA Neighborhood Councils to create 311 data dashboards to provide all City of LA neighborhoods with actionable information at the local level.';
+const URL = 'https://www.311-data.org/';
+const SOCIAL_IMAGE = '/social-media-card-image.png';
+
 function App({ getMetadata }) {
   useEffect(() => {
     getMetadata();
   });
 
   return (
     <HashRouter>
+      <Helmet>
+        <title>{TITLE}</title>
+        <link rel="icon" href="/favicon.png" />
+        <meta name="description" content={DESCRIPTION} />
+
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:url" content={URL} />
+        <meta name="twitter:title" content={TITLE} />
+        <meta name="twitter:image" content={SOCIAL_IMAGE} />
+        <meta name="twitter:description" content={DESCRIPTION} />
+
+        <meta name="og:type" content="website" />
+        <meta name="og:url" content={URL} />
+        <meta name="og:title" content={TITLE} />
+        <meta name="og:image" content={SOCIAL_IMAGE} />
+        <meta name="og:description" content={DESCRIPTION} />
+      </Helmet>
+
       <Header />
       <AppRoutes />
       <Footer />

components/Map/Map.jsx

@@ -142,7 +142,7 @@ class Map extends React.Component {
 
   componentDidMount() {
     this.isSubscribed = true;
-    mapboxgl.accessToken = process.env.MAPBOX_TOKEN;
+    mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_TOKEN;
 
     const map = new mapboxgl.Map({
       container: this.mapContainer,

components/Map/controls/MapSearch.jsx

@@ -78,7 +78,7 @@ class MapSearch extends React.Component {
     const { map } = this.props;
 
     this.geocoder = new MapboxGeocoder({
-      accessToken: process.env.MAPBOX_TOKEN,
+      accessToken: import.meta.env.VITE_MAPBOX_TOKEN,
       flyTo: false,
       marker: false,
       minLength: 1,
@@ -136,7 +136,7 @@ class MapSearch extends React.Component {
   componentWillUnmount() {
     // Free memory and remove all event listeners
     const geocoderElement = document.getElementById('geocoder')
-    removeListeners(geocoderElement, settings.map.eventName.reset)
+    this.removeListeners(geocoderElement, settings.map.eventName.reset)
   }
 
   setTab = tab => {

components/db/DbProvider.jsx

@@ -2,6 +2,10 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import * as duckdb from '@duckdb/duckdb-wasm';
+import duckdb_wasm from '@duckdb/duckdb-wasm/dist/duckdb-mvp.wasm?url';
+import mvp_worker from '@duckdb/duckdb-wasm/dist/duckdb-browser-mvp.worker.js?url';
+import duckdb_wasm_next from '@duckdb/duckdb-wasm/dist/duckdb-eh.wasm?url';
+import eh_worker from '@duckdb/duckdb-wasm/dist/duckdb-browser-eh.worker.js?url';
 import Worker from 'web-worker';
 import DbContext from '@db/DbContext';
 import moment from 'moment';
@@ -35,14 +39,15 @@ function DbProvider({ children, startDate }) {
       try {
         console.log('Loading db...');
 
+        // https://github.com/duckdb-wasm-examples/duckdbwasm-vitebrowser
         const DUCKDB_CONFIG = await duckdb.selectBundle({
           mvp: {
-            mainModule: './duckdb.wasm',
-            mainWorker: './duckdb-browser.worker.js',
+            mainModule: duckdb_wasm,
+            mainWorker: mvp_worker,
           },
           eh: {
-            mainModule: './duckdb-eh.wasm',
-            mainWorker: './duckdb-browser-eh.worker.js',
+            mainModule: duckdb_wasm_next,
+            mainWorker: eh_worker,
           },
         });
 

components/main/Desktop/ShareableLinkCreator.jsx

@@ -10,7 +10,7 @@ function ShareableLinkCreator({
     <Button
       variant="contained"
       onClick={() => {
-        // const url = new URL(`${process.env.API_URL}/map`);
+        // const url = new URL(`${import.meta.env.API_URL}/map`);
         const url = new URL(`${window.location.href.split('?')[0]}`);
         if (requestStatus.councilId) {
           url.searchParams.append('councilId', requestStatus.councilId);

components/main/Reports.jsx

@@ -22,7 +22,7 @@ function Reports() {
   const [isLoading, setIsLoading] = React.useState(true);
   const classes = useStyles();
 
-  const url = process.env.REPORT_URL;
+  const url = import.meta.env.REPORT_URL;
   const location = useLocation();
   const reportPath = location.pathname.slice(REPORTS_PATH.length - 1);
   const reportRef = React.useRef(reportPath);

hooks/useContentful.js

@@ -1,7 +1,7 @@
 /* eslint no-shadow: ["error", { "allow": ["data", "errors"] }] */
 import React from 'react';
 
-const url = `https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE}`;
+const url = `https://graphql.contentful.com/content/v1/spaces/${import.meta.env.CONTENTFUL_SPACE}`;
 
 const useContentful = query => {
   const [data, setData] = React.useState(null);
@@ -12,7 +12,7 @@ const useContentful = query => {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.CONTENTFUL_TOKEN}`,
+        Authorization: `Bearer ${import.meta.env.CONTENTFUL_TOKEN}`,
       },
       body: JSON.stringify({ query }),
     })

index.html

@@ -53,17 +53,12 @@
     }(window.location))
   </script>
   <!-- End Single Page Apps for GitHub Pages -->
-
-  <!-- Webpack injected tags -->
-  <title>
-    <%= htmlWebpackPlugin.options.title %>
-  </title>
-
 </head>
 
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
+  <script type="module" src="/index.jsx"></script>
 </body>
 
 </html>

index.js → index.jsx

@@ -27,6 +27,3 @@ ReactDOM.render(
   </Provider>,
   document.getElementById('root'),
 );
-
-// hot module replacement during development
-if (module.hot) module.hot.accept();