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'],

.example.env

@@ -1,6 +1,6 @@
-MAPBOX_TOKEN=REDACTED
+VITE_MAPBOX_TOKEN=REDACTED
 MAPBOX_STREETS_URL=https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}
 MAPBOX_SATELLITE_URL=https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}
-CONTENTFUL_SPACE=REDACTED
-CONTENTFUL_TOKEN=REDACTED
+VITE_CONTENTFUL_SPACE=REDACTED
+VITE_CONTENTFUL_TOKEN=REDACTED
 HUGGINGFACE_LOGIN_TOKEN=REDACTED

.github/workflows/Continuous_Deployment_Frontend_Dev.yml

@@ -28,7 +28,7 @@ jobs:
       run: npm install
     - name: Setup environment
       run: |
-        echo MAPBOX_TOKEN=${{ secrets.MAPBOX_TOKEN }} > .env
+        echo VITE_MAPBOX_TOKEN=${{ secrets.VITE_MAPBOX_TOKEN }} > .env
         echo MAPBOX_STREETS_URL=${{ secrets.MAPBOX_STREETS_URL }} >> .env
         echo MAPBOX_SATELLITE_URL=${{ secrets.MAPBOX_SATELLITE_URL }} >> .env
         echo API_URL=${{ secrets.API_URL_DEV }} >> .env
@@ -37,8 +37,8 @@ jobs:
         echo MIXPANEL_ENABLED=${{ secrets.MIXPANEL_ENABLED }} >> .env
         echo MIXPANEL_TOKEN_PROD=${{ secrets.MIXPANEL_TOKEN_PROD }} >> .env
         echo MIXPANEL_TOKEN_DEV=${{ secrets.MIXPANEL_TOKEN_DEV }} >> .env
-        echo CONTENTFUL_SPACE=${{ secrets.CONTENTFUL_SPACE }} >> .env
-        echo CONTENTFUL_TOKEN=${{ secrets.CONTENTFUL_TOKEN }} >> .env
+        echo VITE_CONTENTFUL_SPACE=${{ secrets.VITE_CONTENTFUL_SPACE }} >> .env
+        echo VITE_CONTENTFUL_TOKEN=${{ secrets.VITE_CONTENTFUL_TOKEN }} >> .env
         echo GITHUB_SHA=${{ github.sha }} >> .env
     - name: Build project
       run: npm run build

.github/workflows/Continuous_Deployment_Frontend_Prod.yml

@@ -27,7 +27,7 @@ jobs:
       run: npm install
     - name: Setup environment
       run: |
-        echo MAPBOX_TOKEN=${{ secrets.MAPBOX_TOKEN }} > .env
+        echo VITE_MAPBOX_TOKEN=${{ secrets.VITE_MAPBOX_TOKEN }} > .env
         echo MAPBOX_STREETS_URL=${{ secrets.MAPBOX_STREETS_URL }} >> .env
         echo MAPBOX_SATELLITE_URL=${{ secrets.MAPBOX_SATELLITE_URL }} >> .env
         echo API_URL=${{ secrets.API_URL_PROD }} >> .env

.github/workflows/Continuous_Integration_Frontend.yml

@@ -25,7 +25,7 @@ jobs:
       run: npm run lint
     - name: Setup environment
       run: |
-        echo MAPBOX_TOKEN=${{ secrets.MAPBOX_TOKEN }} > .env
+        echo VITE_MAPBOX_TOKEN=${{ secrets.VITE_MAPBOX_TOKEN }} > .env
         echo MAPBOX_STREETS_URL=${{ secrets.MAPBOX_STREETS_URL }} >> .env
         echo MAPBOX_SATELLITE_URL=${{ secrets.MAPBOX_SATELLITE_URL }} >> .env
         echo API_URL=${{ secrets.API_URL_PROD }} >> .env

.github/workflows/main.yml

@@ -34,11 +34,11 @@ 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
-          echo "CONTENTFUL_TOKEN=${{ secrets.CONTENTFUL_TOKEN }}" >> .env
+          echo "VITE_CONTENTFUL_SPACE=${{ secrets.VITE_CONTENTFUL_SPACE }}" >> .env
+          echo "VITE_CONTENTFUL_TOKEN=${{ secrets.VITE_CONTENTFUL_TOKEN }}" >> .env
 
       # JamesIves
       - name: Build website

.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 />

README.md

@@ -45,17 +45,25 @@ Our mission is to create a user-friendly platform for anyone interested in explo
 
 ## Quick Start
 
+### Install Node.js
+
 - Ensure that node version manager (nvm) is installed (e.g. follow a [tutorial](https://heynode.com/tutorial/install-nodejs-locally-nvm/))
 - Run `nvm install lts/hydrogen` (on windows `nvm install hydrogen`)
 - Run `nvm use lts/hydrogen` (on windows `nvm use hydrogen`)
-- confirm you are using **Node 18** by running `node -v` (e.g. `Now using node v18.7.0 (npm v8.9.2)`)
-- clone the repo
+- Confirm you are using **Node 18** by running `node -v` (e.g. `Now using node v18.7.0 (npm v8.9.2)`)
+
+### Set up environment/variables
+
+- Clone the repo
 - Run `cd 311-data/`
 - Run `cp .example.env .env`
-- Edit your new `.env` and supply a valid `MAPBOX_TOKEN`. If you are a member of hack4la, please contact someone in 311-engineering for one.
-- Run `npm install`
-- From the 311-data parent directory run: `npm run setup && npm start`
-- Visit http://localhost:3000
+- Edit your new `.env` and supply a valid `VITE_MAPBOX_TOKEN`. If you are a member of hack4la, please contact someone in 311-engineering for one.
+- Run `npm run setup`
+
+### Start the development server
+
+- Run `npm start`
+- Visit http://localhost:5173
 
 ### Information About Technologies
 

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.VITE_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.VITE_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

@@ -10,6 +10,10 @@ import theme from '@theme/theme';
 import store from '@root/redux/store';
 import App from '@root/App';
 
+if (import.meta.env.DEV && !import.meta.env.VITE_MAPBOX_TOKEN) {
+  alert('Missing Mapbox token. Please run `npm run setup`.')
+}
+
 // Expose theme to debugging console like on mui.com.
 // https://mui.com/material-ui/customization/typography/#default-values
 window.theme = theme;
@@ -27,6 +31,3 @@ ReactDOM.render(
   </Provider>,
   document.getElementById('root'),
 );
-
-// hot module replacement during development
-if (module.hot) module.hot.accept();