Set up your local development environment and contribute to the Skyport ecosystem.

Skyport Panel is built with Node.js, Express, and Tailwind CSS, communicating with Docker through the skyportd daemon. This guide walks you through setting up a complete development environment on your local machine.

Prerequisites

Before setting up Skyport locally, ensure you have the following installed:

Node.js: Version 18.x or 20.x LTS.
npm or pnpm: Node package managers.
Git: For version control.
Docker: For testing containerized server instances and daemon interactions.

Setting Up Skyport Panel

1. Clone the Repository

Clone the Skyport Panel repository to your development machine:

git clone https://github.com/skyport-team/panel.git
cd panel

2. Install Dependencies

Install the required npm packages:

npm install

3. Configure the Panel

Copy the example configuration file to create your local config:

cp example_config.json config.json

Open config.json in your editor to configure settings such as:

port: The local port on which the web server listens (default: 3001).
secret: A random string used for session encryption.
Database: By default, Skyport uses SQLite for simple, zero-config local development.

4. Seed Database and Create an Admin Account

Initialize the SQLite database with default settings and create an initial administrator:

npm run seed
npm run createUser

Follow the interactive prompts in the terminal to set your administrator username, email, and password.

Running in Development Mode

Skyport provides npm scripts tailored for development workflows:

Server Auto-Reload (Nodemon)

To start the server with automatic restart whenever backend JavaScript files change:

npm run start:dev

Full Development Mode (Server + Browser-Sync)

To run both the server and live browser refresh simultaneously:

npm run dev

Your panel will be accessible at http://localhost:3001.

Working with Tailwind CSS

Skyport Panel uses Tailwind CSS for its styling. The source styles reside in ./public/tw.conf and compile into ./public/assets/tailwind.css.

When making styling adjustments in view templates or CSS configurations, start the Tailwind compiler in watch mode:

npm run build:css

This command runs the Tailwind CLI watcher to automatically recompile your utility classes on save.

Contributing Guidelines

We welcome community contributions! When submitting improvements:

Fork the repository and create a descriptive branch:
```
git checkout -b feature/improved-file-manager
```
Keep commits concise and meaningful.
Verify that your changes do not break existing routes or daemon communication.
Open a Pull Request on GitHub targeting the main branch with a clear description of your changes.