Get Started

Set up your Solyd development & production environment and run your first site locally.

Welcome to Solyd. This guide shows you how to set up your environment and run your first project locally.

Download and extract

Download the Solyd package from your purchase email or marketplace account.
Extract the .zip file to your preferred location.

After extraction, you will see production-ready template folders such as:

heliox-tailwind — Heliox (Solar)
evonix-tailwind — Evonix (Next Gen EV)
kindra-tailwind — Kindra (NGO & Charity)
amprix-tailwind — Amprix (EV charging station)
scrapx-tailwind — Scrapx (Waste management & recycling)
fluxon-tailwind — Fluxon (Wind & alternative power)
cropix-tailwind — Cropix (Organic farming & agriculture)
zooxia-tailwind — Zooxia (Wildlife rescue & animal shelter)
oxivia-tailwind — Oxivia (Carbon offset & reforestation)
arcion-tailwind — Arcion (Eco architecture & green building)
...and many more

If you only want to preview a static version, open a template folder and double-click index.html. It will open in your browser.

These folders contain production-ready static files.
For development and customization, use the source code from the development files in the next steps.

Prerequisites

Before you begin, make sure you have:

Node.js (20 or higher) (Download)
Operating System: Windows, macOS, or Linux
Code editor: VS Code, Cursor, WebStorm, or any editor you prefer
Terminal/Command Line access

Get development code

Inside the extracted package, you will find DEVELOPMENT-FILES-LINK.pdf.

Open the PDF file.
Choose the template link you want to download.
Download and extract the template .zip file.
Open the extracted project folder in your code editor.

Install dependencies

Terminal

# Go to your project folder
cd cropix-tailwind

# Install dependencies with npm
npm install

# OR install dependencies with yarn
yarn install

# OR install dependencies with bun
bun install

You can use npm, yarn, or bun. For best results, use only one package manager per project.

Start the development server

Terminal

# With yarn
yarn dev

# OR with npm
npm run dev

# OR with bun
bun dev

You should see output similar to:

✓ Development server started
➜ Local:   http://localhost:5173/
➜ Network: http://192.168.1.x:5173/

Your Solyd site is now available at http://localhost:5173/.

Command reference

yarn install / npm install / bun install: Installs project dependencies
yarn dev / npm run dev / bun dev: Starts the development server with hot reload
yarn build / npm run build / bun run build: Creates a production build in dist/
yarn preview / npm run preview / bun run preview: Previews the production build locally
yarn format / npm run format / bun run format: Formats code using Prettier

Verify your setup

After setup, confirm everything is working:

Dev server is running: Open http://localhost:5173/
Hot reload works: Make a small code change and confirm the page updates
No console errors: Check browser developer tools

Next steps

Explore the folder structure →
Review the project structure, especially the src/ folder
Start customizing the template for your project needs

Edit this page

Folder Structure

Understand how the Solyd HTML project is organized.