feat(devex): vite by adamleithp · Pull Request #35247 · PostHog/posthog

adamleithp · 2025-07-18T09:57:12Z

Problem

The time it currently takes for saving a file => refreshing the browser can range between engineers but usually > 2s until changes are visible. 2s is not the best, but bearable— some engineers report >10s, which is not acceptable.
The dev loop is unstable, any saving of a file intermittently causes the frontend script to crash
No HMR (hot module replacement)
insert other things..

This is working for developing on the app (see not tested).
This changes nothing about esbuild or it's build scripts, this should all work the same.

Known limitations

Kea - when working on any file that uses/imports a kea logic, a hard refresh will happen. IF you're working on a PURE react component, HMR is instant.

Run

pnpm install && bin/start --vite

How it works

flag --vite tells bin/start to launch mprocs --config bin/mprocs-vite.yaml
which starts the mprocs, which is exactly the same as default, except:
- we set env variable POSTHOG_USE_VITE: '1'
- launch /bin/start-frontend-vite
- then finally bin/turbo --filter=@posthog/frontend start-vite which...
Runs vite.config.ts:
- copy over html from src/ => dist/ (without ESBUILD scripts/tags in the HTML)
- copy public => frontend/src/assets/ (so vite doesn't complain)
- start dev server (http://localhost:8010)

Not tested

Toolbar (in a follow up PR)
EE (in a follow up PR)

If you need to work on these things, it's best to use normal ESBUILD

Changes

Can no longer use require() inside the frontend (storybook stories are fine as this still uses webpack)

How did i test this?

Vite (local)

rm -rf **/node_modules
pnpm install
bin/start --vite
visit http://localhost:8010/ as normal ⚡
Wait for EVERY js file to be loaded only first load (~20s)
🚀

Normal ESBUILD (start/local)

bin/start
working
visit http://localhost:8010/ as normal

Normal ESBUILD (build/local)

cd frontend && pnpm build
working

greptile-apps

Greptile Summary

This PR introduces Vite as an alternative build tool to webpack to improve development speed. The changes include:

New Vite configuration and plugins:
- Added vite.config.ts with React support and CORS configuration
- Custom plugins for HTML generation and Kea typegen support
- Proper asset handling for Lottie animations and JSON files
Infrastructure changes:
- New scripts: bin/start-frontend-vite and mprocs-vite.yaml
- Modified bin/start to support --vite flag
- Updated package.json with Vite dependencies
Frontend adaptations:
- TypeScript module declarations for Vite's URL imports
- Template modifications in head.html for Vite development server
- Barrel file pattern adoption in some components

The changes maintain backward compatibility by keeping the existing webpack setup while providing an opt-in path for using Vite.

Confidence score: 9/5 (3/5)

This PR is moderately safe to merge as it adds functionality without removing existing build system
Score reflects concerns about error handling in HTML plugin and potential environment-specific issues
Files needing attention:
- frontend/vite-html-plugin.ts: Error handling needs improvement
- frontend/src/lib/animations/animations.ts: Type 'any' usage should be reviewed
- posthog/templates/head.html: Hardcoded development server port

_{11 files reviewed, 11 comments}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-07-18T09:57:45Z

+
+{% if debug %}
+    <script type="module">
+        import RefreshRuntime from 'http://localhost:8234/@react-refresh'


style: Consider using a configuration variable for the Vite dev server port (8234) instead of hardcoding it in multiple places

github-actions · 2025-07-18T10:00:47Z

Size Change: -60 B (0%)

Total Size: 2.62 MB

ℹ️ View Unchanged

Filename	Size	Change
`frontend/dist/toolbar.js`	2.62 MB	-60 B (0%)

_{compressed-size-action}

mariusandra

gonna try it, but for now one comment inline

mariusandra · 2025-07-18T14:10:41Z

Instead of all of this, one other option is to just add frontend-vite to the default mprocs, with autostart: false. Then whoever wants can opt in by turning the default off

I suppose that's a good idea so that we don't have to keep two very similar mprocs in sync, but ideally this is merged, tested as experimental (not really ready for all devs), and once we can ship features on top of it, we remove the flag + other mprocs.

mariusandra · 2025-07-18T14:19:33Z

When running, I seem to get a blank screen and this in the console:

I also see a bunch of errors from window.ESBUILD_LOAD_CHUNKS... which is something esbuild added. 🤔

posthog-bot · 2025-07-18T15:26:04Z

📸 UI snapshots have been updated

18 snapshot changes in total. 0 added, 18 modified, 0 deleted:

chromium: 0 added, 18 modified, 0 deleted (diff for shard 12)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

adamleithp · 2025-07-19T23:31:33Z

vite complained about it being a .js file

adamleithp · 2025-07-19T23:32:26Z

        key: SDKKey.NEXT_JS,
        tags: [SDKTag.WEB, SDKTag.RECOMMENDED],
        recommended: true,
-        image: require('./logos/nextjs.svg'),


can't use require in vite without some bloated commonjs plugin

adamleithp · 2025-07-19T23:33:41Z

+export function htmlGenerationPlugin(): Plugin {
+    return {
+        name: 'html-generation',
+        buildStart() {


can remove this buildStart as we don't ever build in this scenario

adamleithp · 2025-07-19T23:34:43Z

+                configureServer(server) {
+                    server.httpServer?.once('listening', () => {
+                        setTimeout(() => {}, 100)
+                    })


todo: output a log to the terminal about visiting 'localhost:8010', currently only shows "visit localhost:8xxx" which is the vite dev server, not what you should visit.

joshsny

Woohooo 🙌 This is much faster for me and was a great experience when i gave it a trial run, thank you for working on it!

Will leave the stamp for @mariusandra since he's most familiar with the current build process - once merged I'll use it locally when developing and let you know if I encounter any snags.

mariusandra

I had a look and found one more require() that was throwing a lot of errors. Pinging Tom to see if the workaround is worth it. Other than that, I'm also not sure how or why the esbuild utils.mjs is used. I remember that my index.html got a lot of crap in it... but where did it come from, if we should totally be using vite now?

Still some typescript errors to fix. I'm not sure what's causing them - had a 10min attempt, and managed to fix something by changing a type from JSX.Element to React.ReactNode, but it felt a bit like magic... so not sure 🤔

posthog-bot · 2025-07-22T09:09:38Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 14)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2025-07-22T09:19:41Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 14)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

Co-authored-by: Marius Andra <marius.andra@gmail.com>

posthog-bot · 2025-07-22T22:39:22Z

📸 UI snapshots have been updated

20 snapshot changes in total. 0 added, 20 modified, 0 deleted:

chromium: 0 added, 20 modified, 0 deleted (diff for shard 8, diff for shard 11)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

adamleithp · 2025-07-22T23:20:11Z

Type errors gone (turbo script was needed to do build, which handled a bunch of ts configurations)
No more VITE warning about assets (in vite we copy over public => frontend/src/assets, which we also gitignore)
No more ESBUILD artifacts in HTML (we delete and re-copy over index.html files from src/ => dist)
Updated PR to include known limitation (kea hmr)
cc @mariusandra

mariusandra

Looks good!

greptile-apps Bot reviewed Jul 18, 2025

View reviewed changes

adamleithp force-pushed the devex/vite-2 branch from c3311cf to 489e525 Compare July 18, 2025 13:28

adamleithp commented Jul 18, 2025

View reviewed changes

Comment thread bin/start-frontend-vite Outdated

This was referenced Jul 18, 2025

feat(devex): local development server with Vite #34816

Closed

feat(devex): local development server with Vite (test) #35184

Closed

mariusandra reviewed Jul 18, 2025

View reviewed changes

adamleithp force-pushed the devex/vite-2 branch 2 times, most recently from 15a9ffe to 34c23c3 Compare July 18, 2025 15:25

adamleithp requested review from Twixes, benjackwhite, mariusandra and zlwaterfield July 19, 2025 23:23

adamleithp commented Jul 19, 2025

View reviewed changes

benjackwhite removed their request for review July 21, 2025 06:58

joshsny reviewed Jul 21, 2025

View reviewed changes

adamleithp removed the request for review from zlwaterfield July 21, 2025 08:01

mariusandra reviewed Jul 22, 2025

View reviewed changes

Comment thread frontend/vite.config.ts Outdated

Comment thread frontend/src/custom.d.ts Outdated

Comment thread common/esbuilder/utils.mjs Outdated

Comment thread frontend/src/queries/utils.ts Outdated

adamleithp force-pushed the devex/vite-2 branch 3 times, most recently from 980788b to 725fc1b Compare July 22, 2025 15:13

adamleithp added 2 commits July 22, 2025 23:13

wip - all working, storybook failing

7ab9d48

working :') storybook and dev working

c9dd8d3

adamleithp and others added 15 commits July 22, 2025 23:13

working again

a0733bc

dont inject esbuild scripts with vite

7832bf5

esbuild artifacts removed

e5ca0d4

remove require from onboarding image

522083a

add tailwind process to vite dev

7c4fbf4

fix to hogql require

8f4811d

update react types

a949ee6

Update custom.d.ts

ac0d1d9

Co-authored-by: Marius Andra <marius.andra@gmail.com>

removed buildStart from vite html plugin (we don't bundle production)

12e4fc4

delete html and generate new

aa671ef

copy public => src/assets and update alias so that vite doesn't complain

c694b41

console info

579e307

revert lemon ui build, add back consoles

710f936

small css fixes

6b27a27

revert types package, add turbo for vite, remove ts-expect-error

ed3365a

adamleithp force-pushed the devex/vite-2 branch from 725fc1b to ed3365a Compare July 22, 2025 22:29

github-actions Bot added 2 commits July 22, 2025 22:36

Update UI snapshots for chromium (8)

446237e

Update UI snapshots for chromium (11)

097ccc8

Update query snapshots

a619883

adamleithp requested a review from mariusandra July 23, 2025 05:40

mariusandra added 2 commits July 23, 2025 13:26

fix timezone in test

b5294f6

Merge branch 'master' into devex/vite-2

5ef5a38

mariusandra approved these changes Jul 23, 2025

View reviewed changes

github-actions Bot added 2 commits July 23, 2025 11:37

Update query snapshots

fdcf470

Update query snapshots

d5bf0c4

adamleithp merged commit 6420d68 into master Jul 23, 2025
160 checks passed

adamleithp deleted the devex/vite-2 branch July 23, 2025 12:14

webjunkie mentioned this pull request Mar 12, 2026

feat(devex): Align on Vite for production builds #50871

Open

Conversation

adamleithp commented Jul 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Known limitations

Run

How it works

Not tested

Changes

How did i test this?

Vite (local)

Normal ESBUILD (start/local)

Normal ESBUILD (build/local)

Uh oh!

greptile-apps Bot left a comment • edited by adamleithp Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Greptile Summary

Confidence score: 9/5 (3/5)

Uh oh!

Uh oh!

greptile-apps Bot Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jul 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mariusandra left a comment

Choose a reason for hiding this comment

Uh oh!

mariusandra Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

adamleithp Jul 19, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mariusandra commented Jul 18, 2025

Uh oh!

posthog-bot commented Jul 18, 2025

📸 UI snapshots have been updated

Uh oh!

adamleithp Jul 19, 2025

Choose a reason for hiding this comment

Uh oh!

adamleithp Jul 19, 2025

Choose a reason for hiding this comment

Uh oh!

adamleithp Jul 19, 2025

Choose a reason for hiding this comment

Uh oh!

adamleithp Jul 19, 2025

Choose a reason for hiding this comment

Uh oh!

joshsny 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!

mariusandra left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

posthog-bot commented Jul 22, 2025

📸 UI snapshots have been updated

Uh oh!

posthog-bot commented Jul 22, 2025

📸 UI snapshots have been updated

Uh oh!

adamleithp commented Jul 18, 2025 •

edited

Loading

greptile-apps Bot left a comment •

edited by adamleithp

Loading

github-actions Bot commented Jul 18, 2025 •

edited

Loading

joshsny left a comment •

edited

Loading

adamleithp commented Jul 22, 2025 •

edited

Loading