[WIP] frontend: Replace CRA with Vite

[tazo90]

What I did

This PR is related to the issue #1282.

Changes apply only to the /frontend directory and replace CRA with Vite 5 for development and production builds. Thanks to Vite cold start is much faster and gives better DX.

Because of failing tests, this PR is still in progress.

Benchmarks: CRA: cold start: 1m 30s build: 1m 50s

Vite: cold start: 2.5s build: 48s

Overview:

• [x] Remove CRA (react-scripts)
• [x] Integrate Vite 5 for development sever and production build
• [x] Upgrade Storybook to v8 with Vite
• [x] Optimize the production bundle by using smaller chunks
• [x] Visualize dependencies (analysis.html produced after build via rollup-plugin-visualizer)
• [ ] Fix tests - fails 11 of 19

Detailed migration steps:

• [x] Remove react-scripts
• [x] Remove %PUBLIC_URL%
• [x] Rename REACT_APP_ environment variables to VITE_
• [x] Install Vite and add vite.config.ts
• [x] Install Jest and add jest.config.ts
• [x] Update scripts section in package.json
• [x] Replace process.env with import.meta.env and move envs to global constants
• [x] Upgrade Storybook to v8 and setup Vite
• [x] Get rid of imports via require

Known issues:

• @storybook/addon-storyshots is deprecated. See migration guide.
• Legacy dev server warnings
• Failing tests - Vite and Jest do not work well together, it would be good to migrate to vitest.

Proposition of further steps:

• Replace Jest with Vitest
• Remove webpack (check relationships and potential impact)

[joaquimrocha]

Hi @tazo90 . Thanks for the PR. As indicated in #1282 , we still need to assess what should be the right project to replace CRA as there are also some implications in terms of how to do special builds (with branding, etc.). So we may take a while to review this PR.

[tazo90]

Hi @joaquimrocha.

You're welcome! I completely understand the need for a thorough assessment of the potential replacements for CRA. It might be a good idea to wait for the final decision before improving Jest-based tests or introducing vitest. I'm available for any further questions or discussions.