Adding to an existing Vite app

If you already have a working Vite single page app, you can render it as static site by following these steps:

1. Install the Capri Vite plugin for your framework of choice:

npm install --save-dev @capri-js/react
# OR:
npm install --save-dev @capri-js/preact
# OR:
npm install --save-dev @capri-js/svelte
# OR:
npm install --save-dev @capri-js/solid
# OR:
npm install --save-dev @capri-js/vue

2. Add the plugin to your vite.config.ts file:

import capri from "@capri-js/..."; // pick a framework adapter from above
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react(), capri()],
});

The plugin can be configured using these options.

When you need to use dependencies in your project that don't work well in a native ESM context, you can set up your project as CommonJS and use a dynamic import instead:

// vite.config.ts for a CommonJS setup

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig(async () => {
  // Use a dynamic import to load the ES module:
  const { default: capri } = await import("@capri-js/react");
  return {
    plugins: [
      react(),
      capri({
        // Output the SSR bundle as CommonJS
        ssrFormat: "commonjs",
      }),
    ],
  };
});

3. Modify the build script in your package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build && vite build --ssr"
  }
}

4. Add a server entry scripts

Finally, you have to provide a server entry script to tell Capri how to render your app as HTML.