[DT-295] Migrate from Create React App to Vite #2779

fboulnois · 2025-02-12T15:47:19Z

Addresses

https://broadworkbench.atlassian.net/browse/DT-295

Summary

Migrates from Create React App to Vite. Requires #2780 to go in first.

Have you read Terra's Contributing Guide lately? If not, do that first.

Label PR with a Jira ticket number and include a link to the ticket
Label PR with a security risk modifier [no, low, medium, high]
PR describes scope of changes
Get a minimum of one thumbs worth of review, preferably two if enough team members are available
Get PO sign-off for all non-trivial UI or workflow changes
Verify all tests go green
Test this change deployed correctly and works on dev environment after deployment

fboulnois · 2025-02-12T15:50:40Z

vite.config.js

+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),


The include is required to also support mdx files

fboulnois · 2025-02-12T15:50:56Z

vite.config.js

+  ],
+  assetsInclude: ['**/*.md'],
+  build: {
+    outDir: 'build',


Required to generate builds in the same location

fboulnois · 2025-02-12T15:51:18Z

vite.config.js

+  assetsInclude: ['**/*.md'],
+  build: {
+    outDir: 'build',
+    target: 'es2022'


Required to avoid an error with top-level awaits

fboulnois · 2025-02-12T15:52:49Z

vite.config.js

+    target: 'es2022'
+  },
+  server: {
+    port: 3000,


Required to keep compatibility with CRA

Can I suggest that we add a host and https block to server?

host: 'local.dsde-dev.broadinstitute.org', https: { key: fs.readFileSync(`./server.key`), cert: fs.readFileSync(`./server.crt`), },

This also needs a new import

import fs from 'fs';

This starts up similarly to how we're running the app now:

VITE v6.1.0 ready in 106 ms ➜ Network: https://local.dsde-dev.broadinstitute.org:3000/ ➜ press h + enter to show help

It seems like key and cert can directly take file paths, so the fs import is not required.

src/libs/tosService.jsx

src/components/UsgOmbText.jsx

src/components/SpinnerComponent.jsx

fboulnois · 2025-02-12T15:54:02Z

src/index.tsx

 import {BrowserRouter} from 'react-router-dom';

 const load = async () => {
-  unregister();


This functionality is deprecated.

fboulnois · 2025-02-12T15:54:45Z

package.json

@@ -91,5 +92,6 @@
  ],
  "engines": {
    "node": ">=22.11.0"
-  }
+  },
+  "type": "module"


Non-module builds of Vite are deprecated.

src/registerServiceWorker.js

fboulnois · 2025-02-12T15:56:18Z

package.json

@@ -41,10 +41,9 @@
  },
  "scripts": {
    "analyze": "npm run build; source-map-explorer build/static/js/main.*",
-    "start": "react-scripts start",
-    "genschemas": "./scripts/compile-jsonschema.sh",


The genschemas script no longer exists.

fboulnois · 2025-02-12T15:56:55Z

index.html

+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <script type="module" src="./src/index.tsx"></script>


The only functional change to this file is adding this line.

fboulnois · 2025-02-12T16:13:31Z

Dockerfile

@@ -15,7 +15,9 @@ COPY types /usr/src/app/types
 COPY public /usr/src/app/public
 COPY package.json /usr/src/app/package.json
 COPY package-lock.json /usr/src/app/package-lock.json
+COPY index.html /usr/src/app/index.html


This file moved location, and therefore needs to be included in the build.

fboulnois · 2025-02-12T16:13:44Z

Dockerfile

 COPY tsconfig.json /usr/src/app/tsconfig.json
+COPY vite.config.js /usr/src/app/vite.config.js


This is a new file that needs to be included in the build.

fboulnois · 2025-02-12T16:19:01Z

package.json

+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",


These are the new vite commands.

fboulnois · 2025-02-12T16:19:56Z

package.json

@@ -81,6 +81,7 @@
    "source-map-explorer": "2.5.3",
    "typescript": "4.9.5",
    "typescript-eslint": "7.17.0",
+    "vite": "6.1.0",


These are the latest versions of the react plugin and vite.

fboulnois · 2025-02-12T21:01:23Z

cypress.config.js

@@ -13,8 +13,8 @@ module.exports = defineConfig({
  component: {
    specPattern: ['**/*.spec.js', '**/*.spec.jsx', '**/*.spec.ts', '**/*.spec.tsx'],
    devServer: {
-      framework: 'create-react-app',
-      bundler: 'webpack',
+      framework: 'react',


This is the new Vite config for Cypress.

fboulnois · 2025-02-12T21:02:06Z

public/images/favicon/browserconfig.xml

@@ -2,7 +2,7 @@
 <browserconfig>
    <msapplication>
        <tile>
-            <square150x150logo src="%PUBLIC_URL%/images/favicon/mstile-150x150.png"/>
+            <square150x150logo src="/images/favicon/mstile-150x150.png"/>


%PUBLIC_URL% is a CRA-specific path.

fboulnois · 2025-02-12T21:03:47Z

src/registerServiceWorker.js

This functionality is deprecated.

fboulnois · 2025-02-12T21:04:43Z

src/components/SpinnerComponent.jsx

These are actually JSX files.

rushtong

Amazing work 👍🏽

otchet-broad

Nice job!

fboulnois requested a review from a team as a code owner February 12, 2025 15:47

fboulnois requested review from rushtong and s-rubenstein and removed request for a team February 12, 2025 15:47

fboulnois force-pushed the fb-dt-295-migrate-to-vite branch from d07534e to ff01968 Compare February 12, 2025 15:49

fboulnois commented Feb 12, 2025

View reviewed changes

src/libs/tosService.jsx Outdated Show resolved Hide resolved

fboulnois commented Feb 12, 2025

View reviewed changes

src/components/UsgOmbText.jsx Outdated Show resolved Hide resolved

fboulnois commented Feb 12, 2025

View reviewed changes

src/components/SpinnerComponent.jsx Outdated Show resolved Hide resolved

fboulnois commented Feb 12, 2025

View reviewed changes

src/registerServiceWorker.js Outdated Show resolved Hide resolved

fboulnois commented Feb 12, 2025

View reviewed changes

fboulnois force-pushed the fb-dt-295-migrate-to-vite branch 2 times, most recently from 1f405d4 to 040664f Compare February 12, 2025 16:12

fboulnois commented Feb 12, 2025

View reviewed changes

fboulnois force-pushed the fb-dt-295-migrate-to-vite branch from 040664f to 32a7b69 Compare February 12, 2025 16:18

fboulnois commented Feb 12, 2025

View reviewed changes

fboulnois marked this pull request as draft February 12, 2025 19:39

fboulnois added 5 commits February 12, 2025 16:00

feat: add vite packages

27519ed

feat: switch from cra to vite

ce52665

refactor: registerServiceWorker is deprecated

5bc36e2

fix: add index.html to the build

0e2729e

fix: add vite.config.js to the build

a9c3e69

fboulnois added 2 commits February 12, 2025 16:00

fix: update cypress config for vite

682bc6a

fix: @mui/material needs to come before @mui/material/item

3e888d3

fboulnois force-pushed the fb-dt-295-migrate-to-vite branch from 9a1414c to 3e888d3 Compare February 12, 2025 21:00

fboulnois commented Feb 12, 2025

View reviewed changes

src/registerServiceWorker.js Outdated

Copy link

Contributor Author

fboulnois Feb 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This functionality is deprecated.

fboulnois commented Feb 12, 2025

View reviewed changes

src/components/SpinnerComponent.jsx Outdated

Copy link

Contributor Author

fboulnois Feb 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are actually JSX files.

fboulnois marked this pull request as ready for review February 12, 2025 21:06

s-rubenstein approved these changes Feb 12, 2025

View reviewed changes

rushtong approved these changes Feb 12, 2025

View reviewed changes

otchet-broad self-requested a review February 12, 2025 23:10

otchet-broad approved these changes Feb 12, 2025

View reviewed changes

fboulnois added 2 commits February 13, 2025 09:47

feat: add host and https to server

02935a6

fix: disable https in CI

af1e6f7

fboulnois merged commit 8b20932 into develop Feb 13, 2025
9 checks passed

fboulnois deleted the fb-dt-295-migrate-to-vite branch February 13, 2025 16:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DT-295] Migrate from Create React App to Vite #2779

[DT-295] Migrate from Create React App to Vite #2779

fboulnois commented Feb 12, 2025 •

edited

Loading

fboulnois Feb 12, 2025 •

edited

Loading

fboulnois Feb 12, 2025 •

edited

Loading

fboulnois Feb 12, 2025 •

edited

Loading

fboulnois Feb 12, 2025

rushtong Feb 12, 2025

fboulnois Feb 13, 2025

fboulnois Feb 12, 2025

fboulnois Feb 12, 2025

fboulnois Feb 12, 2025

fboulnois Feb 12, 2025

fboulnois Feb 12, 2025

fboulnois Feb 12, 2025

fboulnois Feb 12, 2025

fboulnois Feb 12, 2025

fboulnois Feb 12, 2025

fboulnois Feb 12, 2025

fboulnois Feb 12, 2025

fboulnois Feb 12, 2025

rushtong left a comment

otchet-broad left a comment

		COPY tsconfig.json /usr/src/app/tsconfig.json
		COPY vite.config.js /usr/src/app/vite.config.js

[DT-295] Migrate from Create React App to Vite #2779

[DT-295] Migrate from Create React App to Vite #2779

Conversation

fboulnois commented Feb 12, 2025 • edited Loading

Addresses

Summary

fboulnois Feb 12, 2025 • edited Loading

Choose a reason for hiding this comment

fboulnois Feb 12, 2025 • edited Loading

Choose a reason for hiding this comment

fboulnois Feb 12, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rushtong left a comment

Choose a reason for hiding this comment

otchet-broad left a comment

Choose a reason for hiding this comment

fboulnois commented Feb 12, 2025 •

edited

Loading

fboulnois Feb 12, 2025 •

edited

Loading

fboulnois Feb 12, 2025 •

edited

Loading

fboulnois Feb 12, 2025 •

edited

Loading