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.
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@latestThis 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
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.
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:
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!