GETTING STARTED

Upgrading

Latest Stable version

To update to the latest version of Rasengan.js, you just have to run the following command:

Terminal
pnpm add rasengan@latest

Latest Beta version

To update to the latest beta version of Rasengan.js, you just have to run the following command:

Terminal
pnpm add rasengan@beta

Upgrade to 2.0.0-beta

Version 2.0.0-beta rewrites Rasengan.js's entire server layer on top of Futon, a lightweight WinterCG-compatible HTTP engine, replacing Express everywhere: the dev server, production request handling, and every deployment adapter.

What changed

  • Express is gone. rasengan/server no longer exports express/compression. If you were adding custom Express middleware to your app's server, it needs to move to a Futon Middleware instead. See the Futon Middleware guide.
  • New peer dependency versions required: vite@^8.0.0, react-router@^8.3.0, react/react-dom@^19.2.7.
  • New runtime config option ('node' | 'bun' | 'workerd') lets @rasenganjs/serve run your production build on Bun instead of Node.js. Defaults to 'node', so existing apps don't need to change anything.
  • New file-based API routes (src/app/_api/), a way to build server-only HTTP endpoints without a full page, entirely optional and additive.
  • @rasenganjs/netlify now works. The adapter had been broken since before this rewrite; it's rebuilt on Futon along with @rasenganjs/vercel. See Deploying to Netlify.

Upgrade steps

[01]Update your dependencies
Bump Rasengan.js and its peer dependencies to the versions this release requires.
Terminal
pnpm add rasengan@beta react@latest react-dom@latest vite@latest
[02]Remove any direct Express usage
If your app doesn't customize the server at all (the vast majority of apps), you can skip this step entirely. If it does, replace any Express-specific middleware or request/response handling with Futon's equivalents.

Before

custom server code
import { express, compression } from 'rasengan/server'; app.use(compression()); app.use(express.static('public'));

After

custom server code
import { staticFiles, compress } from 'rasengan/server'; app.use(compress()); app.use(staticFiles({ root: 'public' }));
[03]Rebuild and test your deployment
Run a fresh build and verify your app still deploys correctly, especially if you're on Netlify (previously broken) or use a custom deployment integration.
Terminal
pnpm run build

Upgrade from 1.1.x to 1.2.x

If you want to improve the performance of your application, especially as it grows in size, upgrading to version 1.2.x is a great choice.

This version introduces several major features:

New Error Boundary Overlay (since v1.2.2)

Rasengan v1.2.2 introduces a completely redesigned error handling experience with a developer-friendly overlay that catches errors from every source:

  • React rendering errors: Caught by a class-based ErrorBoundaryFallback component wrapping your application tree
  • Route loader errors: Every route is automatically wrapped with an error boundary that feeds into the overlay
  • Global unhandled errors and rejections: window.onerror and window.onunhandledrejection are registered and captured
  • Vite HMR errors: Errors during hot module replacement are displayed in the overlay
  • SSR errors: Server-side rendering errors are serialized into window.__RASENGAN_SSR_ERROR__ and forwarded to the client overlay after hydration

Lazy Loaded Routes (since v1.2.0)

Routes are now loaded on demand, based on the page the user is visiting. This means your app only loads what it needs, when it needs it, which helps reduce initial load time and makes navigation feel faster.

Everything is handled automatically, there is no option to opt out this feature.

SSG (Static Site Generation) (since v1.2.0)

You can now generate static HTML files for your pages ahead of time. This improves performance, SEO, and allows your site to be served extremely fast, without waiting for server responses or client-side rendering.


The configuration is simple, inside the rasengan.config.js file, you just have to enable the prerender option.

rasengan.config.js
import { defineConfig } from 'rasengan'; import { rasengan } from 'rasengan/plugin'; export default defineConfig({ prerender: true, vite: { plugins: [rasengan()], }, });

This is the minimal configuration, it will enable the prerender globally into your application. If you prefer, you can select what you really want to prerender.

rasengan.config.js
import { defineConfig } from 'rasengan'; import { rasengan } from 'rasengan/plugin'; export default defineConfig({ prerender: { routes: ['/', 'blog/**'], }, vite: { plugins: [rasengan()], }, });

This approach is ideal for hybrid applications, where:

  • Public pages are statically generated
  • Authenticated or dynamic routes remain rendered via SSR or SPA

So, to upgrade you have to follow the following steps:

[01]Install the target dependency
Run the following command to install the correct version of Rasengan.js
Terminal
pnpm add rasengan@~1.2.2
[02]Remove AppRouter from main.tsx file
Get off the AppRouter instance from the main.tsx, because it's not longer important there.

Before

main.tsx
import '@/styles/index.css'; import { type AppProps } from 'rasengan'; import AppRouter from '@/app/app.router'; export default function App({ Component, children }: AppProps) { return <Component router={AppRouter}>{children}</Component>; }

After

main.tsx
import '@/styles/index.css'; import { type AppProps } from 'rasengan'; export default function App({ Component, children }: AppProps) { return <Component>{children}</Component>; }
[03]Move the AppRouter to the index.ts file
Now import the AppRouter instance into the index.ts file

Before

index.ts
import { renderApp } from 'rasengan/client'; import App from './main'; renderApp(App, { reactStrictMode: true });

After

index.ts
import { renderApp } from 'rasengan/client'; import App from './main'; import AppRouter from '@/app/app.router'; renderApp(App, AppRouter, { reactStrictMode: true });
[04]Start the dev server
Then run the dev command to start the local server
Terminal
pnpm run dev
Project Structure
Routing - Base Concepts