Vite HTTP Server
This example demonstrates how to run a Vite project targeting production on Unikraft Cloud.
The deployment doesn't perform any server-side rendering and instead serves the resulting artifacts statically (via npm run build) using nginx.
To use Vite in server-side rendering (SSR) mode or via the dev subcommand on a NodeJS runtime, please see the httpserver-node-vite-vanilla sibling project.
To run this example, follow these steps:
-
Install the CLI and a container runtime engine, for example Docker. Use the unikraft CLI or the legacy kraft CLI.
-
Clone the
examplesrepository andcdinto theexamples/httpserver-nginx-vite-vanilladirectory:
Code
Make sure to log into Unikraft Cloud and pick a metro close to you.
This guide uses fra (Frankfurt, 🇩🇪):
When done, invoke the following command to deploy this app on Unikraft Cloud:
The output shows the instance address and other details:
Code
In this case, the instance name is httpserver-nginx-vite-vanilla-2rk6p and the address is https://swift-lake-m4n8vqzp.fra.unikraft.app.
They're different for each run.
Use curl to query the Unikraft Cloud instance of the Vite instance:
Code
Code
You can list information about the instance by running:
Code
When done, you can remove the instance:
Customize your app
To customize the app, update the files in the repository, listed below:
Kraftfile: the Unikraft Cloud specificationDockerfile: the Docker-specified app filesystemsrc/: the Vite app source files
Lines in the Kraftfile have the following roles:
-
spec: v0.6: The currentKraftfilespecification version is0.6. -
runtime: nginx:latest: The nginx kernel to use. -
rootfs: ./Dockerfile: Build the app root filesystem using theDockerfile. -
cmd: ["/usr/bin/nginx", "-c", "/etc/nginx/nginx.conf"]: Use nginx to serve the built static files as the starting command of the instance.
Lines in the Dockerfile have the following roles:
-
FROM node:23 AS build: Build the Vite project using the Node.js 23 image. -
RUN npm ci; npm run build: Install dependencies and build the Vite project for production. -
FROM scratch: Build the runtime filesystem from a minimal base image. -
COPY --from=build /app/dist /wwwroot: nginx serves the built Vite artifacts from/wwwroot.
The following options are available for customizing the app:
-
If you only update the source files in
src/, you don't need to make any other changes. -
If you want to add extra files, you need to copy them into the filesystem using the
COPYcommand in theDockerfile. -
More extensive changes may require extending the
Dockerfile(seeDockerfilesyntax reference).
Learn more
- Nginx's Documentation
- Vite's Documentation
- Unikraft Cloud's Documentation
- Building
Dockerfileimages withBuildkit
Use the --help option for detailed information on using Unikraft Cloud:
Or visit the CLI Reference or the legacy CLI Reference.