Styling & tooling
Vite
The fast build tool under our modern site builds.
Vite is an open-source build tool and development server for modern web projects. It gives developers near-instant local reloads while building, then bundles and optimises everything into a fast, production-ready site. HDC relies on Vite, which powers Astro under the hood, to develop client sites quickly and ship lean, performant production builds.
Where it shines
- Near-instant local dev server, so we see changes the moment we save
- Fast, optimised production builds that minify, split and compress code automatically
- Powers Astro, Vue, React and SvelteKit under the hood, one tool across our stack
- Handles CSS, images and assets out of the box, including Tailwind compilation
- Code-splitting and tree-shaking ship only the code each page needs
- Huge, active ecosystem with plugins for almost anything a build needs
Trade-offs to weigh
- It's developer tooling, invisible to clients and not something they interact with
- Some legacy libraries written for older bundlers need a little configuration to behave
- The dev server and the production build differ slightly, so we always test the real build
What Vite is
Vite is an open-source build tool and development server for modern web projects, created by Evan You (the author of Vue) and first released in 2020. Its name is French for “fast”, and speed is the whole point. It does two jobs: it runs a lightning-quick development server while a site is being built, and it bundles and optimises the finished site for production.
During development, Vite serves your code almost instantly and updates the browser the moment you save a file, instead of rebuilding the whole project each time. For production, it switches to a battle-tested bundler that minifies code, splits it into per-page chunks, removes anything unused and optimises assets, producing a lean, fast set of files ready to deploy. It’s the kind of tool clients never see directly, but it shapes both how quickly a site gets built and how well the finished article performs.
How HDC uses Vite
For us, Vite mostly works through Astro, our default framework, which is built on top of it, so every standard client build already runs on Vite. In practice that means:
- We develop against Vite’s instant dev server, so design and copy changes appear in the browser the moment we save, keeping review rounds fast.
- We let Vite handle Tailwind CSS compilation, TypeScript transpilation and asset processing without bolting on extra tooling.
- We rely on Vite’s production build to minify, code-split and tree-shake the site, so each page ships only the code it actually needs.
- We always test the real production build, not just the dev server, before a site goes live, the two differ slightly, and we verify the version customers will actually receive.
Why we apply it
The benefit of Vite is twofold, and both ends help the client. On our side, fast tooling means faster iteration: when previewing options or refining a page with a client, changes appear immediately rather than after a slow rebuild, so projects move quickly and review rounds aren’t a bottleneck.
On the visitor’s side, Vite’s optimised production build contributes to a fast site. By minifying code, splitting it per page and stripping out anything unused, it keeps the amount a browser has to download small, which feeds into the load speed and Core Web Vitals that affect both rankings and how many visitors stick around to enquire.
How Vite fits our stack
Vite is the engine beneath the surface of our builds. It powers Astro, so it’s already in play on our default framework, and it would equally underpin a Vue, React or other modern framework project. It compiles our Tailwind CSS and TypeScript as part of the build with no extra configuration, and the lean output it produces is what we deploy to Cloudflare to be served fast from the edge. It’s not a layer clients think about, it’s the quiet machinery that makes the rest of the stack quick to build and quick to load.
When Vite isn’t the right tool
We’re honest about fit. Vite is build tooling, not a website in itself, for a simple static page with no build step, there’s nothing for it to do. It’s also tied to modern JavaScript frameworks, so it isn’t relevant to a traditional WordPress PHP site, which has its own toolchain. And occasionally an older library written for a different bundler needs a little extra configuration to work cleanly. For the modern, fast, framework-based sites we build, though, Vite is exactly the right engine, which is why it underpins almost everything we ship.
Worked example
A rebuild that's quick to iterate and lean to ship
Picture a landscaping firm that wants to see options quickly during a website rebuild. Because the project runs on Vite, when we adjust a hero headline, swap a photo or tweak the layout, the change appears in the browser almost the instant we save, so review rounds move fast and the client isn't waiting on slow rebuilds. When the site is ready, Vite handles the production build: it minifies the code, splits it so each page only loads what it needs, optimises the assets and outputs a lean bundle. That fast tooling means a quicker turnaround for the client and a faster site for their customers. (Illustrative, every build is scoped to your goals.)
Better together
How Vite fits with the rest of our stack
Astro
Built on Vite, it's the engine under our default framework
Learn moreTailwind CSS
Compiled and optimised by Vite at build time
Learn moreVue
Vite was created by Vue's author and pairs perfectly with it
Learn moreTypeScript
Vite compiles TypeScript with no extra setup
Learn moreCloudflare
Where the optimised Vite build is deployed and served
Learn moreVite: your questions answered
What is Vite in plain terms?
Vite is the tool that runs behind the scenes while a modern website is being built. During development it gives us an instant preview that updates as we type, and when the site is finished it packages everything into a fast, optimised version ready to go live. Clients never see Vite directly, it's developer machinery.
Why does HDC use Vite?
Largely because it's the engine under Astro, our default framework, so every build already benefits from it. Vite lets us develop quickly with instant previews and ship lean, optimised production builds. Faster iteration means quicker turnarounds for clients, and a well-optimised build helps the finished site load fast.
Do I need to know or manage Vite myself?
No. Vite is purely a tool we use to build and optimise your site. You'll never log into it or maintain it, you just get the benefit of fast development and a fast, lean finished website.
Does Vite make my finished website faster?
It helps. Vite's production build minifies your code, removes unused parts, splits it so each page only downloads what it needs, and optimises assets. That leaner output contributes to faster load times and better Core Web Vitals, though the framework and hosting matter too.
Is Vite the same as a framework like Astro or React?
No. A framework decides how your site is structured and rendered; Vite is the build tool that compiles and optimises it. Astro is actually built on top of Vite, so the two work together, Astro shapes the site, Vite compiles it.
What's the difference between Vite and an older bundler like Webpack?
Both turn source code into a deployable site, but Vite was designed for speed, it starts its dev server almost instantly and updates changes far quicker, where older bundlers can be slow on large projects. For our day-to-day work that quicker feedback loop is a real productivity gain.
Want Vite working for your business?
Tell us what you're trying to achieve, we'll show you, honestly, whether it's the right tool and how we'd apply it.
Enquire now