### Start WebVirtCloud Controller

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcloud/README.md

Start the WebVirtCloud controller service using the provided script. This command initiates the application after setup and configuration.

```bash
./webvirtcloud.sh start
```

--------------------------------

### Install WebVirtCompute Daemon

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcompute/README.md

Installs the WebVirtCompute daemon by downloading and executing the official installation script.

```bash
curl -fsSL https://raw.githubusercontent.com/webvirtcloud/webvirtcompute/master/scripts/install.sh | sudo bash
```

--------------------------------

### Install Dependencies

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/email/README.md

Navigate into your project directory and install the necessary dependencies using npm.

```bash
cd my-project

npm install
```

--------------------------------

### Install Dependencies and Run Exporter

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/prometheus-libvirt-exporter/README.md

Installs the required Python packages and starts the Prometheus libvirt exporter. Ensure you have Python 3.6+ and libvirt installed.

```bash
pip install -r requirements.txt
python3 prometheus-libvirt-exporter.py
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/README.md

Installs all necessary project dependencies using npm. This command should be run before starting development or building the project.

```bash
npm i
```

--------------------------------

### Install and Configure Libvirt

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcompute/README.md

Downloads and executes a script to install and configure libvirt with qemu:///system URI. Ensure bridges 'br-ext' and 'br-int' are set up beforehand.

```bash
curl -fsSL https://raw.githubusercontent.com/webvirtcloud/webvirtcompute/master/scripts/libvirt.sh | sudo bash
```

--------------------------------

### Clone WebVirtBackend Repository

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/README.md

Clone the WebVirtBackend repository from GitHub to start the installation process.

```bash
git clone https://github.com/oneclickvirt/webvirtcloud.git
```

--------------------------------

### Run WebVirtCloud Setup Script

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/www/content/docs/installation/setup-controller.mdx

Executes the setup script to configure environment variables for WebVirtCloud. You will be prompted to enter your domain or IP address for HTTP access.

```bash
./webvirtcloud.sh env
```

--------------------------------

### Run Development Server

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/www/README.md

Commands to start the Next.js development server using npm, yarn, or pnpm.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

--------------------------------

### Install NetworkManager and firewalld on Ubuntu

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcompute/README.md

Installs necessary networking packages for Ubuntu Beta releases. Ensure NetworkManager is set as the renderer in netplan configuration.

```bash
sudo apt install -y network-manager firewalld
```

--------------------------------

### Install NetworkManager and firewalld on Debian

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcompute/README.md

Installs required packages for Debian 12 Beta. Also installs curl for script downloads.

```bash
sudo apt install -y curl network-manager firewalld
```

--------------------------------

### Run Development Server with npm

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/README.md

Starts the development server for the project. This command is used for local development and testing.

```bash
npm run dev
```

--------------------------------

### Install and Configure Prometheus

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcompute/README.md

Downloads and executes a script to install and configure Prometheus with node_exporter and libvirt_exporter. Settings for Prometheus can be adjusted as needed.

```bash
curl -fsSL https://raw.githubusercontent.com/webvirtcloud/webvirtcompute/master/scripts/prometheus.sh | sudo bash
```

--------------------------------

### Enable and Start Firewalld Service

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcompute/README.md

Enables and starts the firewalld service to manage firewall rules.

```bash
systemctl enable --now firewalld
```

--------------------------------

### Prometheus libvirt Exporter Metrics

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/prometheus-libvirt-exporter/README.md

Example output showing the metrics exposed by the Prometheus libvirt exporter. These metrics include libvirt status, domain information, CPU time, memory usage, and block I/O statistics.

```text
# HELP libvirt_up Whether scraping libvirt's metrics was successful
# TYPE libvirt_up gauge
libvirt_up 1.0
# HELP libvirt_domain_info_state Current state 0 - inactive; 1 - active, 2 - paused
# TYPE libvirt_domain_info_state gauge
libvirt_domain_info_state{domain="instance-911"} 1.0
# HELP libvirt_domain_info_cpu_time_total CPU time spent by the domain in nanoseconds
# TYPE libvirt_domain_info_cpu_time_total counter
libvirt_domain_info_cpu_time_total{domain="instance-911"} 1.52068273e+011
# HELP libvirt_domain_info_cpu_time_created CPU time spent by the domain in nanoseconds
# TYPE libvirt_domain_info_cpu_time_created gauge
libvirt_domain_info_cpu_time_created{domain="instance-911"} 1.7121748834579952e+09
# HELP libvirt_domain_info_cpu_time_user_total CPU time spent by the domain in user mode
# TYPE libvirt_domain_info_cpu_time_user_total counter
libvirt_domain_info_cpu_time_user_total{domain="instance-911"} 1.19966803e+011
# HELP libvirt_domain_info_cpu_time_user_created CPU time spent by the domain in user mode
# TYPE libvirt_domain_info_cpu_time_user_created gauge
libvirt_domain_info_cpu_time_user_created{domain="instance-911"} 1.7121748834580069e+09
# HELP libvirt_domain_info_cpu_time_system_total CPU time spent by the domain in system mode
# TYPE libvirt_domain_info_cpu_time_system_total counter
libvirt_domain_info_cpu_time_system_total{domain="instance-911"} 3.2101467e+010
# HELP libvirt_domain_info_cpu_time_system_created CPU time spent by the domain in system mode
# TYPE libvirt_domain_info_cpu_time_system_created gauge
libvirt_domain_info_cpu_time_system_created{domain="instance-911"} 1.712174883458012e+09
# HELP libvirt_domain_info_memory_actual Actual memory usage of the domain
# TYPE libvirt_domain_info_memory_actual gauge
libvirt_domain_info_memory_actual{domain="instance-911"} 8.388608e+06
# HELP libvirt_domain_info_memory_usable Usable memory of the domain
# TYPE libvirt_domain_info_memory_usable gauge
libvirt_domain_info_memory_usable{domain="instance-911"} 7.855912e+06
# HELP libvirt_domain_info_memory_unused Unused memory of the domain
# TYPE libvirt_domain_info_memory_unused gauge
libvirt_domain_info_memory_unused{domain="instance-911"} 7.959572e+06
# HELP libvirt_domain_info_memory_available Available memory of the domain
# TYPE libvirt_domain_info_memory_available gauge
libvirt_domain_info_memory_available{domain="instance-911"} 8.150676e+06
# HELP libvirt_domain_info_block_read_bytes_total Bytes read per second
# TYPE libvirt_domain_info_block_read_bytes_total counter
libvirt_domain_info_block_read_bytes_total{dev="vda",domain="instance-911"} 3.382222848e+09
# HELP libvirt_domain_info_block_read_bytes_created Bytes read per second
# TYPE libvirt_domain_info_block_read_bytes_created gauge
libvirt_domain_info_block_read_bytes_created{dev="vda",domain="instance-911"} 1.7121748834624734e+09
# HELP libvirt_domain_info_block_read_requests_total Read requests per second
# TYPE libvirt_domain_info_block_read_requests_total counter
libvirt_domain_info_block_read_requests_total{dev="vda",domain="instance-911"} 62848.0
# HELP libvirt_domain_info_block_read_requests_created Read requests per second
# TYPE libvirt_domain_info_block_read_requests_created gauge
libvirt_domain_info_block_read_requests_created{dev="vda",domain="instance-911"} 1.7121748834624846e+09
# HELP libvirt_domain_info_block_write_bytes_total Bytes written per second
# TYPE libvirt_domain_info_block_write_bytes_total counter
libvirt_domain_info_block_write_bytes_total{dev="vda",domain="instance-911"} 9.54433536e+08
# HELP libvirt_domain_info_block_write_bytes_created Bytes written per second
# TYPE libvirt_domain_info_block_write_bytes_created gauge
libvirt_domain_info_block_write_bytes_created{dev="vda",domain="instance-911"} 1.7121748834624906e+09
# HELP libvirt_domain_info_block_write_requests_total Write requests per second
# TYPE libvirt_domain_info_block_write_requests_total counter
libvirt_domain_info_block_write_requests_total{dev="vda",domain="instance-911"} 3776.0
# HELP libvirt_domain_info_block_write_requests_created Write requests per second
```

--------------------------------

### Create and Setup br-ext Bridge

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcompute/README.md

Configures the 'br-ext' bridge for public networks, including IP addressing for floating IPs and metadata services. Ensure to replace placeholder interface names and IP addresses with your actual network configuration.

```bash
nmcli conn add type bridge ifname br-ext con-name br-ext
nmcli conn add type bridge-slave ifname eno1 con-name eno1 master br-ext # NEED TO CHANGE eno1 ON YOUR INTERFACE NAME
nmcli conn modify br-ext ipv4.method manual ipv4.addresses 10.255.0.1/16 # for floating IP feature - DO NOT CHANGE
nmcli conn modify br-ext ipv4.method manual +ipv4.addresses 169.254.169.254/16 # for metadata service - DO NOT CHANGE
nmcli conn modify br-ext ipv4.method manual +ipv4.addresses 192.168.50.10/24 # NEED TO CHANGE 192.168.50.10/24 ON YOUR CIDR
nmcli conn modify br-ext ipv4.method manual ipv4.gateway 192.168.50.1 # NEED TO CHANGE 192.168.50.1 ON YOUR GATEWAY IP
nmcli conn modify br-ext ipv4.method manual ipv4.dns 8.8.8.8,1.1.1.1
nmcli conn modify br-ext bridge.stp no
nmcli conn modify br-ext 802-3-ethernet.mtu 1500
nmcli conn up eno1 # NEED TO CHANGE eno1 ON YOUR INTERFACE NAME
nmcli conn up br-ext
```

--------------------------------

### Run Docker Container

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/README.md

Start the WebVirtBackend Docker container in detached mode.

```bash
docker compose up -d
```

--------------------------------

### Enable Load Balancer Feature

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/www/content/docs/installation/setup-controller.mdx

Appends a line to the `custom.env` file to manually enable the Load Balancer feature for the client side. This is only necessary if you are enabling it after an initial installation.

```bash
echo "VITE_LOADBALANCER=true" >> custom.env
```

--------------------------------

### Access WebVirtBackend API

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/README.md

Example cURL request to access the WebVirtBackend API, demonstrating authentication with a bearer token.

```bash
curl -H "Authorization: Bearer fcc69bfad35527d087bf22a8a84a4f6c3b75387877c78ae3050e9e8036ef" http://localhost:8000/api/v1/virtances/
```

--------------------------------

### Create and Setup br-int Bridge

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcompute/README.md

Configures the 'br-int' bridge for private networks. IP addresses are not set for this bridge. Ensure to replace placeholder interface names with your actual network configuration.

```bash
nmcli conn add type bridge ifname br-int con-name br-int ipv4.method disabled ipv6.method ignore
nmcli conn add type bridge-slave ifname eno2 con-name eno2 master br-int # NEED TO CHANGE eno2 ON YOUR INTERFACE NAME
nmcli conn modify br-int bridge.stp no
nmcli conn modify br-int 802-3-ethernet.mtu 1500
nmcli conn up eno2 # NEED TO CHANGE eno2 ON YOUR INTERFACE NAME
nmcli conn up br-int
```

--------------------------------

### Clone Maizzle Starter Project

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/email/README.md

Use this command to clone the Maizzle starter project to begin building HTML emails.

```bash
npx degit maizzle/maizzle my-project
```

--------------------------------

### Configure Base Firewall Rules for WebVirtCompute

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcompute/README.md

Sets up essential firewall rules for WebVirtCompute, including bridging, floating IP, and cloud-init metadata service access. Remember to replace <Controller IP> with your controller's actual IP address.

```bash
CONTROLLER_IP=<Controller IP> # put controller IP here
firewall-cmd --permanent --direct --add-rule ipv4 filter FORWARD 1 -m physdev --physdev-is-bridged -j ACCEPT # Bridge traffic rule
firewall-cmd --permanent --direct --add-rule ipv4 nat POSTROUTING 0 -d 10.255.0.0/16 -j MASQUERADE # Floating IP feature rule
firewall-cmd --permanent --direct --add-rule ipv4 nat PREROUTING 0 -i br-ext '!' -s 169.254.0.0/16 -d 169.254.169.254 -p tcp -m tcp --dport 80 -j DNAT --to-destination $CONTROLLER_IP:80 # CLoud-init metadata service rule
firewall-cmd --permanent --zone=trusted --add-source=169.254.0.0/16 # Move cloud-init metadata service to trusted zone
firewall-cmd --permanent --zone=trusted --add-interface=br-ext # Move br-ext to trusted zone
firewall-cmd --permanent --zone=trusted --add-interface=br-int # Move br-int to trusted zone
firewall-cmd --reload
```

--------------------------------

### Build WebVirtCompute Daemon from Source (RHEL 9)

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcompute/README.md

Builds the WebVirtCompute daemon from source using make commands specific to RHEL 9.

```bash
make -f Makefile.rhel9 build
make -f Makefile.rhel9 compile
make -f Makefile.rhel9 package
```

--------------------------------

### Load Initial Data

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/README.md

Load initial data into the database for WebVirtBackend using a Django management command.

```bash
docker compose exec backend python3 manage.py loaddata initial_data
```

--------------------------------

### Build WebVirtCompute from Source (Rocky Linux 8)

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/www/content/docs/installation/setup-hypervisor.mdx

Compiles and packages the WebVirtCompute daemon from its source code specifically for Rocky Linux 8. The resulting archive will be in the 'release' directory.

```bash
make -f Makefile.rockylinux8 compile
```

```bash
make -f Makefile.rockylinux8 package
```

--------------------------------

### Enable and Configure Firewall Rules

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/www/content/docs/installation/setup-hypervisor.mdx

Enables the firewalld service and applies base firewall rules for bridge traffic, floating IP, and cloud-init metadata service. Replace '<you backend IP>' with your actual backend IP address.

```bash
WEBVIRTBACKED_IP=<you backend IP> # need put your backend IP
firewall-cmd --permanent --direct --add-rule ipv4 filter FORWARD 1 -m physdev --physdev-is-bridged -j ACCEPT # Bridge traffic rule
firewall-cmd --permanent --direct --add-rule ipv4 nat POSTROUTING 0 -d 10.255.0.0/16 -j MASQUERADE # Floating IP feature rule
firewall-cmd --permanent --direct --add-rule ipv4 nat PREROUTING 0 -i br-ext '!' -s 169.254.0.0/16 -d 169.254.169.254 -p tcp -m tcp --dport 80 -j DNAT --to-destination $WEBVIRTBACKED_IP:80 # CLoud-init metadata service rule
firewall-cmd --permanent --zone=trusted --add-source=169.254.0.0/16 # Move cloud-init metadata service to trusted zone
firewall-cmd --permanent --zone=trusted --add-interface=br-ext # Move br-ext to trusted zone
firewall-cmd --permanent --zone=trusted --add-interface=br-int # Move br-int to trusted zone
firewall-cmd --reload
```

--------------------------------

### Build for Production with npm

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/README.md

Compiles and bundles the project for production deployment. This command should be used before deploying the application.

```bash
npm run build
```

--------------------------------

### Build Docker Image

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/README.md

Build the Docker image for the WebVirtBackend application using Docker Compose.

```bash
docker compose build
```

--------------------------------

### Load Admin User Fixture

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/README.md

Load the admin user fixture to set up an administrator account for WebVirtBackend.

```bash
docker compose exec backend python3 manage.py loaddata account/fixtures/admin.json
```

--------------------------------

### Navigate to WebVirtBackend Directory

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/README.md

Change the current directory to the webvirtbackend folder within the cloned repository.

```bash
cd webvirtcloud/webvirtbackend/
```

--------------------------------

### Run QEMU Playbook on macOS

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcompute/ansible/compute/README.md

Executes an Ansible playbook for QEMU on macOS. Ensure you have the correct private key, user, and inventory file specified.

```bash
$ ansible-playbook --private-key insecure_private_key -u vagrant -b -i hosts.qemu playbook.yml
```

--------------------------------

### Run Database Migrations

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/README.md

Execute database migrations for the WebVirtBackend application within the running Docker container.

```bash
docker compose exec backend python3 manage.py migrate
```

--------------------------------

### Load Test User Fixture

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/README.md

Load the test user fixture for development purposes in WebVirtBackend.

```bash
docker compose exec backend python3 manage.py loaddata account/fixtures/user.json
```

--------------------------------

### Including Input Handling Partial

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/theme/templates/webvirtcloud/table_inline_formset.html

Includes a partial template named 'webvirtcloud/inputs.html'. This likely contains common input handling logic or additional input elements used across forms.

```html
{% include "webvirtcloud/inputs.html" %}
```

--------------------------------

### Navigate to WebVirtCloud Directory

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/www/content/docs/installation/setup-controller.mdx

Change your current directory to the cloned webvirtcloud repository to access its scripts and configuration files.

```bash
cd webvirtcloud
```

--------------------------------

### Load Data for WebVirtCloud

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcloud/README.md

Load necessary data, such as new features or templates, into the WebVirtCloud application.

```bash
./webvirtcloud.sh loaddata
```

--------------------------------

### Configure Email Environment Variables

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcloud/README.md

Set up email-related environment variables in the env.local file for sending notifications or other email communications from WebVirtCloud.

```bash
# Email environment variables
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_HOST_USER=admin
EMAIL_HOST_PASSWORD=admin
EMAIL_USE_TLS=True
EMAIL_FROM="WebVirtCloud <noreply@gmail.com>"
```

--------------------------------

### noVNC RFB API Initialization and Event Listeners

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/templates/admin/virtance/console.html

Initializes the RFB object for noVNC, establishes a WebSocket connection to the VNC server, and sets up event listeners for connection status, credentials, and desktop name updates. It reads connection parameters from the URL and server configuration.

```javascript
// RFB holds the API to connect and communicate with a VNC server
import RFB from '{% static "admin/novnc/js/rfb.js" %}';
let rfb;
let desktopName;

// When this function is called we have
// successfully connected to a server
function connectedToServer(e) {
    status("Connected to " + desktopName);
}

// This function is called when we are disconnected
function disconnectedFromServer(e) {
    if (e.detail.clean) {
        status("Disconnected");
    } else {
        status("Something went wrong, connection is closed");
    }
}

// When this function is called, the server requires
// credentials to authenticate
function credentialsAreRequired(e) {
    const password = prompt("Password Required:");
    rfb.sendCredentials({ password: password });
}

// When this function is called we have received
// a desktop name from the server
function updateDesktopName(e) {
    desktopName = e.detail.name;
}

// Since most operating systems will catch Ctrl+Alt+Del
// before they get a chance to be intercepted by the browser,
// we provide a way to emulate this key sequence.
function sendCtrlAltDel() {
    rfb.sendCtrlAltDel();
    return false;
}

// Show a status text in the top bar
function status(text) {
    document.getElementById('status').textContent = text;
}

// This function extracts the value of one variable from the
// query string. If the variable isn't defined in the URL
// it returns the default value instead.
function readQueryVariable(name, defaultValue) {
    // A URL with a query parameter can look like this (But will most probably get logged on the http server):
    // https://www.example.com?myqueryparam=myvalue
    //
    // For privacy (Using a hastag #, the parameters will not be sent to the server)
    // the url can be requested in the following way:
    // https://www.example.com#myqueryparam=myvalue&password=secreatvalue
    //
    // Even Mixing public and non public parameters will work:
    // https://www.example.com?nonsecretparam=example.com#password=secreatvalue
    //
    // Note that we use location.href instead of location.search
    // because Firefox < 53 has a bug w.r.t location.search
    const re = new RegExp('.\[?&\],' + name + '=(\[^&#\]\*)'), match = ''.concat(document.location.href, window.location.hash).match(re);
    if (match) {
        // We have to decode the URL since want the cleartext value
        return decodeURIComponent(match[1]);
    }
    return defaultValue;
}

document.getElementById('sendCtrlAltDelButton')
    .onclick = sendCtrlAltDel;

// Read parameters specified in the URL query string
// By default, use the host and port of server that served this file
const host = '{{ console_host }}';
let port = '{{ console_port }}';
const password = '{{ vnc_password }}';

// | | | | | | //
// | | | Connect | | | //
// v v v v v v
status("Connecting");

// Build the websocket URL used to connect
let url;
if (window.location.protocol === "https:") {
    url = 'wss';
} else {
    url = 'ws';
}
url += '://' + host;
if(port) {
    url += ':' + port;
}

// Creating a new RFB object will start a new connection
rfb = new RFB(document.getElementById('screen'), url, {
    credentials: {
        password: password
    }
});

// Add listeners to important events from the RFB module
rfb.addEventListener("connect", connectedToServer);
rfb.addEventListener("disconnect", disconnectedFromServer);
rfb.addEventListener("credentialsrequired", credentialsAreRequired);
rfb.addEventListener("desktopname", updateDesktopName);

// Set parameters that can be changed on an active connection
rfb.viewOnly = readQueryVariable('view_only', false);
rfb.scaleViewport = readQueryVariable('scale', false);

```

--------------------------------

### Update WebVirtCompute Daemon

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcompute/README.md

Updates the WebVirtCompute daemon by downloading and executing the official update script.

```bash
curl -fsSL https://raw.githubusercontent.com/webvirtcloud/webvirtcompute/master/scripts/update.sh | sudo bash
```

--------------------------------

### Configure Netplan for NetworkManager on Ubuntu

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcompute/README.md

Sets NetworkManager as the network renderer in Ubuntu's netplan configuration. This is a required step for Ubuntu Beta releases.

```yaml
network:
  version: 2
  renderer: NetworkManager
```

--------------------------------

### Clone WebVirtCloud Repository

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcloud/README.md

Clone the WebVirtCloud project repository to your local machine.

```bash
git clone https://github.com/webvirtcloud/webvirtcloud.git
cd webvirtcloud
```

--------------------------------

### Configure NetworkManager for Debian

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcompute/README.md

Enables managed mode in NetworkManager's configuration file for Debian 12 Beta. Restart the server to apply changes.

```conf
[main]
plugins=ifupdown,keyfile

[ifupdown]
managed=true
```

--------------------------------

### Including Form Display Partial

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/theme/templates/webvirtcloud/whole_uni_form.html

Includes the `display_form.html` partial, which likely contains the main structure and fields for displaying the form.

```html
{% include "webvirtcloud/display_form.html" %}
```

--------------------------------

### Theme Management Script

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/templates/admin/theme-script.html

This script manages the application's theme by reading from local storage, listening to system preference changes, and applying the selected theme to the root element. It also handles user interactions with theme toggles.

```javascript
const theme = localStorage.getItem("theme") || "system";
const prefersQuery = window.matchMedia("(prefers-color-scheme: dark)");
const root = document.documentElement;

function setTheme(theme) {
    root.setAttribute("data-theme", theme);
}

prefersQuery.addEventListener("change", (e) => {
    if ( localStorage.getItem("theme") === "system" || !localStorage.getItem("theme") ) {
        setTheme(e.matches ? "dark" : "light");
    }
});

if (theme === "system" || !theme) {
    setTheme(prefersQuery.matches ? "dark" : "light");
} else {
    setTheme(theme);
}

document.addEventListener("DOMContentLoaded", () => {
    const toggleEls = document.querySelectorAll("[data-theme-toggle]");
    toggleEls.forEach((el) => el.addEventListener("click", () => {
        const newTheme = el.getAttribute("data-theme-toggle");
        if (newTheme === "system") {
            setTheme(prefersQuery.matches ? "dark" : "light");
            localStorage.setItem("theme", newTheme);
            return;
        }
        setTheme(newTheme);
        localStorage.setItem("theme", newTheme);
    }));
});
```

--------------------------------

### Copy Caddyfile for Non-TLS

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/www/content/docs/installation/setup-controller.mdx

Copies the Caddyfile template for non-TLS configuration to be used as the main Caddy configuration file.

```bash
cp Caddyfile.noncert Caddyfile
```

--------------------------------

### WebVirtBackend API Endpoints

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/README.md

The WebVirtBackend API provides endpoints for managing virtual machines. Authentication is required using a Bearer token.

```APIDOC
## API Endpoints

### Description
Provides access to manage virtual machines.

### Base URL
`http://localhost:8000/api/v1/`

### Authentication
Requires an `Authorization` header with a Bearer token.
Example: `Authorization: Bearer <your_token>`

### Endpoints

#### List Virtual Machines

##### Method
`GET`

##### Endpoint
`/virtances/`

##### Parameters
None

##### Request Example
```bash
curl -H "Authorization: Bearer fcc69bfad35527d087bf22a8a84a4f6c3b75387877c78ae3050e9e8036ef" http://localhost:8000/api/v1/virtances/
```

#### Create Virtual Machine

##### Method
`POST`

##### Endpoint
`/virtances/`

##### Request Body
(Schema not provided in source)

#### Delete Virtual Machine

##### Method
`DELETE`

##### Endpoint
`/virtances/{id}/` (where {id} is the virtual machine ID)

##### Parameters
* **id** (integer) - Required - The ID of the virtual machine to delete.

#### Manage Virtual Machines

##### Description
Endpoints for creating, deleting, and managing virtual machines are available.

(Note: Specific details for create/manage operations beyond listing and deleting are not explicitly detailed in the provided source, but are implied by the general description.)
```

--------------------------------

### Run Specific App with Turbo

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/README.md

Executes a specific application within the turborepo, such as the 'web' app, for development. This is useful for focusing on a single part of the monorepo.

```bash
npx turbo dev --filter web
```

--------------------------------

### Pagination Range

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/templates/django_tables2/bootstrap.html

Renders the page number links for pagination, iterating through the available page range.

```html
{% block pagination.range %}
    {% for p in table.page|table_page_range:table.paginator %}*   {{ p }}
{% endfor %}
{% endblock pagination.range %}
```

--------------------------------

### Generate Self-Signed TLS Certificate for Caddy

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcloud/README.md

Generate a self-signed TLS certificate for Caddy to secure the WebVirtCloud interface. This is useful for local development or testing when a valid domain name is available via services like nip.io.

```bash
mkdir -p .caddy/certs
openssl req -x509 -newkey rsa:4096 -keyout .caddy/certs/key.pem -out .caddy/certs/cert.pem -days 365 -nodes -subj "/CN=webvirtcloud-192-168-0-114.nip.io"
cp Caddyfile.selfsigned Caddyfile
```

--------------------------------

### Generate Self-Signed SSL Certificate

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/www/content/docs/installation/setup-controller.mdx

Creates a directory for Caddy certificates and generates a self-signed SSL certificate using OpenSSL for secure communication. This is useful for local development or testing environments.

```bash
# Create the directory structure for Caddy certificates
mkdir -p .caddy/certs

# Generate a self-signed SSL certificate using OpenSSL
openssl req -x509 \
    -newkey rsa:4096 \
    -keyout .caddy/certs/key.pem \
    -out .caddy/certs/cert.pem \
    -days 365 \
    -nodes \
    -subj "/CN=webvirtcloud-192-168-0-114.nip.io"
```

--------------------------------

### Update WebVirtCloud Controller

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcloud/README.md

Update the WebVirtCloud controller to the latest version using the update script.

```bash
./webvirtcloud.sh update
```

--------------------------------

### v-fill Component Configuration

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/email/src/components/v-fill.html

Defines default width and image source for the v-fill component. Use these properties to customize the component's appearance and behavior.

```javascript
module.exports = { width: props.width || '600px', image: props.image || 'https://via.placeholder.com/600x400' }
```

--------------------------------

### Add Extra Requirements

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtcloud/README.md

Specify additional Python packages required by the project by adding them to the extra-requirements.txt file.

```plaintext
sentry-sdk
```

--------------------------------

### Pagination Next Button

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/templates/django_tables2/bootstrap.html

Renders the 'next' button for pagination, including translation and arrow symbols.

```html
{% block pagination.next %}*   {% trans 'next' %} »
{% endblock pagination.next %}
```

--------------------------------

### Copy Caddyfile for Self-Signed TLS

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/www/content/docs/installation/setup-controller.mdx

Copies the Caddyfile template for self-signed certificates to be used as the main Caddy configuration file.

```bash
cp Caddyfile.selfsigned Caddyfile
```

--------------------------------

### Pagination Previous Button

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/templates/django_tables2/bootstrap.html

Renders the 'previous' button for pagination, including translation and arrow symbols.

```html
{% block pagination.previous %}*   « {% trans 'previous' %}
{% endblock pagination.previous %}
```

--------------------------------

### Table Header Rendering

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/templates/django_tables2/bootstrap.html

Renders the table header row by iterating through columns if the table header is set to be shown.

```html
{% extends "django_tables2/bootstrap4.html" %}
{% load django_tables2 %}
{% load i18n %}

{% block table.thead %}
    {% if table.show_header %}
        {% for column in table.columns %}
            {{ column.header }}
        {% endfor %}
    {% endif %}
{% endblock table.thead %}
```

--------------------------------

### Dark Mode Theme Toggle Logic

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/web/index.html

Applies dark mode if preferred by the user or system. Listens for system preference changes to update the theme dynamically when no explicit user preference is set.

```javascript
try { if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark') } else { document.documentElement.classList.remove('dark') } window .matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', function (event) { if (!("theme" in localStorage)) { event.matches ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"); } }); } catch (_) { }
```

--------------------------------

### Spacer Component Configuration

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/email/src/components/spacer.html

Configuration for the Spacer component, defining height and MSO height properties. Use this to control vertical spacing in email templates.

```javascript
module.exports = {
  height: props.height,
  msoHeight: props['mso-height'],
}
```

--------------------------------

### Network Filter XML Configuration

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/templates/admin/compute/nwfilters/nwfilter.html

Displays the raw XML content of the network filter. This is the primary configuration for the filter.

```html
{% extends "admin/base.html" %} {% load static %} {% load crispy_forms_tags %} {% block content %}

[Back to the list]({% url 'admin_compute_nwfilters' compute.id %})

NwFilter {{ nwfilter.name }}
----------------------------

`   {{ nwfilter.xml }}   `

{% endblock %}
```

--------------------------------

### Include Management Form and Loop Through Formset

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/theme/templates/webvirtcloud/uni_formset.html

This snippet shows how to include the management form for a formset and then loop through each form in the formset, including a common template for each individual form.

```django
{% with formset.management_form as form %} {% include 'webvirtcloud/uni_form.html' %} {% endwith %} {% for form in formset %}

{% include 'webvirtcloud/uni_form.html' %}

{% endfor %}
```

--------------------------------

### v-image Default Properties

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/email/src/components/v-image.html

Defines the default width, height, and image source for the v-image component. These can be overridden by component props.

```javascript
module.exports = { width: props.width || '600px', height: props.height || '400px', image: props.image || 'https://via.placeholder.com/600x400' }
```

--------------------------------

### Rendering Formset Fields in Table Cells

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/theme/templates/webvirtcloud/table_inline_formset.html

Iterates through each form in the formset and then through each field within the form, rendering them within table data cells (<td>). It uses a 'webvirtcloud/field.html' partial for rendering individual fields, with specific classes applied.

```html
{% for form in formset %}
    {% if form_show_errors and not form.is_extra %}
        {% include "webvirtcloud/errors.html" %}
    {% endif %}
    {% for field in form %}
        {% include 'webvirtcloud/field.html' with tag="td" form_show_labels=False field_class="border px-4 py-2" %}
    {% endfor %}
{% endfor %}
```

--------------------------------

### Pagination Range Rendering

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/templates/django_tables2/bootstrap_no_query.html

Renders the page number links for the pagination control. This block iterates through the available page numbers.

```html
{% block pagination.range %} {% for p in table.page|table_page_range:table.paginator %}*   {{ p }}
{% endfor %} {% endblock pagination.range %}
```

--------------------------------

### Email Button JavaScript Configuration

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/email/src/components/button.html

This JavaScript module exports a configuration object for the email button. It defines alignment, href, and margin properties, with default values for MSO (Microsoft Office) specific styling.

```javascript
module.exports = {
  align: { left: 'text-left', center: 'text-center', right: 'text-right', }[props.align],
  href: props.href,
  msoPt: props['mso-pt'] || '16px',
  msoPr: props['mso-pr'] || '32px',
  msoPb: props['mso-pb'] || '30px',
  msoPl: props['mso-pl'] || '32px',
};
```

--------------------------------

### Divider Component Configuration

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/email/src/components/divider.html

Configuration object for the Divider component, defining its visual properties and spacing. Use this to customize the appearance of dividers in email templates.

```javascript
module.exports = {
  height: props.height || '1px',
  color: props.color,
  // any CSS color value
  top: props.top,
  // top margin
  bottom: props.bottom,
  // bottom margin
  left: props.left,
  // left margin
  right: props.right,
  // right margin
  spaceY: props['space-y'] || '24px',
  // top and bottom margin
  spaceX: props['space-x'],
  // right and left margin
  hasBgClass: props.class && props.class.split(' ').some(c => c.startsWith('bg-'))
}
```

--------------------------------

### Table Body Row Rendering

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/templates/django_tables2/bootstrap.html

Renders the table body rows by iterating through paginated rows and then through each cell within a row.

```html
{% block table.tbody %}
    {% for row in table.paginated_rows %}
        {% block table.tbody.row %}
            {% for column, cell in row.items %}
                {% if column.localize == None %}{{ cell }}{% else %}{% if column.localize %}{{ cell|localize }}{% else %}{{ cell|unlocalize }}{% endif %}{% endif %}
            {% endfor %}
        {% endblock table.tbody.row %}
    {% empty %}
        {% if table.empty_text %}
            {% block table.tbody.empty_text %}
                {{ table.empty_text }}
            {% endblock table.tbody.empty_text %}
        {% else %}

No results found

Try changing your search query or adding a new record.

        {% endif %}
    {% endfor %}
{% endblock table.tbody %}
```

--------------------------------

### Displaying Formset Errors

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/theme/templates/webvirtcloud/table_inline_formset.html

Includes a template for displaying errors associated with the formset. This is typically used before rendering the form fields.

```html
{% include "webvirtcloud/errors_formset.html" %}
```

--------------------------------

### Previous Pagination Link

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/templates/django_tables2/bootstrap_no_query.html

Customizes the rendering of the 'previous' pagination link. Use this to change the text or appearance of the previous page button.

```html
{# Pagination block overrides #}
{% block pagination.previous %}*   « {% trans 'previous' %}
{% endblock pagination.previous %}
```

--------------------------------

### Conditional Field Rendering in WebVirtCloud

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/theme/templates/webvirtcloud/field.html

This snippet shows the main logic for rendering a form field. It handles hidden fields, wrapper divs, labels, and delegates rendering to specific templates for different field types or uses the `tailwind_field` tag for others.

```html
{% load tailwind_field %}
{% if field.is_hidden %}
    {{ field }}
{% else %}
    {# Opening Div and Label first #}
    <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if wrapper_class %}{{ wrapper_class }} {% endif %}{% if field_class %}{{ field_class }}{% else %}mb-3{% endif %}">
        {% if field.label and form_show_labels %}
            {{ field.label|safe }}{% if field.field.required %}*{% endif %}
        {% endif %}
        {# if field has a special template then use this #}
        {% if field|is_select %}
            {% include 'webvirtcloud/layout/select.html' %}
        {% elif field|is_radioselect %}
            {% include 'webvirtcloud/layout/radioselect.html' %}
        {% elif field|is_checkboxselectmultiple %}
            {% include 'webvirtcloud/layout/checkboxselectmultiple.html' %}
        {% else %}
            {# otherwise use django rendering with additional classes added #}
            {% tailwind_field field %}
        {% endif %}
        {% include 'webvirtcloud/layout/help_text_and_errors.html' %}
    {% endif %}
```

--------------------------------

### Django Template Tags for Formset Rendering

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/theme/templates/webvirtcloud/table_inline_formset.html

Loads necessary template tags for crispy forms and Tailwind CSS fields. Includes CSRF token for POST requests and renders the formset management form.

```html
{% load crispy_forms_tags %}
{% load crispy_forms_utils %}
{% load tailwind_field %}
{% specialspaceless %}
{% if formset_tag %}

{% endif %}
{% if formset_method|lower == 'post' and not disable_csrf %}
    {% csrf_token %}
{% endif %}

{{ formset.management_form|crispy }}
```

--------------------------------

### Table Body Row Rendering

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/templates/django_tables2/bootstrap_no_query.html

Renders each row in the table body by iterating through columns and cells. Customizes cell content display, including localization.

```html
{% block table.tbody %}
    {% for row in table.paginated_rows %}
        {% block table.tbody.row %}
            {% for column, cell in row.items %}
                {% if column.localize == None %}{{ cell }}{% else %}{% if column.localize %}{{ cell|localize }}{% else %}{{ cell|unlocalize }}{% endif %}{% endif %}
            {% endfor %}
        {% endblock table.tbody.row %}
    {% empty %}
        {% if table.empty_text %}
            {% block table.tbody.empty_text %}
                {{ table.empty_text }}
            {% endblock table.tbody.empty_text %}
        {% else %}

No data

        {% endif %}
    {% endfor %}
{% endblock table.tbody %}
```

--------------------------------

### Django Template Logic for Form Fields

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/theme/templates/webvirtcloud/layout/prepended_appended_text.html

This snippet shows the Django template logic for rendering form fields with optional prepended and appended text, including error handling and Tailwind CSS classes.

```html
{% load tailwind_field %}
{% if field.is_hidden %}
    {{ field }}
{% else %}

{% if field.label and form_show_labels %}
    {{ field.label|safe }}{% if field.field.required %}*{% endif %} 
{% endif %}

{% if crispy_prepended_text and not crispy_appended_text %}
    {{ crispy_prepended_text|safe }}
    {% if field.errors %}
        {% tailwind_field field "class" "border border-red-500 rounded-lg rounded-l-none px-4 py-2 w-full focus:outline-none text-gray-700 border-l-0 leading-normal" %}
    {% else %}
        {% tailwind_field field "class" "border border-gray-300 rounded-lg rounded-l-none px-4 py-2 w-full focus:outline-none text-gray-700 border-l-0 leading-normal" %}
    {% endif %}
{% elif crispy_appended_text and not crispy_prepended_text %}
    {% if field.errors %}
        {% tailwind_field field "class" "border border-red-500 rounded-lg rounded-r-none px-4 py-2 w-full focus:outline-none text-gray-700 border-r-0 leading-normal" %}
    {% else %}
        {% tailwind_field field "class" "border border-gray-300 rounded-lg rounded-r-none px-4 py-2 w-full focus:outline-none text-gray-700 border-r-0 leading-normal" %}
    {% endif %}
    {{ crispy_appended_text|safe }}
{% else %}
    {{ crispy_prepended_text|safe }}
    {% if field.errors %}
        {% tailwind_field field "class" "border border-r-0 border-l-0 border-red-500 px-4 py-2 w-full focus:outline-none text-gray-700 border-r-0 leading-normal" %}
    {% else %}
        {% tailwind_field field "class" "border border-gray-300 px-4 py-2 w-full focus:outline-none text-gray-700 border-r-0 leading-normal" %}
    {% endif %}
    {{ crispy_appended_text|safe }}
{% endif %}

{% include 'webvirtcloud/layout/field_errors.html' %}
{% include 'webvirtcloud/layout/help_text.html' %}

{% endif %}
```

--------------------------------

### Email Button HTML Structure

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtfrontend/apps/email/src/components/button.html

This is the basic HTML structure for the email button component. It uses a Vue.js template syntax to dynamically render the button based on props.

```html
  []({{ href }})
```

--------------------------------

### Conditional Rendering of Form Fields

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/theme/templates/webvirtcloud/layout/inline_field.html

Renders a form field, applying specific attributes like 'form-check-input' for checkboxes or 'placeholder' for other input types. It uses Django's template tags for conditional logic and field rendering.

```html
{% load tailwind_field %}
{% if field.is_hidden %}
    {{ field }}
{% else %}
    {% if field|is_checkbox %}
        {% crispy_field field 'class' 'form-check-input' %}
        {{ field.label|safe }}
    {% else %}
        {{ field.label|safe }}
        {% crispy_field field 'placeholder' field.label %}
    {% endif %}
{% endif %}
```

--------------------------------

### Display Form Field Errors

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/theme/templates/webvirtcloud/layout/field_errors_block.html

Use this snippet to show error messages for a form field if errors exist and the field is configured to show them. It iterates through all errors associated with the field.

```html
{% if form_show_errors and field.errors %} {% for error in field.errors %}

**{{ error }}**

{% endfor %} {% endif %}
```

--------------------------------

### Closing Formset Tag and Special Whitespace Handling

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/theme/templates/webvirtcloud/table_inline_formset.html

Closes the formset tag if it was opened earlier and uses the 'specialspaceless' tag to remove extra whitespace from the rendered output.

```html
{% if formset_tag %}{% endif %}
{% endspecialspaceless %}
```

--------------------------------

### CSRF Token Inclusion in POST Forms

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/theme/templates/webvirtcloud/whole_uni_form.html

Conditionally includes the CSRF token for forms using the POST method, unless CSRF protection is explicitly disabled.

```html
{% if form_method|lower == 'post' and not disable_csrf %}
{% csrf_token %}
{% endif %}
```

--------------------------------

### Display Form Field Errors

Source: https://github.com/oneclickvirt/webvirtcloud/blob/main/webvirtbackend/theme/templates/webvirtcloud/layout/field_errors.html

This snippet shows how to conditionally render errors for a specific form field. It iterates through each error associated with the field and displays it.

```html
{% if form_show_errors and field.errors %}
{% for error in field.errors %}

**{{ error }}**

{% endfor %}
{% endif %}
```