rasengan.config.js

Rasengan.js can be configured through a rasengan.config.js file in the root of your project directory with a default export.

import { defineConfig } from 'rasengan';
 
export default defineConfig({/* your config */});

Configuration as a Function

You can also pass a function to defineConfig to do some dynamic configuration.

import { defineConfig } from 'rasengan';
 
export default defineConfig(() => {
  // You can do some dynamic configuration here
 
  return {/* your config */};
});

Async Configuration

You can also return a Promise from the function to do async configuration.

import { defineConfig } from 'rasengan';
 
export default defineConfig(async () => {
  // You can do some async configuration here
 
  return {/* your config */};
});

Configuration Options

ssr

Rasengan.js will use the ssr option to determine whether to use SSR or not. By default, it is set to true to enable SSR but you can set it to false to disable SSR and work in SPA mode.

import { defineConfig } from 'rasengan';
 
export default defineConfig({
  ssr: false,
});

prerender

Introduced in v1.2.0, the prerender option lets you configure the pre-rendering mode (SSG) for your application. It's either a boolean or an object containing a routes parameter giving you the possibility to set the list of routes you want to pre-render statically.

import { defineConfig } from 'rasengan';
 
export default defineConfig({
  prerender: true,
});

or

import { defineConfig } from 'rasengan';
 
export default defineConfig({
  prerender: {
    routes: ['/', '/about', '/contact', '/blog/**],
  },
});

runtime

Introduced in v2.0.0-beta, the runtime option targets the JS runtime your production SSR build runs on: 'node' (default), 'bun', or 'workerd' (Cloudflare Workers, not fully supported yet). It only affects the production ssr/ssg build; rasengan dev always runs on Node.

import { defineConfig } from 'rasengan';
 
export default defineConfig({
  runtime: 'bun',
});

runtime: 'bun' is what lets @rasenganjs/serve pick BunProdAdapter instead of the default Node adapter in production. See Deploying to a Node.js Server for the full picture, since the same rasengan-serve command handles both.

api.prefix

Introduced in v2.0.0-beta alongside file-based API routes, api.prefix changes the URL prefix _api/ routes are mounted under. Defaults to /api.

import { defineConfig } from 'rasengan';
 
export default defineConfig({
  api: {
    prefix: '/v1',
  },
});

With this set, a route defined at src/app/_api/users/index.route.ts is served at /v1/users instead of /api/users.

sageMode

Introduced in v1.2.0, the sageMode option lets you configure from now the react compiler mode.

import { defineConfig } from 'rasengan';
 
export default defineConfig({
  sageMode: {
    reactCompiler: true,
  },
});

Lean more about React Compiler.

server.development.port

You can use the server.development.port option to set the port for the development server by overriding the default port.

import { defineConfig } from 'rasengan';
 
export default defineConfig({
  server: {
    development: {
      port: 3000,
    },
  },
});

By running npm run dev, the development server will be available at http://localhost:3000.

server.development.open

You can use the server.development.open option to open the browser automatically when the development server starts.

import { defineConfig } from 'rasengan';
 
export default defineConfig({
  server: {
    development: {
      open: true,
    },
  },
});

vite.plugins

You can use the vite.plugins option to add Vite plugins to your project and enable extra features.

import { defineConfig } from 'rasengan';
import mdx from '@rasenganjs/mdx/plugin';
 
export default defineConfig({
  vite: {
    plugins: [mdx()],
  },
});

vite.resolve.alias

You can use the vite.resolve option to configure Vite's resolve.alias option.

import { defineConfig } from 'rasengan';
 
export default defineConfig({
  vite: {
    resolve: {
      alias: [
        {
          find: '~',
          replacement: '/src',
        },
      ],
    },
  },
});

And then you can use the alias in your code like this:

import { Avatar } from '~/components/avatar';

vite.resolve.symbole

You can use the vite.resolve.symbole option to configure Vite's resolve.symbole option. This is useful because by default, Rasengan.js is using module aliases with @ as the alias for the src directory. You can decide to change the alias to something else.

import { defineConfig } from 'rasengan';
 
export default defineConfig({
  vite: {
    resolve: {
      symbole: '_',
    },
  },
});

And then you can use the alias in your code like this:

import { Avatar } from '_/components/avatar';