1778 migrate from webpack to vite

[aqandrew]

closes #1778
closes #1824

• Up to date with main branch
• Branch name follows guidelines
• All PR Status checks are successful
• Peer reviewed and approved

Any questions? See the getting started guide

[traycn]

Review ETA: Fri 9/13 at 2PM PT

[traycn]

This is running great! Appreciate your time in migrating from Webpack to Vite. There's a noticable difference in how quickly the app loads on changes.

Leaving a note on using Babel in the future.

@vitejs/plugin-react provides Babel plugins/presets.
Docs for @vitejs/plugin-react

---

Changes to running the application locally as of today.

Updates for developers:
(refer to #1824 to remove this step)

• Update .env file
  • Pre-pend variable with VITE_, e.g.: VITE_MAPBOX_TOKEN=..

Update README.md

• Change Visit http://localhost:3000/ to Visit http://localhost:5173/

[traycn]

Commenting an approval for this branch.

Once we've decided on a solution for #1824 and @ryanfchase reviews, it's good to merge.

[bphan002]

General Notes for PR Documentation

• Artifacts removed (Webpack)
• Accessing environment data from process to import.meta in (Reports.jsx, useContentful.jsx, data.js, store.js)
• Changing build and serve commands in package.json
• Vitejs/plugin-react lets you specify configuration for react + babel and will replace current babel plugins
• React helmet adds additional meta data in JS/Vite (ex: twitter, icons, description, title) to improve SEO.
• .env file variables need to change with Vite prefix (unsure why this is required)
• Port changed from 3000 to 5173 to show Vite usage vs React
• Line 139 of Mapsearch.jsx (Is this a bug fix or a Vite change?)
• In DbProvider.jsx we are tracking certain Duckdb variables (curious of benefits on how it is better convention)
• Answer from previous bullet. Duckdb variables are now being referenced from the package rather than the public directory
• Migrated all js files to jsx components)

[aqandrew]

Thanks for the docs @bphan002! I understand that not commit messages alone aren't the best way to document changes lol.

.env file variables need to change with Vite prefix (unsure why this is required)

• Vite specifies that only environment variables prefixed with VITE_ will be exposed to client-side code. (see Vite docs)

Line 139 of Mapsearch.jsx (Is this a bug fix or a Vite change?)

• This is a bug fix. Our webpack build doesn't log an error in DevTools when removeListeners is called, but Vite does. The function must be accessed from this, because it's a method of the MapSearch class.

In DbProvider.jsx we are tracking certain Duckdb variables (curious of benefits on how it is better convention)

• Correct, accessing these DuckDB artifacts directly from the installed Node package @duckdb/duckdb-wasm eliminates the need for an external script. It also ensures we're using the most up-to-date versions of these artifacts. Previously we had to manually execute the bundle.mjs script from the command line, to copy the artifacts into the public/ directory so that they could be made available to webpack. This could lead to us referencing out-of-date files if the @duckdb/duckdb-wasm package is updated without us re-running bundle.mjs.

[aqandrew]

Made some updates today to address #1824. Everyone who develops 311-Data will receive an alert from their browser when running locally if they haven't renamed their environment variables to be compatible with Vite (or if their .env file doesn't exist). This alert also includes instructions to automatically fix this by running the checkEnv.js script.

Display an alert in local dev server if VITE_MAPBOX_TOKEN is missing from .env

This only occurs in dev mode (not in prod).

Updated .example.env to use VITE_ prefixes for vars that client-side code needs to access

Also made this change for the Contentful space id and Contentful token, since they're referenced in the useContentful hook:

311-data/hooks/useContentful.js

Line 4 in 26599df

const url = `https://graphql.contentful.com/content/v1/spaces/${import.meta.env.VITE_CONTENTFUL_SPACE}`;

311-data/hooks/useContentful.js

Line 15 in 26599df

Authorization: `Bearer ${import.meta.env.VITE_CONTENTFUL_TOKEN}`,

Modifed checkEnv.js to rename env vars for Vite if necessary

Screenshot below shows the terminal output of npm run check-env, with the following initial conditions in my .env file:

• MAPBOX_TOKEN, CONTENTFUL_SPACE using their old names (not prefixed with VITE_)
• deleted HUGGINGFACE_LOGIN_TOKEN, to validate that there weren't any regressions on the current behavior of checkEnv.js

[ryanfchase]

Tested this last week, this is looking good! Approved! 🎉

[ryanfchase]

see comment here: #1778 (comment)

[ryanfchase]

Approving after showing that specifying the base URL fixes the missing assets problem:

• changing base to match my repo's name: migrate build tooling from webpack to Vite #1778 (comment)
• migrate build tooling from webpack to Vite #1778 (comment)