GETTING STARTED

Get started with Rasengan.js

Rasengan.js takes care of all the complex parts of web development —routing, rendering, optimization, and performance— so you don’t have to. It scans your React components, automatically applies best practices, and generates the most efficient output for your project.

With Rasengan.js, you can focus on building your app, while it handles the difficult technical details behind the scenes. It’s —fast, flexible, and reliable— with minimal setup and zero hassle. 🚀

Pre-requisites

Node.js 20.18 or later.
macOS, Windows, and Linux are supported.

Installation

Automatic Installation

The best way to start a new Rasengan.js project is with create-rasengan CLI, which sets everything up for you automatically.

Just follow the following steps to get started:

[01]Create a new project

Run the following command to create a new project.

Terminal

bashnpx create-rasengan@latest

[02]Follow the prompts

On the installation process, you will see the following prompts:

Terminal

bash- What would you like to name your project?
- Which language would you like to use for your project?
- Which template would you like to use?

[03]Install dependencies

After the prompts, create-rasengan will create a folder with your project name. Move yourself inside and install the required dependencies.

Terminal

bashcd my-app
npm install

[04]Run the application

Run the following command to start the development server.

Terminal

bashnpm run dev

Manual Installation

WarningThis method is not recommended for beginners. It is recommended to use the automatic installation method.

Using JavaScript

Using TypeScript

The following steps will guide you through setting up a new Rasengan.js project manually using TypeScript.

[01]Install dependencies

Create a new folder first and move yourself inside.

Then generate a new package.json file and install the required dependencies.

Terminal

bashmkdir 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

[02]Add scripts into package.json

Open the package.json file and add the following scripts.

package.json

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

[03]Create root directories and files

First, create the necessary directories at the root of your project.

public: Contains static assets like icons and images.
src: Contains your application’s source code.

Then, create the rasengan.config.js configuration file.

Terminal

bashmkdir public src
touch rasengan.config.js

[04]Configure Rasengan.js

Open the rasengan.config.js file and add the following configuration.

rasengan.config.js

javascriptimport { defineConfig } from "rasengan";
 
export default defineConfig({});

[05]Create sub-directories and files

Inside the src directory, create an app folder to store your application's pages.

Then create a home.page.tsx and app.router.ts files inside the app directory.

Finally create a main.tsx, template.tsx and index.ts files inside the src directory.

Terminal

bashmkdir src/app
 
touch src/app/home.page.tsx src/app/app.router.ts
 
touch src/main.tsx src/template.tsx src/index.ts

[06]Create a simple page

Open the home.page.tsx file and add the following code to create a simple page.

home.page.tsx

jsximport { type PageComponent } from "rasengan";
 
const Home: PageComponent = () => {
  return (
    <main>Home Page</main>
  )
}
 
Home.path = "/";
Home.metadata = {
  title: "Home",
  description: "Home page",
}
 
export default Home;

[07]Create a router

Open the app.router.ts file and add the following code to create a router.

app.router.ts

javascriptimport { RouterComponent, defineRouter } from "rasengan";
import Home from "@/app/home.page";
 
class AppRouter extends RouterComponent {}
 
export default defineRouter({
  pages: [Home]
})(AppRouter);

[08]Define the main component

Open the main.tsx file and add the following code to define the main component.

main.tsx

jsximport { type AppProps } from "rasengan";
import AppRouter from "@/app/app.router";
 
export default function App({ Component, children }: AppProps) {
  return <Component router={AppRouter}>{children}</Component>;
}

[9]Define the template HTML

Open the template.tsx file and add the following code to define the template HTML.

template.tsx

jsximport { type TemplateProps } from "rasengan";
 
export default function Template({
  Head,
  Body,
  Script
}: TemplateProps) {
  return (
    <html lang="en">
      <Head>
        <meta charSet="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/rasengan.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
 
      <Body>
        <Script />
      </Body>
    </html>
  );
}

[10]Define the entry point

Open the index.ts file and add the following code to define the entry point.

index.ts

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

[11]Add extract configuration file for TypeScript.

Create new files called tsconfig.json and rasengan-env.d.ts at the root of your project.

Terminal

bashtouch tsconfig.json rasengan-env.d.ts

[12]Configure TypeScript

Open the tsconfig.json and rasengan-env.d.ts files and add the following configuration.

tsconfig.json

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

rasengan-env.d.ts

typescript/// <reference types="rasengan/types/client" />

[13]Run the application

Run the following command to start the development server.

Terminal

bashnpm run dev

Introduction

Project Structure