Installation
The steps are the same for orbix-nuxt/ (full template) and orbix-nuxt-starterkit/ (starter kit).
1. Copy the project
Extract the ZIP and copy orbix-nuxt/ to your projects folder (rename it as you like). Open a terminal in that
folder.
2. Install the dependencies
npm installThe 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 devOpen http://localhost:3000. Edits to pages, components, styles and translations appear instantly (hot module
replacement).
| npm script | What it does |
|---|---|
npm run dev | Nuxt dev server with hot reload |
npm run build | Static site of the Bootstrap 5 edition into dist/bootstrap (nuxi generate: every page prerendered) |
npm run preview | Serves the static site at http://localhost:4173 like a static host (404.html for unknown URLs) |
npm run build:server | Node.js server build into .output/ (nuxi build) |
npm start | Runs the server build at http://localhost:3000 (NODE_ENV=production) |
npm run assets | Regenerates the icon sprite, the document parts and the icon sets (part of dev, build and test) |
npm run typecheck | nuxi typecheck: vue-tsc type check of the .ts and .vue files (strict) |
npm test | Type check and the Vitest suite |
4. Build for production
npm run builddist/bootstrap/ now holds the whole site: one index.html per page in a folder named like its URL
(apps/kanban/index.html), 404.html and 200.html (single-page fallbacks), the hashed CSS and JavaScript in
_nuxt/ (with the font files and their licenses), the demo photos in images/, the icon sets in icon-sets/ and
favicon.svg. Every page is real HTML rendered at build time (in English; the saved language is applied in the
browser). Check it locally with npm run preview.
5. Run the tests (optional)
npm run build # the build suite checks the generated site
npm testDeploy
Choose one of the two outputs:
| Output | Command | Runs on |
|---|---|---|
| Static site (recommended) | npm run build → dist/bootstrap/ | Any static host or web server; no Node.js on the server |
| Node.js server | npm run build:server → .output/ | Any host that runs Node.js 24 (VPS, Docker, PaaS) |
Static hosts
Upload the contents of dist/bootstrap/. Every page has its own index.html, so no rewrite rules are needed; set
404.html as the error page so that unknown URLs show the Orbix 404 page.
- Netlify: build command
npm run build, publish directorydist/bootstrap.404.htmlis used automatically. - Vercel: framework preset "Other", build command
npm run build, output directorydist/bootstrap. - Cloudflare Pages: build command
npm run build, output directorydist/bootstrap.404.htmlis used automatically. - GitHub Pages: publish
dist/bootstrapand add an empty.nojekyllfile next toindex.html(otherwise the_nuxt/folder is ignored).404.htmlis used automatically. - S3 + CloudFront: upload the folder, set
index.htmlas the default root object,404.htmlas the error document (S3 website hosting) or a custom error response (CloudFront: 404 →/404.html, status 404).
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/ $uri/index.html =404;
}
error_page 404 /404.html;
location /_nuxt/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}Apache
In the virtual host or an .htaccess file next to index.html:
DirectoryIndex index.html
ErrorDocument 404 /404.htmlIIS
Add index.html as a default document and a custom error page for 404 (/404.html, response mode
"ExecuteURL").
Sub-folder
To serve the site from a sub-folder (for example https://example.com/admin/), build with the base path:
ORBIX_BASE=/admin/ npm run build # Windows PowerShell: $env:ORBIX_BASE="/admin/"; npm run buildThe base path is Nuxt's app.baseURL (set in nuxt.config.ts from ORBIX_BASE): routes, every <AppLink>,
image and asset URL follow it. Upload dist/bootstrap into the admin/ folder and point the error page to
/admin/404.html (Nginx: error_page 404 /admin/404.html;, Apache: ErrorDocument 404 /admin/404.html). To
check it locally: ORBIX_BASE=/admin/ npm run preview and open http://localhost:4173/admin/.
Node.js server
npm run build:server # .output/ (self-contained: no node_modules needed on the server)
npm start # or: NODE_ENV=production node .output/server/index.mjsThe server renders each page on request and answers unknown URLs with the 404 page and status 404. It listens on
port 3000; set PORT and HOST to change it (PORT=8080 npm start). Copy the .output/ folder to your server
and run it with a process manager (systemd, PM2) or in Docker (below), behind a reverse proxy for TLS. Build with
ORBIX_BASE=/admin/ to serve it from a sub-folder.
Docker
Static site served by 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 80and nginx.conf next to it:
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / { try_files $uri $uri/ $uri/index.html =404; }
error_page 404 /404.html;
location /_nuxt/ { 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).
Node.js server – the server build needs only Node.js at run time:
FROM node:24-alpine AS build
WORKDIR /app
COPY . .
RUN npm ci && npm run build:server
FROM node:24-alpine
WORKDIR /app
COPY --from=build /app/.output ./.output
ENV NODE_ENV=production PORT=3000
EXPOSE 3000
CMD ["node", ".output/server/index.mjs"]docker build -t orbix-admin . and docker run -p 3000:3000 orbix-admin. Add a .dockerignore with
node_modules, .nuxt, .output and dist to keep the build context small.
Troubleshooting
| Problem | Solution |
|---|---|
| Unknown URLs show the host's own 404 page | Set 404.html as the error page (see Deploy) |
| Styles and scripts missing after deploying to a sub-folder | Build with ORBIX_BASE=/your-folder/ |
| Styles and scripts missing on GitHub Pages | Add an empty .nojekyll file next to index.html |
npm install fails on @foundry/ui | Keep the packages/foundry-ui/ folder next to package.json; run the command from the project folder |
server/generated/document or src/svg/sprite.svg is missing | Run npm run assets (it also runs with dev, build and test) |
| An icon does not show | Run npm run assets: only the icons referenced in src/ are added to the sprite |
Type errors in .vue files in the editor | Run npm run dev or npx nuxi prepare once (Nuxt writes its types to .nuxt/) and use the official Vue extension (Vue - Official); npm run typecheck is the reference |
| Hydration warnings in the console after your own changes | Code that reads window, document, localStorage or the current time while rendering gives different markup on the server; move it to onMounted or wrap the part in <ClientOnly> |
| Old styles after an update | Run npm run build again and clear the browser cache |