Build with Vite #1396

binh-dam-ibigroup · 2025-05-15T21:13:37Z

Description

This PR sets Vite as the new build system.

We place customization files (CSS, JS, GraphQL) in the /tmp folder so that imports can use relative paths within the repo root. index.html is copied to the repo root for Vite to pick up, and gets some pre-processing (inject the main script and remove HTML comments).

Other things that we used to configure explicitly that are now included out-of-the-box:

lazy imports of YML files using variables (thanks to Vite's "glob import" feature)
hot reloading
minification
preview mode (used for Percy/a11y tests)
faster builds and simpler config than with Webpack
yarn start works out of the box, even with no environment variables passed (it will use the example subfolder).

Things that were dropped:

Old dependencies (some have been upgraded to play well with Vite)
Circular dependencies - There is a circular dependency plugin but I have not been able to make it work at this time, and it doesn't seem to be able to return a count of the circular dependencies found.
require syntax
trimet-mod-otp configs no longer work.

Things that don't change:

Babel and react-scripts are very much still here to run jest without making too many changes. Changes to jest should be handled separate from this PR.
mastarm deploy seems to still be working (all content in dist is flat, no subfolders)
No visual changes
No changes to custom configs (trimet-mod-otp configs no longer work).

PR Checklist:

Does the code follow accessibility standards (WCAG 2.1 AA Compliant)?
Are all languages supported (Internationalization/Localization)?
Are appropriate Typescript types implemented?

daniel-heppner-ibigroup

This is working really well. I am glad we resolved the config hot reloading issue so easily. I'm certainly impressed!

daniel-heppner-ibigroup · 2025-05-23T21:45:26Z

lib/actions/ui.js

@@ -18,6 +17,7 @@ import {
  ItineraryView
 } from '../util/ui'
 import { getModesForActiveAgencyFilter, getUiUrlParams } from '../util/state'
+import { loadLocaleData } from '../util/i18n-loader'


Do you remember what the purpose of moving this into its own file was? Just curious

Yes, it is to isolate the parts that use the Vite-specific glob imports. This file is mocked for tests (tests continue to use Babel).

daniel-heppner-ibigroup · 2025-05-23T21:54:20Z

lib/index.tpl.html

@@ -16,9 +14,5 @@
  </head>
  <body>
    <div id="main"></div>
-    <script>


Thanks for the explanation!

daniel-heppner-ibigroup · 2025-05-29T22:11:02Z

vite.config.js

+// index.html is placed at the root of the repo for Vite to pick up.
+customFile('HTML_FILE', './index.html', './lib/index.tpl.html')
+customFile('CUSTOM_CSS', './tmp/custom-styles.css', './example/example.css')
+customFile('YAML_CONFIG', './tmp/config.yml', './example/example-config.yml')


It's so fast!

miles-grant-ibigroup

Have tested this in almost every configuration I can think of and things look good! I'd prefer if a third reviewer could test with everything they can think of and then I'd say this is ready for merge

alec-georgoff

I'm still working on testing everything, but I noticed that vite complains if we use Node 21 (which is set in .nvmrc). We should update .nvmrc to one of the supported versions:

Any thoughts on which one to use?

binh-dam-ibigroup · 2025-06-16T20:57:22Z

I'm still working on testing everything, but I noticed that vite complains if we use Node 21 (which is set in .nvmrc). We should update .nvmrc to one of the supported versions:

Any thoughts on which one to use?

Good point @alec-georgoff, I'd recommend Node 22. The GitHub CI files in this PR already reference that version.

alec-georgoff

(removed)

miles-grant-ibigroup · 2025-06-24T15:09:00Z

New potential issue: the transitive overlay images aren't being exported correctly when doing a build! But they work in dev mode

binh-dam-ibigroup added 30 commits May 6, 2025 13:17

build: First attempt to build with Vite

7b550ea

build(vite): Replace vite-yaml with esbuild-plugin-yaml

984f10e

build(vite): Correct js loading plugins

050549a

build(vite): Convert config YML to JSON

8fc2494

refactor: Fix config imports in top-level files.

519792b

build(vite): Add plugin to import YAML files

900ffaf

build(vite): Remove unused import

3d2b7f0

style(app): Replace backtick in import

b5b900c

refactor(util/i18n): Import i18n yml files correctly.

219a30c

refactor(util/i18n): Simplify i18n imports from OTP-RR.

b0c2e73

refactor(util/i18n): Use Vite glob import for i18n content.

2995f26

refactor(util/i18n): Import default from i18n yaml

0b68831

refactor(api): Remove isomorphic fetch

be357bb

chore(deps): Upgrade object-hash to 3.0

247497f

refactor(app): Pass config.js fields correctly.

62ef2e7

Merge branch 'dev' into build-with-vite

5e79f2a

ci(node-ci): Upgrade node to v22

58a38e0

build: Restore eslint script

21377e3

build(esline): Remove extra eslint config file

3a68a9e

build: Restore eslint check in precommit

52b91a1

build(eslint): Reuse existing eslint

8380027

Merge branch 'dev' into build-with-vite

29c7c73

build(eslint): Reuse existing eslint version

5fc92fd

refactor(i18n-loader): Extract code for loading i18n content.

e16b860

test(jest): Map i18n-loader to a mock file.

3730137

build: Use Vite and remove craco from yarn start and yarn build

6679e94

test(a11y): Move example files to example folder so they can be built.

3ea5f2b

ci(percy): Use node 22 and update config yml paths.

e2a5497

ci(percy): Download calltaker config to repo root

e9ae770

build(vite): Correctly import graphql files.

de299a9

binh-dam-ibigroup added 3 commits May 29, 2025 16:04

build(vite): Fix copying js from a folder.

08c6215

build(vite): Watch custom files in dev mode only.

69c8cbd

Merge branch 'dev' into build-with-vite

b8f035a

daniel-heppner-ibigroup approved these changes May 29, 2025

View reviewed changes

daniel-heppner-ibigroup assigned binh-dam-ibigroup and unassigned daniel-heppner-ibigroup May 29, 2025

binh-dam-ibigroup assigned miles-grant-ibigroup and unassigned binh-dam-ibigroup May 30, 2025

daniel-heppner-ibigroup and others added 2 commits June 11, 2025 11:07

Merge branch 'dev' into build-with-vite

b9c6d43

Merge branch 'dev' into build-with-vite

8350f8e

miles-grant-ibigroup approved these changes Jun 12, 2025

View reviewed changes

miles-grant-ibigroup assigned binh-dam-ibigroup and unassigned miles-grant-ibigroup Jun 12, 2025

binh-dam-ibigroup requested a review from alec-georgoff June 13, 2025 13:14

binh-dam-ibigroup assigned alec-georgoff and unassigned binh-dam-ibigroup Jun 13, 2025

Merge branch 'dev' into build-with-vite

60151c9

alec-georgoff reviewed Jun 16, 2025

View reviewed changes

binh-dam-ibigroup added 4 commits June 17, 2025 14:59

Merge branch 'dev' into build-with-vite

a58aa35

build(.nvmrc): Use Node v22.

66f7777

build(vite): Don't rename copied graphql files.

76969a0

Merge branch 'dev' into build-with-vite

901901b

alec-georgoff approved these changes Jun 23, 2025

View reviewed changes

alec-georgoff removed their assignment Jun 23, 2025

Merge branch 'dev' into build-with-vite

7f04d57

binh-dam-ibigroup merged commit 49c5ad2 into dev Jun 25, 2025
9 checks passed

binh-dam-ibigroup deleted the build-with-vite branch June 25, 2025 16:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Build with Vite #1396

Build with Vite #1396

Uh oh!

binh-dam-ibigroup commented May 15, 2025 •

edited

Loading

Uh oh!

daniel-heppner-ibigroup left a comment

Uh oh!

daniel-heppner-ibigroup May 23, 2025

Uh oh!

binh-dam-ibigroup May 30, 2025

Uh oh!

daniel-heppner-ibigroup May 23, 2025

Uh oh!

daniel-heppner-ibigroup May 29, 2025

Uh oh!

miles-grant-ibigroup left a comment

Uh oh!

alec-georgoff left a comment

Uh oh!

binh-dam-ibigroup commented Jun 16, 2025

Uh oh!

alec-georgoff left a comment •

edited

Loading

Uh oh!

miles-grant-ibigroup commented Jun 24, 2025

Uh oh!

Uh oh!

Uh oh!

Build with Vite #1396

Build with Vite #1396

Uh oh!

Conversation

binh-dam-ibigroup commented May 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

daniel-heppner-ibigroup left a comment

Choose a reason for hiding this comment

Uh oh!

daniel-heppner-ibigroup May 23, 2025

Choose a reason for hiding this comment

Uh oh!

binh-dam-ibigroup May 30, 2025

Choose a reason for hiding this comment

Uh oh!

daniel-heppner-ibigroup May 23, 2025

Choose a reason for hiding this comment

Uh oh!

daniel-heppner-ibigroup May 29, 2025

Choose a reason for hiding this comment

Uh oh!

miles-grant-ibigroup left a comment

Choose a reason for hiding this comment

Uh oh!

alec-georgoff left a comment

Choose a reason for hiding this comment

Uh oh!

binh-dam-ibigroup commented Jun 16, 2025

Uh oh!

alec-georgoff left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

miles-grant-ibigroup commented Jun 24, 2025

Uh oh!

Uh oh!

Uh oh!

binh-dam-ibigroup commented May 15, 2025 •

edited

Loading

alec-georgoff left a comment •

edited

Loading