Getting Started

Learn how to setup your first Nitropage project in minutes, either locally if you plan to customize the included blueprints and create your own ones, or via Docker if you just wanna host your first site as quickly as possible.

Installation

Local install
Docker

Local

Requirements

  • Operating system: Unix-based or WSL
  • Node.js: LTS (>= v22) - Download
  • PNPM: Optional, but recommended - Download
    Fast and efficient dependency installations!

  1. Initialize a new Nitropage project using the CLI:

    pnpm create nitropage@latest <project-name>
# or
npm init nitropage@latest <project-name>

    When it asks you, choose to install dependencies and initialize the sqlite database.

  2. Start up the development server:

    cd <project-name>
pnpm dev 
# or 
npm run dev

Docker

The Docker method is a great way to give Nitropage a try and host basic websites, but install Nitropage locally if you plan to change the code and wanna create your own blueprints.

  1. Create a compose.yaml file with the following content:

    services:
  nitropage:
    restart: always
    image: nitropage/nitropage:sqlite
    env_file: ".env"
    volumes:
      - ./.data:/app/.data
    ports:
      - 3000:3000
    healthcheck:
      test: ["CMD", "curl", "-f", "http://127.0.0.1:3000/admin"]
      interval: 2s
      timeout: 10s
      retries: 15

  2. Create an .env file with the following content:

    DATABASE_URL=file:../../.data/dev.db
NP_AUTH_SALT=random_characters
NP_AUTH_PASSWORD=this_must_be_at_least_32_characters

    Change NP_AUTH_SALT and NP_AUTH_PASSWORD to your liking or generate random values with the command: openssl rand -hex 16

  3. Start the container:

    docker-compose up -d

Wanna use a PostgreSQL database? Take a look at the following example: compose.yaml

Create a user

Now open up http://localhost:3000/admin in your browser. /admin is the address to access the administration dashboard during development and production. Create a admin user in the welcome screen. Afterwards it will automatically log you into the dashboard where you can create projects and pages. Projects can be used to manage multiple websites with different domains. You only have to enter a domain if you plan to host multiple websites from a single Nitropage instance. Domains can be added / changed later.

Blueprints

Blueprints are the building blocks used to design pages and the starter kit comes included with several of them. (In fact this website here is created only with starter blueprints). As a developer you can create custom blueprints!
Click to show all starter blueprints
Blueprints are JSX / TSX files ending with ".np.jsx" or ".np.tsx", exporting a Solid component and a "blueprint" function. The blueprint function does define the available editor settings of the respective component.
To scaffold your first custom blueprint, open the project path in your terminal and run:
npm run blueprint "blueprintName"
The vite development server will automatically detect your new blueprint and you can create a new element with it, via the page editor from the dashboard. Next you can start making changes to the "src/blueprints/myBlueprint.np.tsx" file and the changes will automatically be applied via hot module replacement.

Next Steps

Nitropage is still a young project and there are many things to work on as you can see in the Roadmap :). I plan to write blog posts in english and german very soon, explaining my thoughts behind Nitropage and its future, subscribe to the Newsletter to stay updated.You tried it out or even created a website? I'd loooove to hear from you!
Previous
Introduction
Next
Upgrades