Copy page

Example apps

Vite (vanilla)

This example demonstrates how to run a Vite project which executes via the vite program on top of the node runtime.

Initialization

The project was instantiated via:

Code
npm create vite@latest my-vue-app -- --template vanilla

The accompanying Dockerfile and Kraftfile are necessary for deploying to Unikraft Cloud.

Deployment

To run this example, follow these steps:

1. Install the unikraft CLI. You need a BuildKit builder. The easiest way to get one is via Docker. Alternatively, you can also directly set up and use BuildKit, see the quick start.

2. Clone the examples repository and cd into the examples/httpserver-node-vite-vanilla/ directory:

   Code
   git clone https://github.com/unikraft-cloud/examples
   cd examples/httpserver-node-vite-vanilla/

Make sure to log into Unikraft Cloud and pick a metro close to you. This guide uses fra (Frankfurt, 🇩🇪):

Code
unikraft login

When done, run:

Code
unikraft build . --output <my-org>/httpserver-node-vite-vanilla:latest
unikraft run --metro fra \
  -m 4G \
  -p 443:8080/tls+http \
  --scale-to-zero policy=on,cooldown-time=2000,stateful=true \
  -e PWD=/app \
  --image <my-org>/httpserver-node-vite-vanilla:latest

The output shows the instance address and other details:

Code
metro:        fra
name:         httpserver-node-vite-vanilla-w9f3p
uuid:         4d5e6f7a-8b9c-0d1e-2f3a-d4e5f6a7b8c9
state:        starting
image:        <my-org>/httpserver-node-vite-vanilla
resources:
  memory:     4096MiB
  vcpus:      1
service:
  uuid:       5e6f7a8b-9c0d-1e2f-3a4b-e5f6a7b8c9d0
  name:       bold-rain-mv5tx8wy
  domains:
  - fqdn:     bold-rain-mv5tx8wy.fra.unikraft.app
networks:
- uuid:       6f7a8b9c-0d1e-2f3a-4b5c-f6a7b8c9d0e1
  private-ip: 10.0.5.2
  mac:        12:b0:6c:3e:ab:95
timestamps:
  created:    just now

In this case, the instance name is httpserver-node-vite-vanilla-w9f3p and the address is https://bold-rain-mv5tx8wy.fra.unikraft.app. They're different for each run.

After deploying, you can query the service using the provided URL.

You can list information about the instance by running:

Code
unikraft instances list

Code
METRO  NAME                                STATE    IMAGE                                  ARGS  MEMORY   VCPUS  FQDN                                 CREATED
fra    httpserver-node-vite-vanilla-w9f3p  running  <my-org>/httpserver-node-vite-vanilla        4096MiB  1      bold-rain-mv5tx8wy.fra.unikraft.app  2 minutes ago

When done, you can remove the instance:

Code
unikraft instances delete <instance-name>

Learn more

• NGINX's Documentation
• Vite's Documentation
• Unikraft Cloud's Documentation
• Building Dockerfile images with Buildkit
• Vite (vanilla) static build on Unikraft Cloud
• Vite (vanilla) SSR mode on Unikraft Cloud

Use the --help option for detailed information on using Unikraft Cloud:

Code
unikraft --help

Or visit the CLI Reference.