[01]Create a new project
Run the following command to create a new project.
npx create-rasengan@latest
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:
[02]Follow the prompts
On the installation process, you will see the following prompts:
- 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.
cd my-app npm install
[04]Run the application
Run the following command to start the development server.
npm run dev
Manual Installation
Warning
This 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.
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
[02]Add scripts into package.json
Open the `package.json` file and add the following scripts.
"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.
mkdir public src touch rasengan.config.js
[04]Configure Rasengan.js
Open the `rasengan.config.js` file and add the following configuration.
import { 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.
mkdir 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.
import { 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.
import { 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.
import { 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.
import { 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.
import { 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.
touch tsconfig.json rasengan-env.d.ts
[12]Configure TypeScript
Open the `tsconfig.json` and `rasengan-env.d.ts` files and add the following configuration.
{ "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" }
/// <reference types="rasengan/types/client" />
[13]Run the application
Run the following command to start the development server.
npm run dev
Introduction
Project Structure
