Getting Started

This short guide is targeted at technically open hearted humans and expects basic knowledge about bash, javascript and nodejs. It explains how to initialize a new Nitropage project and scaffold a first custom blueprint.

Requirements

  • Access to a bash terminal
  • Node LTS (v18.12.0)
  • Plaintext editor - such as VSCodium

Installation

Open up a terminal, navigate into a folder of your choice and run one of the following (depending on your preferred package manager):
# PNPM
pnpm create nitropage@latest

# NPM
npm init nitropage@latest
This will guide you through the whole installation process. Afterwards you can enter the newly created directory of your project and run the "dev" script via npm/pnpm. This will instantly start up the Vite development server, which can be used to work on a Nitropage project before deploying it to production.
The Vite Development Server

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!
Now open up http://localhost:3000/admin in your browser. This 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.
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
And much more to come