D
DevExCode
Topic #50Core4 min read

Build & Deploy

Vite builds static assets into /dist; preview verifies the production bundle locally.

#vite#build#deploy#static-hosting#tree-shaking

npm run build runs Vite's production build: it bundles, minifies, tree-shakes, and hashes assets, emitting static files into /dist. Because the output is plain static HTML/CSS/JS, it can be served from any static host or CDN (S3 + CloudFront, Nginx, etc.) — there's no Node server required at runtime.

npm run preview boots a local static server over the built /dist so you can sanity-check the production bundle before shipping. This catches issues that only appear in a production build — env-var differences, base-path problems, or assets that work in dev but break once minified and hashed — without deploying to a real environment.

Backend Analogy

npm run build is the frontend equivalent of mvn package producing a deployable artifact (a fat JAR), and /dist is that artifact. npm run preview is like running the packaged JAR locally before pushing to staging — you're testing the artifact you'll actually deploy, not the live-reload dev server.

Key Insights
  • npm run build emits hashed, minified, tree-shaken static files into /dist — deployable to any CDN/static host.
  • npm run preview serves the production bundle locally to catch build-only issues before deploy.
  • The build artifact is static: no runtime Node server needed, which is what makes S3/CloudFront/Nginx hosting trivial.

Worked Code

Build commands
Shell
// Build commands
npm run build      // produces /dist with static files
npm run preview    // local preview of production build

Interview-Ready Q&A

It produces a /dist folder of static assets — minified, tree-shaken JS/CSS with content-hashed filenames for long-term caching, plus the HTML entry. Tree-shaking drops unused exports, code-splitting separates chunks so routes load on demand, and hashing lets the CDN cache aggressively while busting on change.

Things to Remember
  • 1npm run build -> /dist of static, minified, hashed, tree-shaken assets.
  • 2npm run preview serves that production bundle locally before deploy.
  • 3Static output means any CDN or static host can serve it — no runtime Node server.

References & Further Reading