Topolearn

Learn Vite

Fast frontend build tool: instant dev server with HMR and optimized production builds

13 lessons · 3 hours · 4 levels · covers Vite 8

Vite is the build tool behind most new frontend projects: a dev server that serves source files as native ES modules with near-instant hot module replacement, and a production bundler (Rolldown since Vite 8) that outputs optimized, hashed assets. It powers React, Vue, Svelte and Solid apps and frameworks such as Nuxt, SvelteKit, Astro and React Router, and its plugin API is shared by a large ecosystem.

Sign in free to track progressOfficial docs ↗

Before you start

Vite builds on these; the tree links to the exact lessons you need.

JavaScriptPractical levelNode.jsEssentials levelnpmEssentials level

How deep do you want to go?

1. EssentialsRead and write simple code, do the everyday basics4 lessons · 42 min in total
2. PracticalUse it productively at work, with the usual idioms7 lessons · 1 hour in total
3. AdvancedThe less common features, performance and trade-offs10 lessons · 2 hours in total
4. ExpertInternals and the edge cases experts know13 lessons · 3 hours in total

The Vite tree

ViteWhat Vite is and why it is fastWhat Vite is and whyit is fastProject structure and the CLIProject structure andthe CLIImporting CSS and static assetsImporting CSS andstatic assetsEnvironment variables and modesEnvironmentvariables and modesConfiguration and the dev serverConfiguration and thedev serverHot module replacementHot modulereplacementProduction builds and deploymentProduction builds anddeploymentnpm scripts and lifecycle hooksnpm scripts andlifecycle hooksModules: import and exportModules: import andexportEnvironment variables and .env filesEnvironmentvariables and .env f…
Essentials and Practical shown (7 of 13 lessons); the full list is below. Click a lesson to read it.

All 13 lessons, in order

Getting started

  1. What Vite is and why it is fast · Essentials · 10 min

    Vite serves source files as native ES modules in development and bundles them with Rolldown for production.

  2. Project structure and the CLI · Essentials · 10 min

    Know why index.html is the entry point, what lives in public/ versus src/, and the dev, build and preview commands.

Developing with Vite

  1. Importing CSS and static assets · Essentials · 12 min

    Import CSS, CSS modules and preprocessors directly, and turn images, fonts and text files into URLs or strings with query suffixes.

  2. Environment variables and modes · Essentials · 10 min

    Expose VITE_-prefixed variables via import.meta.env, load .env files per mode, and keep secrets out of the client bundle.

  3. Configuration and the dev server · Practical · 12 min

    Write vite.config with defineConfig, add path aliases, and configure the dev server's port, host and API proxy.

  4. Hot module replacement · Practical · 12 min

    See how HMR swaps changed modules over a WebSocket, what HMR boundaries are, and use the import.meta.hot API.

Building for production

  1. Production builds and deployment · Practical · 15 min

    Build with vite build, understand hashed output and code splitting, set browser targets and base, and deploy dist/ as static files.

  2. Library mode · Advanced · 12 min

    Build a publishable package with build.lib: entry, formats, file names, and externalized dependencies, plus types and exports.

  3. Rolldown, chunking and performance · Expert · 15 min

    Know what changed with Rolldown and Oxc in Vite 8, control chunking with codeSplitting groups, and diagnose slow dev servers and large bundles.

Plugins and internals

  1. Using plugins and framework integrations · Advanced · 10 min

    Add official and community plugins, control their order and when they apply, and know that Vite plugins extend the Rollup plugin interface.

  2. Dependency pre-bundling · Advanced · 12 min

    Understand why Vite pre-bundles node_modules, how the cache works, and fix issues with optimizeDeps include and exclude.

  3. Writing Vite plugins · Expert · 15 min

    Implement resolveId, load and transform hooks, virtual modules, and Vite-specific hooks like configureServer and transformIndexHtml.

  4. SSR and the Environment API · Expert · 15 min

    Render on the server with Vite in middleware mode, build client and server bundles, and understand environments and module runners.