How can I replace vite with `deno bundle`?
I've got a web app (currently a SPA) that uses vite in a pnpm workspace. The backend is in a deno workspace in a separate repo. I'd love to get 100% on Deno. What's the best path for me to migrate to deno bundle and still get live reload and all that jazz?
3 Replies
There is no live reload, no hmr and no plugins in
deno bundle. It's better if you stay with vite for the time beingWhat about... using
vite from deno? Like if I want to bring it all to a deno workspace?If you just want live reload and are ok without hmr, it's actually pretty easy to do yourself. I recently implemented something for building a server and series of phaser game engine frontend js games. I'm using a hono server to host the frontend files, so I set up some websockets to trigger the reload, I have a build script (currently using esbuild but would be pretty easy to modify to use deno bundle triggered by Deno.Command) that runs with --watch and detects and relevant frontend file changes. If it detects a change, it calls the reload api which sends the reload message as a broadcast over the websocket port. Then in your html file you connect to the websocket, listen for the reload event and reload the page.
You can poke around here to see: https://github.com/halfmonty/phaserdeno
It's basicall the build.ts, reload.ts and a websocket js block in the html. Not too many moving parts.
Though, depending on your needs you could probably get the same effect even easier with something like vs code's "live preview" extension that will host local files on a local test server and reload on file change for you. Then all you gotta do is deno bundle with --watch enabled, should build your ts files and the live preview extension will reload the browser if a js file changes
Or just
deno init --npm vite , then cd to the project you create, deno i and deno run dev. Should work without node/npm/pnpm but it will use package.json and node_modules.
or check out https://vite.dev/guide/#manual-installation
You can avoid the package.json and node_modules with the manual install approach. Seems you can just reference your main or entrypoint ts file as a script import in your index.html and vite will just pick up any changes automatically and I just tested and it builds/bundles just fine this way it seems too