Vite Configuration

The entire build is driven by Vite with two Pagesmith plugins. No custom build scripts, no webpack — just a standard vite.config.ts.

The full config

1import { defineConfig } from "vite-plus";2import { pagesmithSsg, sharedAssetsPlugin } from "@pagesmith/site/vite";34export default defineConfig({5  base: "/pagesmith/examples/vanilla-ejs",6  plugins: [7    sharedAssetsPlugin(),8    ...pagesmithSsg({ entry: "./src/entry-server.tsx", contentDirs: ["./content"] }),9  ],10  build: {11    outDir: "../../../gh-pages/examples/vanilla-ejs",12    emptyOutDir: true,13    rolldownOptions: {14      checks: {15        pluginTimings: false,16      },17    },18  },19  oxc: {20    jsx: {21      runtime: "automatic",22      importSource: "@pagesmith/site",23    },24  },25});

Plugin breakdown

sharedAssetsPlugin()

Copies shared assets (fonts, icons) from @pagesmith/site into the build output. This ensures that font files referenced by CSS are available in production without manual copying.

pagesmithSsg({ entry, contentDirs })

The SSG plugin handles static site generation. It accepts two key options:

• entry — Path to the SSR entry file that exports getRoutes() and render().
• contentDirs — Directories to watch for content changes during development.

Note that pagesmithSsg returns an array of plugins (hence the spread ...), which is why it is spread into the plugins array.

In development, it provides middleware that calls render() on each request, giving you live preview with hot reload when content or templates change.

In production, it:

1. Calls getRoutes() to discover all URLs
2. Calls render() for each URL in parallel
3. Writes the HTML files to the output directory
4. Runs Pagefind to index the generated pages and produce a search index

No pagesmithContent plugin

Unlike the React or Solid examples, this config does not include pagesmithContent. The EJS example uses createContentLayer directly in the SSR entry instead of relying on virtual modules. This means:

• No virtual:content/guide imports — content is loaded programmatically
• No auto-generated TypeScript declarations for virtual modules
• Full control over when and how content is loaded and cached

This is the simpler approach when your templates do not need framework-specific module imports.

Base path

1base: "/pagesmith/examples/vanilla-ejs";

The base option configures the public URL prefix for all assets. This is passed through to the render() function via config.base, where it is used to prefix all internal links and asset references. This makes the site deployable under a subdirectory (e.g., GitHub Pages).

JSX configuration

1oxc: {2  jsx: {3    runtime: 'automatic',4    importSource: '@pagesmith/site',5  },6}

This configures the OXC transpiler to use @pagesmith/site as the JSX import source. Even though this example uses EJS for page templates, the SSR entry file uses .tsx extension for TypeScript support, and the JSX runtime is available if needed.

Build output

1build: {2  outDir: '../../../gh-pages/examples/vanilla-ejs',3  emptyOutDir: true,4}

The output directory is set relative to the example directory, placing the built site into the workspace-level gh-pages/ folder. The emptyOutDir flag ensures a clean build every time.