Skip to content
Orbix React · Tailwind CSS v1.0.3

Installation

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

1. Copy the project

Extract the ZIP and copy orbix-react/ 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).

3. Run the dev server

npm run dev

Open http://localhost:5173. Edits to components, styles and translations appear instantly (hot reload).

npm scriptWhat it does
npm run devVite dev server with hot reload
npm run buildProduction build of the Tailwind CSS edition into dist/tailwind
npm run previewServes the production build at http://localhost:4173 (with the SPA fallback)
npm run assetsRegenerates the icon sprite and the icon sets (part of dev, build and test)
npm run typecheckTypeScript check (strict)
npm testType check and the Vitest suite

4. Build for production

npm run build

dist/tailwind/ now holds the whole app: index.html, the hashed CSS and JavaScript in assets/ (with 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/tailwind/ to your host. The app uses clean URLs (/apps/kanban), 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/tailwind.

Vercel

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

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

Nginx

server {
  listen 80;
  server_name admin.example.com;
  root /var/www/orbix;            # contents of dist/tailwind
  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

Nginx: location /admin/ { try_files $uri $uri/ /admin/index.html; }. Every link, image and route follows the base path.

Docker

A two-stage image: build with node:24 (npm ci && npm run build), then copy dist/tailwind into an nginx:alpine image with the configuration above.

Troubleshooting

ProblemSolution
404 after a reload on any page except the home pageThe SPA fallback is missing on the server: see Deploy
Blank page after deploying to a sub-folderBuild with ORBIX_BASE=/your-folder/
npm install fails on @foundry/uiKeep the packages/foundry-ui/ folder next to package.json; run the command from the project folder
src/svg/sprite.svg is missingRun npm run assets (it also runs with dev, build and test)
An icon does not showRun npm run assets: only the icons referenced in src/ are added to the sprite
Old styles after an updateRun npm run build again and clear the browser cache