feat: replace CRA with Vite [LIBS-598] #847

KaiVandivier · 2024-04-27T07:50:40Z

Part 1 of the changes -- LIBS-598

Includes:

Starting and building an app with Vite
Compiling and handling service workers (using an existing webpack script we have)
react-scripts is removed
A number of small fixes along the way to make those work
1. Adjusted moment locales import to ES module form and handled that in the Jest config
2. Change the file watching/compilation process for apps to allow .[jt]sx extensions in app files
3. Updated the shell and adapter files to have .jsx extensions
4. Added a fix to @dhis2/cli-helpers-engine to let Vite's dev server use the console, which enables helpful interactive output

Following changes will look like:

Building and serving plugins (including PWA for them)
Build libraries with Vite
Making sure unit tests are working
Making the Vite config extensible for consumers (I think this will be a big help for the Tracker team, who could add config support Flow types)
Small miscellany: clean up and refactoring env var management, for example

If I remember right, these are the relevant breaking changes so far:

Required Node versions will be ^18 || >=20
Hot-reloading of React components in files without a .[jt]sx extension is not really supported, unfortunately. This is the largest change. I added some workarounds in vite.config.mjs to allow compiling of JSX syntax in files without .[jt]sx extensions, so apps can at least start once they install this new version, but consumers will need to change their file extensions to get the full HMR behavior. This design by Vite is intended to save computations by not needing to run a JSX parser on files without JSX, so it's limited to .[jt]sx files. There are more notes inside the config file. I'm investigating easy ways like a codemod to run through a repo and update filenames of files containing JSX
Removing react-scripts revealed a bug in @dhis2/cli-style -- it was missing a dependency that react-scripts filled. Consumers will need to upgrade @dhis2/cli-style to ^10.5.2
The start script does not open the browser by default. This is the default Vite behavior, but I'm curious about input on this -- I like it, because opening the browser annoys me personally (since it doesn't work well on Firefox and Brave, the browsers I use), but maybe other people depend on it

Here are some other general notes:

I tested typescript by converting some of the example app files to .tsx and it worked smoothly (albeit with many type errors)
I took a rough benchmark to test the speed by building the simple example app, after bootstrapping the app shell and warming up the cache: 16s before, and 7.5s after. Pretty cool!
Library building and unit tests are still working as they did before. I think we can build libraries with Vite in the future, but we might want to keep Jest tests as they are for backwards compatibility. Maybe we can introduce Vitest support alongside it, so can people can migrate, then we can eventually deprecate Jest support
The Vite config currently lives in the shell, as if it were a standalone app. This works for starting and building the app, but in the future, it will probably need to get integrated into the CLI to handle dynamic things like plugin entrypoints, or Vite config extensions that platform consumers could define for their apps. This will also simplify the handling of environment variables that are passed to the app
The Vite config has a .mjs extension to avoid a warning about the cjs package of Vite being deprecated
The output dir in the build folder is now called ‘assets’ as the Rollup default instead of ‘static’, which should hopefully be a harmless implementation detail

BREAKING CHANGE: Supported Node versions are 18.x or 20+

KaiVandivier · 2024-04-29T09:51:18Z

cli/src/commands/build.js

+                    reporter.info('Compiling service worker...')
+                    await compileServiceWorker({ config, paths, mode })


Previously, CRA compiled the service worker in production builds. We already have our own compile function that we use for dev builds, so we use that here now

KaiVandivier · 2024-04-29T10:06:41Z

cli/src/lib/compiler/compile.js

-        const relative = normalizeExtension(path.relative(inputDir, source))
+        const relative = path.relative(inputDir, source)


This was what broke JSX files in platform apps/libs: as an example, consider index.jsx has import App from 'App.jsx'. At compile time, App.jsx gets converted to App.js, but the import text in index is still from App.jsx (it doesn't get modified despite the filename change), and then an error is thrown that says "Can't find App.jsx"

KaiVandivier · 2024-04-29T10:09:15Z

cli/src/lib/compiler/entrypoints.js

@@ -82,12 +81,11 @@ exports.verifyEntrypoints = ({

 const getEntrypointWrapper = async ({ entrypoint, paths }) => {
    const relativeEntrypoint = entrypoint.replace(/^(\.\/)?src\//, '')
-    const outRelativeEntrypoint = normalizeExtension(relativeEntrypoint)


This was also mishandling .jsx entrypoints

KaiVandivier · 2024-04-29T10:09:39Z

cli/src/lib/compiler/entrypoints.js

-        .replace(/'.\/D2App\/app'/g, `'./D2App/${outRelativeEntrypoint}'`)
+        .replace(/'.\/D2App\/app\.jsx'/g, `'./D2App/${relativeEntrypoint}'`)


The placeholder filename in the shell is now called app.jsx

KaiVandivier · 2024-04-29T10:21:45Z

cli/src/lib/pwa/injectPrecacheManifest.js

-        // Skip index.html, (plugin.html,) and `static` directory;
-        // CRA's workbox-webpack-plugin handles it smartly
        globIgnores: [
-            'static/**/*',
-            paths.launchPath,
-            paths.pluginLaunchPath,
+            // skip moment locales -- they result in many network requests and
+            // slow down service worker installation
+            '**/moment-locales/*',
+            '**/*.map',


A few changes in this file now that it's taking over from CRA

KaiVandivier · 2024-04-29T10:22:35Z

cli/src/lib/pwa/injectPrecacheManifest.js

-        // (see https://regex101.com/r/z4Hy9k/1/ for RegEx details)
-        dontCacheBustURLsMatching: /\.[a-z0-9]{8}\.|\d+\.\d+\.\d+/,
+        // (see https://regex101.com/r/z4Hy9k/3/ for RegEx details)
+        dontCacheBustURLsMatching: /[.-][A-Za-z0-9-_]{8}\.|\d+\.\d+\.\d+/,


Updated for the chunks emitted from Vite's Rollup

KaiVandivier · 2024-04-29T10:26:40Z

pwa/src/service-worker/set-up-service-worker.js

-        // Precache all of the assets generated by your build process.
-        // Their URLs are injected into the manifest variable below.
-        // This variable must be present somewhere in your service worker file,
-        // even if you decide not to use precaching. See https://cra.link/PWA.
-        // Includes all built assets and index.html
+        // Injection point for the precache manifest from workbox-build,
+        // a manifest of app assets to fetch and cache upon SW installation


A few things are cleaned up in this file now that our own compilation script is handling service workers instead of CRA's

KaiVandivier · 2024-04-29T10:27:24Z

pwa/src/service-worker/utils.js

-// Note that the CRA precache manifest files start with './'
-// TODO: Make this extensible with a d2.config.js option
-export const CRA_MANIFEST_EXCLUDE_PATTERNS = [
-    /^\.\/static\/js\/moment-locales\//,
-]


This was used to modify the manifest output by CRA; it's no longer needed

KaiVandivier · 2024-04-29T10:28:48Z

shell/index.html

+        <!-- The entrypoint for Vite -->
+        <script type="module" src="./src/index.jsx"></script>


Vite wants index.html to be here at the root directory level. This script tag is the entrypoint for the rest of the app

KaiVandivier · 2024-05-08T13:42:52Z

package.json

@@ -17,7 +17,7 @@
        ]
    },
    "devDependencies": {
-        "@dhis2/cli-style": "^10.4.3",
+        "@dhis2/cli-style": "^10.5.2",


See dhis2/cli-style#465

KaiVandivier · 2024-05-08T13:43:35Z

cli/package.json

@@ -29,7 +29,7 @@
        "@babel/preset-react": "^7.0.0",
        "@babel/preset-typescript": "^7.6.0",
        "@dhis2/app-shell": "11.2.0",
-        "@dhis2/cli-helpers-engine": "^3.2.0",
+        "@dhis2/cli-helpers-engine": "^3.2.2",


See dhis2/cli-helpers-engine#225

KaiVandivier added 19 commits April 16, 2024 23:05

feat: serve app with Vite

93799a6

fix: leave compilation to Vite to enable HMR and .jsx files

554ac0b

chore: remove log

d6b6b44

fix: convert app shell files to .jsx

94c23eb

feat: build apps with Vite

2ee8abf

chore: clean up config

8d1286b

fix: still compile for libs for now

ba7b412

fix: dynamic import & bundle splitting of moment locales

3501da2

chore: bump required Node versions

e30508d

BREAKING CHANGE: Supported Node versions are 18.x or 20+

ci: upgrade Node version

c35653a

fix: always add PWA_ENABLED to app env for better static analysis

ceace1b

chore: pause precache manifest injection

b196bd9

fix: building SW without CRA

178164f

chore: comment update

e4dd729

fix: group moment locales in their own dir

067ad3f

refactor: clean up precache injection

1233956

fix: locale utils and handling moment in jest

710503e

Merge branch 'alpha' into libs-598-replace-cra-with-vite

8d05509

fix: compile correctly after merging changes

429f61f

KaiVandivier commented Apr 29, 2024

View reviewed changes

chore: comment in compile.js

a256fdf

KaiVandivier commented Apr 29, 2024

View reviewed changes

chore: some clean-up

60e9b64

KaiVandivier added 7 commits April 30, 2024 10:19

chore: comments

c20b9db

fix: use port 3000 for the dev server

ae77246

fix: improve moment locale chunk naming

78f8832

chore: remove CRA

73a44f9

fix: use mjs build of Vite

5380a6e

fix: bump cli-style for CRA fix

6f2b0bd

feat: use interactive dev server output from Vite

a0ccf72

KaiVandivier commented May 8, 2024

View reviewed changes

KaiVandivier added 2 commits May 8, 2024 15:53

fix: make dev server port configurable

6e34184

Merge branch 'master' into libs-598-replace-cra-with-vite

293933b

KaiVandivier requested a review from a team May 8, 2024 14:36

chore: remove old index.html

dd4a524

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: replace CRA with Vite [LIBS-598] #847

feat: replace CRA with Vite [LIBS-598] #847

KaiVandivier commented Apr 27, 2024 •

edited by jira bot

KaiVandivier Apr 29, 2024

KaiVandivier Apr 29, 2024

KaiVandivier Apr 29, 2024

KaiVandivier Apr 29, 2024

KaiVandivier Apr 29, 2024

KaiVandivier Apr 29, 2024

KaiVandivier Apr 29, 2024

KaiVandivier Apr 29, 2024

KaiVandivier Apr 29, 2024

KaiVandivier May 8, 2024

KaiVandivier May 8, 2024

		reporter.info('Compiling service worker...')
		await compileServiceWorker({ config, paths, mode })

		const relative = normalizeExtension(path.relative(inputDir, source))
		const relative = path.relative(inputDir, source)

		.replace(/'.\/D2App\/app'/g, `'./D2App/${outRelativeEntrypoint}'`)
		.replace(/'.\/D2App\/app\.jsx'/g, `'./D2App/${relativeEntrypoint}'`)

		<!-- The entrypoint for Vite -->
		<script type="module" src="./src/index.jsx"></script>

feat: replace CRA with Vite [LIBS-598] #847

Are you sure you want to change the base?

feat: replace CRA with Vite [LIBS-598] #847

Conversation

KaiVandivier commented Apr 27, 2024 • edited by jira bot

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

KaiVandivier commented Apr 27, 2024 •

edited by jira bot