How to use electric with vite.js?

[barbalex]

I used the electric starter to start building a new app.

One thing I am dearly missing is hmr (hot module reload). This is greatly slowing dev speed as child routes need to be reopened from the root after reload. That is PAINFULL.

My last few projects I have developed using vite.js. Which was a great experience. Why? Because I am no tooling expert and vite seemed to be very easy to tweak - which wasn't often needed to begin with.

Does anyone know how to plug vite on top of the pre-installed esbuild after starting a project with the electric starter?
Or how to begin a new project using the vite react starter, then add electric?

I suppose installing electric after using the vite react starter would be the way to go. Will try that myself. But am happy for any good ideas.

[barbalex]

I got it to work, doing this:

1. create a new project using npm create vite@latest. Choosing react and typescript
2. copy all the folders and files needed for electric-sql over (and the ones of my party built project)
3. rename all the files where electric uses commonjs from .js to .cjs
4. set DEBUG_MODE and ELECTRIC_URL in config.ts manually, as process.env is not available (I'm sure this will bite me later)
5. in package.json add electric's scripts and all the needed dependencies
6. debug whatever else crept up

Though the app starts without errors there are a few weird things happening:

1. The console is now very chatty:

2. Reloading below a top routing level provokes lots of errors:

So I'm not sure I'm happy with the result.

Maybe even something related to wasm was the reason, that routes below top routes (loading data from sqlite) could not be refreshed when the project used the electric starter?

[balegas]

Sorry for the super-late response.
We're moving to Vite.js in the next release (which is imminent)