Docs
Getting Started
Installation

Installation

System Requirements:

Automatic Installation

We recommend starting a new Rasengan.js app using create-rasengan, which sets up everything automatically for you. To create a project, run:

terminal
  npx create-rasengan@latest

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

terminal
You are using Create Rasengan CLI 🎉

? Enter the project name: my-app
? Select a language: typescript
? Select a template: blank

After the prompts, create-rasengan will create a folder with your project name. You will then have to install the required dependencies manually.

terminal
cd my-app
npm install

Manual Installation

If you prefer to install Rasengan.js manually, you have to create a new project and install the required dependencies.

terminal
mkdir my-app
cd my-app
npm init -y
npm install rasengan@latest react@latest react-dom@latest
npm install --save-dev cross-env vite@latest

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

package.json
"scripts": {
  "dev": "rasengan dev",
  "build": "rasengan build",
  "prepare": "rasengan prepare",
  "start": "rasengan start"
}

These scripts refer to the different stages of developing an application:

  • dev: runs rasengan dev to start Rasengan.js in development mode.
  • build: runs rasengan build to build the application for production usage.
  • prepare: runs rasengan prepare to setup configuration needed for hosting your application.
  • start: runs rasengan start to start a Rasengan.js production server.

Creating root directories and root files

There are just two directories you need to create at the root level of your project:

  • public: contains static files that will be served by Rasengan.js, especially icons or images.
  • src: contains the source code of your application.
terminal
mkdir public src

Always at the root level, create the following file:

  • rasengan.config.js: the configuration file for Rasengan.js.
terminal
touch rasengan.config.js

Then add the following content to the rasengan.config.js file:

rasengan.config.js
import { defineConfig } from "rasengan";
 
export default defineConfig({
  reactStrictMode: true,
 
  /* More config here */
});

This file is used to configure Rasengan.js. You can add more configuration options as needed. See the Configuration section for more details.

Creating subdirectories and others files

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

terminal
mkdir src/app

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

terminal
touch src/app/home.page.tsx src/app/app.router.ts

The home.page.tsx file will define a page, more precisely the home page, and the app.router.ts file will define a router, which is a collection of pages.

After, copy and paste the following code into home.page.tsx

Do the same for app.router.js

The app.router.ts file is required and have to be located in the app directory, because it's used by Rasengan.js to define routing for your app automatically.

Finally, create the entry file called main.tsx and the template.tsx file inside the src folder.

terminal
touch src/main.tsx src/template.tsx

Then add the following content inside the template.tsx:

template.tsx
import { type TemplateProps } from "rasengan";
 
export default function Template({
  children,
  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>
        {children}
 
        <Script />
      </Body>
    </html>
  );
}

and add the following content inside the main.tsx:

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>;
}

Learn more about main.tsx file.

The main.tsx file is the entry file of a Rasengan.js application, so it is required.

Add extract configuration file for TypeScript.

At the root level of your project, create a tsconfig.json and rasengan-env.d.ts file.

terminal
touch tsconfig.json rasengan-env.d.ts

Then add the following content to the tsconfig.json file:

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

and add the following content to the rasengan-env.d.ts file:

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

Run the development server

  1. Execute npm run dev command.
  2. Open http://localhost:5320 in the browser.
  3. Edit src/app/home.page.tsx and save to reload automatically.

Next Steps

Project Structure
Routing Base Concepts
IntroductionProject Structure
Logo Image