Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor, move from react-scripts to vite #333

Open
wants to merge 14 commits into
base: dev
Choose a base branch
from
Open

Conversation

mihirsamdarshi
Copy link
Collaborator

@mihirsamdarshi mihirsamdarshi commented May 3, 2024

This PR introduces a number of changes.

React no longer maintains create-react-app, and a number of the packages that the frontend were using have long been deprecated

Here are all the changes introduced by this PR:

react-scripts -> vite refactor

  • Replaced react-scripts with vite
    • react-scripts has long been deprecated in favor of full-stack frameworks like Gatsby, NextJS, or Remix
    • Vite is the clear replacement, being among the top downloaded non-framework bundlers
    • Vite brought build time of this project down from 120s to 5s on my machine
    • HMR is even faster
    • These changes position us well for future Server-sider rendering (SSR) efforts, especially when combined with the React Router changes below. Transitioning from react-router v6 to Remix with Vite is extremely easy, and immediately provides us SSR capabilities
  • Replaced react-scripts package.json scripts with vite commands
  • Environment variable changes:
  • Added vite.config.js, using react-swc React compiler plugin.
  • Added bundle visualizer in order to see how much space various packages take

react-router v5 to v6 upgrade

Replace jest with vitest

  • The removal of react-scripts necessitates the introduction of a test framework
  • vitest is a drop-in replacement for jest that works for the vite framework

Misc changes

  • Updated storybook to latest
  • Updated ESlint to v8

Regressions

  • Minor CSS styling issues caused by using react-router's new transparent <Outlet> component for rendering routes. For example, the main MoTrPAC logo is slightly larger than normal, and sometimes clips the header
  • CircleCI will continue to fail until the REACT_APP_-styled env vars are replaced by VITE_ style env vars

@mihirsamdarshi mihirsamdarshi force-pushed the refactor/vite branch 2 times, most recently from fe590f3 to 359a341 Compare May 3, 2024 21:53
@mihirsamdarshi mihirsamdarshi force-pushed the refactor/vite branch 3 times, most recently from e7ad0d7 to f45d520 Compare May 4, 2024 00:45
@mihirsamdarshi mihirsamdarshi marked this pull request as ready for review May 4, 2024 00:59
@mihirsamdarshi mihirsamdarshi changed the title refactor/vite Refactor, move from react-scripts to vit4e May 4, 2024
@mihirsamdarshi mihirsamdarshi changed the title Refactor, move from react-scripts to vit4e Refactor, move from react-scripts to vite May 4, 2024
@mihirsamdarshi mihirsamdarshi force-pushed the refactor/vite branch 2 times, most recently from 906ede8 to f1c9f89 Compare May 9, 2024 08:12
- vis-network-react is distributed as CommonJS instead of ESM
@mihirsamdarshi mihirsamdarshi force-pushed the refactor/vite branch 3 times, most recently from 4ea4101 to 8afa38f Compare May 10, 2024 06:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant