Installation

The steps are the same for orbix-vue/ (full template) and orbix-vue-starterkit/ (starter kit).

1. Copy the project

Extract the ZIP and copy orbix-vue/ to your projects folder (rename it as you like). Open a terminal in that folder.

2. Install the dependencies

npm install

The design system is installed from the local folder packages/foundry-ui/ (no registry account needed). npm ci installs the exact versions of package-lock.json (recommended in CI and Docker).

3. Run the dev server

npm run dev

Open http://localhost:5173. Edits to components, styles and translations appear instantly (hot module replacement keeps the state of the page).

4. Build for production

npm run build

dist/bootstrap/ now holds the whole app: index.html, the hashed CSS and JavaScript in assets/ (one chunk per page, the font files and their licenses), the demo photos in images/, the icon sets in icon-sets/ and favicon.svg. Check it locally with npm run preview.

5. Run the tests (optional)

npm run build        # the build suite checks the production output
npm test

Deploy

Upload the contents of dist/bootstrap/ to your host. The app uses clean URLs (/apps/kanban, Vue Router with createWebHistory), so the server must answer every path that is not a file with index.html (the SPA fallback); otherwise a reload on any page other than the home page returns 404.

Netlify

Create public/_redirects (it is copied into the build) with:

/*  /index.html  200

Build command npm run build, publish directory dist/bootstrap.

Vercel

Framework preset "Vite", build command npm run build, output directory dist/bootstrap, and a vercel.json file in the project root:

{ "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }

GitHub Pages, Cloudflare Pages and other static hosts

Publish dist/bootstrap and enable the host's single-page app setting (Cloudflare Pages does it by default when there is no 404.html). On GitHub Pages, copy index.html to 404.html after the build so that deep links load the app.

Nginx

server {
  listen 80;
  server_name admin.example.com;
  root /var/www/orbix;            # contents of dist/bootstrap
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /assets/ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
}

Apache

In the virtual host or an .htaccess file next to index.html:

FallbackResource /index.html

IIS, S3 + CloudFront and others

Configure a rewrite (IIS URL Rewrite) or a custom error response (CloudFront: 403 and 404 → /index.html, status 200) that serves index.html for unknown paths.

Sub-folder

To serve the app from a sub-folder (for example https://example.com/admin/), build with the base path and point the fallback to that folder:

ORBIX_BASE=/admin/ npm run build          # Windows PowerShell: $env:ORBIX_BASE="/admin/"; npm run build

The base path is Vite's base option: Vue Router's history, every <AppLink>, image and asset URL follow it. Nginx: location /admin/ { try_files $uri $uri/ /admin/index.html; }. Apache: FallbackResource /admin/index.html.

Docker

A two-stage image: build with Node.js, serve with Nginx. Save as Dockerfile in the project folder:

# Build
FROM node:24-alpine AS build
WORKDIR /app
COPY . .
RUN npm ci && npm run build

# Serve
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist/bootstrap /usr/share/nginx/html
EXPOSE 80

and nginx.conf next to it:

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;
  location / { try_files $uri $uri/ /index.html; }
  location /assets/ { expires 1y; add_header Cache-Control "public, immutable"; }
}

Then docker build -t orbix-admin . and docker run -p 8080:80 orbix-admin (open http://localhost:8080). Add a .dockerignore with node_modules and dist to keep the build context small. For a sub-folder, use RUN npm ci && ORBIX_BASE=/admin/ npm run build and copy the files into /usr/share/nginx/html/admin.

Troubleshooting