Getting Started

Installation

The fastest way to get started with dinou is using the create command:

npx create-dinou@latest my-app

This will create a new dinou application with all the necessary files and dependencies.

Manual Setup

You can also set up a dinou project manually:

1. Create an npm project

npm init -y

2. Install dependencies

npm i react react-dom dinou

3. Create scripts in package.json (optional)

{
  "scripts": {
    "dev": "dinou dev",
    "build": "dinou build", 
    "start": "dinou start",
    "eject": "dinou eject"
  }
}

4. Create your first page

Create an src folder with a page.jsx (or .tsx):

"use client";

export default function Page() {
  return <>hi world!</>;
}

5. Start development

npm run dev

Wait for the logs of the bundler (waiting for changes...) and the server (Listening on port 3000) and navigate to your browser to see the page in action (localhost:3000).

Project Structure

A typical dinou project structure looks like this:

my-app/
├── src/
│   ├── page.tsx          # Home page (/)
│   ├── about/
│   │   └── page.tsx      # About page (/about)
│   └── blog/
│       ├── layout.tsx    # Blog layout
│       ├── page.tsx      # Blog index (/blog)
│       └── [id]/
│           └── page.tsx  # Dynamic blog post (/blog/[id])
├── package.json
└── tsconfig.json

Development

Once your project is set up, you can use these commands:

Development server

npm run dev

Starts the development server with hot reloading.

Build for production

npm run build

Creates an optimized production build.

Start production server

npm start

Starts the production server (run after build).

Eject

npm run eject

Copies dinou's files to your project for full customization.