dinou docs

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 Webpack and the server 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

Routes are defined by creating page.tsx files in folders. The route "/" corresponds to the src folder.

Development

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

Development server

npm run dev

Starts the development server with hot reloading.

In development, webpack will emit his files in ____public____ folder.

In development, all pages are rendered dynamically.

Build for production

npm run build

Creates an optimized production build.

In production, webpack will emit his files in dist3 folder.

Start production server

npm start

Starts the production server (run after build).

At this point, all SSG pages will be generated.

Eject

npm run eject

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

Getting Started