Rasengan Project Setup

npx create-rasengan@latest

cd my-app
npm install
npm run dev

my-app/
├── public/                  # Static assets (served at /)
├── src/
│   ├── app/
│   │   ├── _routes/         # File-based routes
│   │   ├── app.router.ts    # Router definition
│   │   └── home.page.tsx    # Example page
│   ├── components/          # Reusable UI (optional)
│   ├── assets/              # Images, fonts (optional)
│   ├── styles/              # Global styles (optional)
│   ├── index.ts             # Entry point
│   ├── main.tsx             # Root App component
│   └── template.tsx         # HTML template
├── rasengan.config.js       # Framework config
├── package.json
├── tsconfig.json            # TypeScript config
└── rasengan-env.d.ts        # TypeScript declarations

mkdir my-app && cd my-app
npm init -y
npm install rasengan@latest @rasenganjs/serve@latest react@latest react-dom@latest
npm install --save-dev cross-env vite@latest @types/react @types/react-dom @types/node typescript

// package.json
{
  "type": "module",
  "scripts": {
    "dev": "rasengan dev",
    "build": "rasengan build",
    "serve": "rasengan-serve ./dist"
  }
}

// rasengan.config.js
import { defineConfig } from 'rasengan';
export default defineConfig({});

// src/index.ts
import { renderApp } from 'rasengan/client';
import App from './main';
import AppRouter from '@/app/app.router';

renderApp(App, AppRouter, { reactStrictMode: true });

// src/main.tsx
import { type AppProps } from 'rasengan';
import AppRouter from '@/app/app.router';

export default function App({ Component, children }: AppProps) {
  return <Component router={AppRouter}>{children}</Component>;
}

// src/template.tsx
import { type TemplateProps } from 'rasengan';

export default function Template({ Head, Body, Script }: TemplateProps) {
  return (
    <html lang="en">
      <Head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <Body>
        <Script />
      </Body>
    </html>
  );
}

// src/app/app.router.ts
import { RouterComponent, defineRouter } from 'rasengan';
import Home from '@/app/home.page';

class AppRouter extends RouterComponent {}

export default defineRouter({ pages: [Home] })(AppRouter);

// src/app/home.page.tsx
import { type PageComponent } from 'rasengan';

const Home: PageComponent = () => <main>Home Page</main>;
Home.path = '/';
Home.metadata = { title: 'Home', description: 'Home page' };
export default Home;

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ES2020",
    "moduleResolution": "bundler",
    "module": "ESNext",
    "jsx": "react-jsx",
    "paths": { "@/*": ["src/*"] }
  },
  "include": ["src", "rasengan-env.d.ts"],
  "extends": "./node_modules/rasengan/tsconfig.base.json"
}

// rasengan-env.d.ts
/// <reference types="rasengan/types/client" />