Day 1: Deployment
May 28, 2026
What I worked on
- Set up project with vite: react and typescript
- Locally hosted website
- Set up github repository
- Deployed on vercel
What I learned
vite?
I learned about Vite for a few hours, and found out that it makes local development a lot faster. Before Vite, the standard was to bundle all your JavaScript into one file, which takes a long time. If you made a small change, it would take a long time to re-bundle. Instead, Vite keeps your source code separated and relies on the browser to import other source code and code from dependencies.
For deployment, Vite bundles all your code together into a few large files by default.
Vite can keep your code files separated during local development because browsers can follow import statements natively (since around 2017). Without that, the browser wouldn’t know how to assemble the unbundled files. Fast localhost just makes the cost acceptable.
It’s pronounced ‘veet’, and is French for ‘fast’ because it speeds up local development.
esbuild & esm
The ‘es’ in ‘esbuild’ stands for ECMAScript, which is the official name for JavaScript. esbuild condenses the internals of each dependency into one file per dependency. When browser asks for a file, esbuild converts TypeScript to JavaScript.
What’s still confusing
What happens during ‘building’?
I know that you need to compile TypeScript into JavaScript, and that you need to move the code into one bundle when deploying, but what else happens? Why is it so slow?
How does hot-reload work with Vite?
How does Vite reload your website in like 50ms?
How does the browser actually load your website?
How does it resolve import statements, etc?