I have a web app that operates as a SPA (Single Page App). It's built on regular Vite + React + TypeScript. In production you just host the built static assets, but in development (for hot module reloading and stuff) I use the built-in dev server in Vite. This is what you get when you type vite
without any other command line arguments.
But here's what happens, you're in the terminal and you type npm run dev
and hit Enter. Then, using your trackpad or keyboard shortcuts you switch over to a browser tab and go to http://localhost:5173/
. When you get there to the first request, Vite starts at the entry point, which is src/main.tsx
and from there, it looks at its imports and starts transpiling the files needed. You can see what happens with vite --debug transform
.
With debug: