Dinou docs

Prerequisites

Before getting started, ensure you have the following requirements installed:

Node.js: Version 20.6.0 or higher is required. Dinou uses the native ES module loader hook registration (via the --import flag) introduced in Node.js v20.6.0 to compile TSX/JSX, resolve aliases, and load static assets in real-time on the server.

Quick Start (CLI)

The fastest way to scaffold a new Dinou application is using the official CLI generator. This creates a fully configured project with the recommended structure.

# Create a new Dinou application
npx create-dinou@latest my-app

# Navigate to your project
cd my-app

# Start the development server
npm run dev

⚡ When is the project ready in dev?

Dinou runs two concurrent tasks in development: the server process [0] and the bundler compiler [1].Wait until both logs are fully initialized (showing that compilation has finished and the server is listening) before opening the page in your browser. Opening too early can result in hydration mismatches or connection errors.

Manual Setup

Prefer to set up everything manually? Follow these steps for complete control over your project configuration.

1. Install Dependencies

Create a new directory and install the required packages:

# Create your project directory
mkdir my-dinou-app
cd my-dinou-app

# Initialize package.json
npm init -y

# Install core dependencies
npm install react react-dom dinou

2. Create Project Structure

Create a src directory in the root of your project, and create a file named page.jsx (or page.tsx) inside it:

// src/page.jsx
export default function Page() {
  return <h1>Hello, Dinou!</h1>;
}

File Structure

my-dinou-app/
├── node_modules/
├── src/
│   └── page.jsx
├── package.json
└── package-lock.json

3. Configure package.json (Optional)

Add the necessary scripts to your package.json:

{
  "scripts": {
    "dev": "dinou dev",
    "dev:esbuild": "dinou dev:esbuild",
    "dev:rollup": "dinou dev:rollup",
    "dev:webpack": "dinou dev:webpack",
    "build": "dinou build",
    "build:esbuild": "dinou build:esbuild",
    "build:rollup": "dinou build:rollup",
    "build:webpack": "dinou build:webpack",
    "start": "dinou start",
    "start:esbuild": "dinou start:esbuild",
    "start:rollup": "dinou start:rollup",
    "start:webpack": "dinou start:webpack",
    "eject": "dinou eject"
  }
}

4. Run the Development Server

Start the development server using the configured scripts:

# Start development server (esbuild default)
npm run dev

# Or start with a specific bundler
npm run dev:rollup
npm run dev:webpack

Alternatively, you can run the CLI tool directly without adding scripts to your package.json using npx:

# Run the development server (esbuild default)
npx dinou dev
 
# Or run with a specific bundler
npx dinou dev:rollup
npx dinou dev:webpack

5. Configure .gitignore (Recommended)

Dinou generates temporary cache manifests, build outputs, and development directories that should not be committed to version control. Add the following folders to your .gitignore file:

# Dinou build & cache directories
dist2/
dist3/
public/
react_client_manifest/
server_functions_manifest/

These folders contain compilation outputs (such as development files in public/ and production builds in dist3/) or client/server manifests mapped dynamically during server execution.