Spike/vite dev

[chrismclarke]

PR Checklist

• [x] - Commit messages are descriptive, it will be used in our Release Notes

PR Type

• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)
• [x] Developer experience (improves developer workflows for contributing to the project)

Description

When building or running the app locally the bundler behind the scenes is webpack 4 (shipped with create-react-app 4) - which is quite slow and becoming increasingly outdated. In the past we've proposed updating to webpack 5 (mentioned in #1646), however the migration isn't very smooth and not a huge improvement anyway.

Instead support for alternatives such as rollup and vite has grown a huge amount in the past few years, to the point where now React is attempting to formally support vite (https://reactjs.org/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html) - vite also has lots of reciprocal support for react (https://vitejs.dev/guide/#trying-vite-online)

This PR attempts to incrementally adopt vite instead of webpack, namely:

• Install vite deps
• Setup vite config to run existing code
• Add plugins to support cra/webpack features (e.g. REACT_APP env vars, aliased imports, SVG import etc)
• Make a copy of the current index.html (and replace %public refs) to support use in vite
• Minor refactoring to address issues

This will enable a developer to run the app locally using the vite bundler instead of wepback.

Most of the steps taken were found in the guide below, with a few other specific issues searched on stack overflow and commented in the config file https://blog.logrocket.com/vite-3-vs-create-react-app-comparison-migration-guide/

Next Steps

It's possible for the vite compiler to live alongside webpack for as long as we feel useful to do so, although probably better to have one system in place than 2 in case of unexpected future incompatibilities.

Likely next steps would be:

• Migrate build scripts to use vite instead of webpack
• Test to ensure build works as expected (incl. service workers, bundle names, build size, env vars etc.)
• Remove legacy react-scripts/webpack code and deps (no longer CRA)
• Consider migrating additional workspaces (i.e. functions, storybook components, cypress)
• Consider integrating testing with vitest

Testing Notes

• yarn install
• yarn vite

This will start the dev server using vite instead of webpack. You should notice initial start a bit faster than usual and subsequent starts much faster. You may also notice code updates appearing faster

Known Issues

• warning about importing CSS in react-flag-icon-css. Assume fine for now (could look to update/replace package in future)

Git Issues

Closes #

Screenshots/Videos

Running both vite and webpack start scripts at same time on my local machine

npx concurrently "yarn start:platform" "yarn vite"

Vite: 8s Webpack: 27s

Untitled_ Dec 12, 2022 9_13 PM.webm

---

What happens next?

Thanks for the contribution! We try to make sure all PRs are reviewed ahead of a monthly dev call (first Monday of the month, open to all!).

If the PR is working as intended it'll be merged and included in the next platform release, if not changes will be requested and re-reviewed once updated.

If you need more immediate feedback you can try reaching out on Discord in the Community Platform development channel.

[cypress[bot]]

---

Test summary

52 • 0 • 0 • 0 • 0

---

Run details

Project	onearmy-community-platform
Status	Passed
Commit	1510c4537e
Started	Dec 13, 2022 5:29 AM
Ended	Dec 13, 2022 5:32 AM
Duration	02:53 💡
OS	Linux Ubuntu - 20.04
Browser	Chrome 108

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard