Library Mode & Environments

Vite isn't just for apps. Build a publishable library with the right output formats and types, and understand the multi-environment build model behind SSR.

Pick which output formats your package ships, then see the config and the resulting dist/.

vite.config.ts


        
dist/ + package.json

      

      

    


    

      
One vite build can produce coordinated output for multiple runtimes. Each environment has its own module graph and config.

      

        

          
client

          
runs in the browser

          
hydrates the HTML

          
own module graph

          
→ dist/client/

        

        

          
ssr

          
runs in Node

          
renders HTML on request

          
own externals

          
→ dist/server/

        

        

          
edge (optional)

          
Workers / edge runtime

          
different globals

          
own optimizer

          
→ dist/edge/

        

      

      
// Environment API (Vite 6+, stabilizing) — a sketch
export default defineConfig({
  environments: {
    client: { /* browser build */ },
    ssr: {
      resolve: { external: ["express"] },
      // rendered via the Module Runner at runtime
    },
  },
});

// dev SSR: load your server entry through Vite's transform pipeline
const { render } = await server.ssrLoadModule("/src/entry-server.tsx");
const html = await render(url);

      
Why it exists: before, SSR was bolted on with a separate, awkward API. The Environment API makes client, SSR, and edge first-class peers — each with its own module graph, plugin container, and optimizer — coordinated by a single build. Most app authors consume this through a framework (Nuxt, SvelteKit, React Router, TanStack Start); library/framework authors build on it directly.