Capri is based on Vite and doesn't try to hide it. Instead of introducing another level of abstraction, possibly with its own configuration file, we decided to keep things simple. Therefore, Capri is configured via the vite.config.ts file:

import { defineConfig } from "vite";

// Vite plugin for the framework you are using:
import react from "@vitejs/plugin-react";

// Capri adapter for your framework:
import capri from "@capri-js/react";

export default defineConfig({
  plugins: [
      // options

Currently there are three framework adapters to choose from:



Whether Capri should generate pages as <page>.html or <page>/index.html. The default is true.


The pathname, relative to the dist dir, where Capri should render the whole site as single page app. Use this setting if you want live previews for your CMS. Can be either a string or false (default).

The actual location depends on the createIndexFiles option:

  createIndexFiles: true,
  spa: "/preview",
// -> dist/preview/index.html


  createIndexFiles: false,
  spa: "/preview",
// -> dist/preview.html


Tells Capri which files should be pre-rendered. Can either be a string or string[] or an async function that returns an array of strings. The default is /.


Unless followLinks is set to false you usually don't have to change this setting, as Capri will automatically follow all links and pre-render all pages it encounters.

Whether Capri should recursively look for local links in the rendered result and render them too. Can either be a boolean or a filter function:

  followLinks: (pathname: string) => !pathname.includes("dynamic");


Where to find islands. The default is /src/**/*.island.*;


Where to find lagoons. The default is /src/**/*.lagoon.*;

MIT Licensed | Copyright © 2022 | Impressum