Frontend Academy · Lesson

Vite: Plugin System and SSR Mode

Write a Vite plugin with transform and load hooks, integrate third-party plugins, and configure Vite for server-side rendering with the ssrBuild option.

Vite: Plugin System and SSR Mode is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Vite Won

Vite (French for 'fast') was created by Evan You. It serves source files unbundled in dev via native ES modules — instant cold starts. Production uses Rollup for bundling. The dev experience is dramatically faster than Webpack.

How Vite's Dev Server Works

Modern browsers support ES modules natively. Vite serves your source files as-is, transforming TypeScript/JSX on demand. No bundling = no waiting on cold starts.

Hot Module Replacement

HMR replaces modules without reloading the page. Vite's HMR is built around ESM and is much faster than Webpack's. Most frameworks (React, Vue, Svelte) plug into it for component-level updates with state preservation.

Vite Config Basics

Configure via vite.config.ts at the project root.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: { port: 5173 },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom']
        }
      }
    }
  }
});

The Plugin System

Vite plugins are an extension of Rollup plugins, with additional hooks for the dev server. A plugin is an object (or function returning one) with named hooks.

// myPlugin.ts
export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!id.endsWith('.mdx')) return null;
      // transform MDX to JS:
      return { code: compileMdx(code), map: null };
    },
    handleHotUpdate(ctx) {
      // react to file changes
    }
  };
}

// vite.config.ts
import myPlugin from './myPlugin';
export default { plugins: [myPlugin()] };

Key Hooks

transform(code, id): modify file content (e.g. compile MDX, inject env). load(id): provide content for virtual modules. resolveId(source): customise module resolution. configureServer(server): add middleware to the dev server.

Popular Plugins

@vitejs/plugin-react (React + Fast Refresh). @vitejs/plugin-vue. vite-plugin-pwa. vite-plugin-svgr (import SVGs as components). vite-plugin-checker (TypeScript / ESLint in overlay). vite-plugin-mkcert (local HTTPS).

Vite SSR Mode

Vite supports server-side rendering with low-level primitives. Frameworks like Nuxt, SvelteKit, Remix, and Astro build on top. For custom SSR, follow Vite's SSR guide.

// server.ts
import { createServer } from 'vite';

const vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom'
});

express()
  .use(vite.middlewares)
  .use('*', async (req, res) => {
    const url = req.originalUrl;
    let template = await readFile('index.html', 'utf-8');
    template = await vite.transformIndexHtml(url, template);
    const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
    const appHtml = await render(url);
    res.send(template.replace('<!--app-html-->', appHtml));
  });

Build for SSR

Two builds: client and server. vite build --ssr entry-server.ts outputs the server bundle.

// package.json
"scripts": {
  "build:client": "vite build",
  "build:server": "vite build --ssr src/entry-server.ts",
  "build": "npm run build:client && npm run build:server"
}

Environment Variables

import.meta.env.MODE is 'development' or 'production'. Custom vars with VITE_ prefix are exposed.

CSS Handling

Vite handles CSS, CSS Modules (foo.module.css), PostCSS (auto-discovers postcss.config.js), CSS preprocessors (Sass, Less, Stylus) out of the box. Inject critical CSS via plugins.

Vite vs Webpack vs Turbopack

Vite: ESM-native dev, Rollup builds, broad ecosystem. Webpack: legacy giant, more configurable, slower. Turbopack (Vercel): Rust-based, Webpack-compatible, currently bundled with Next. For new projects: Vite for SPAs, Next/Turbopack for Next-specific.

Quick Check

Why is Vite's dev server cold-start so much faster than Webpack's?

Recap: Vite

ESM-based dev server: instant cold start, fast HMR. Production uses Rollup. Plugins extend Rollup's hooks (transform, load, resolveId) plus Vite-specific hooks (configureServer, handleHotUpdate). SSR mode via createServer + middlewareMode; build with --ssr. PWA, MDX, SVGR, mkcert plugins. import.meta.env for env vars. CSS Modules, PostCSS, preprocessors built in.

Frequently asked questions

Is the “Vite: Plugin System and SSR Mode” lesson free?

Yes — the full text of “Vite: Plugin System and SSR Mode” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Vite: Plugin System and SSR Mode”?

Write a Vite plugin with transform and load hooks, integrate third-party plugins, and configure Vite for server-side rendering with the ssrBuild option. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Vite: Plugin System and SSR Mode” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy