Deployment

Production Build

Run a production build with:

npm run build

The build emits 86 static HTML pages plus hashed asset bundles into architectui-html-pro/:

architectui-html-pro/
                ├── index.html                 # 86 HTML files in total
                ├── dashboards-commerce.html
                ├── docs.html
                ├── ...
                └── assets/
                    ├── scripts/main.[hash].js
                    ├── scripts/vendors.[hash].js
                    ├── scripts/[feature].[hash].js
                    ├── styles/main.[hash].css
                    ├── styles/vendors.[hash].css
                    ├── images/
                    └── fonts/

All asset filenames include a content hash, so cache-busting is automatic on every release. CleanWebpackPlugin wipes the output directory before each build, preventing stale files from accumulating.

Hosting Options

Anything that serves static files works. The recipes below cover the most common targets in order of recommendation.

Cloudflare Pages

The simplest option — commit your repository to GitHub or GitLab, connect it to Cloudflare Pages, and the rest is automatic.

Setup

1. Sign in to dash.cloudflare.com and go to Workers & Pages
2. Create application → Pages → Connect to Git
3. Select your repository and configure the build:

Every push to the configured branch triggers a build and atomic deploy. Pull requests get preview URLs. Custom domains, automatic HTTPS, and global CDN are included.

Netlify

Setup

1. Sign in to app.netlify.com
2. Add new site → Import an existing project → Connect to Git provider
3. Select your repository and configure:

Alternatively, drop the architectui-html-pro/ directory directly onto app.netlify.com/drop for an instant URL with no Git integration.

Optional: netlify.toml

For per-environment build customization, add a netlify.toml at the project root:

[build]
                  command = "npm run build"
                  publish = "architectui-html-pro"
                
                [build.environment]
                  NODE_VERSION = "20"
                
                [[redirects]]
                  from = "/old-path"
                  to = "/new-path.html"
                  status = 301

Vercel

Push to GitHub and import the repository on vercel.com/new. Vercel auto-detects the framework as "Other" and uses these settings:

ArchitectUI is a multi-page static site, not a Next.js or React SPA — Vercel handles it identically to any other static host. Edge functions and serverless are unused.

AWS S3 + CloudFront

Setup

1. Create an S3 bucket with website hosting enabled. Set the index document to index.html.
2. Sync the build output to the bucket:

npm run build
                
                aws s3 sync architectui-html-pro/ s3://your-bucket-name/ \
                    --delete \
                    --cache-control "public, max-age=31536000, immutable" \
                    --exclude "*.html"
                
                aws s3 sync architectui-html-pro/ s3://your-bucket-name/ \
                    --cache-control "public, max-age=0, must-revalidate" \
                    --exclude "*" \
                    --include "*.html"

The two-step sync sets immutable far-future caching on hashed assets and no-cache on HTML files (which reference the hashed assets). This is the optimal caching strategy for any host that supports per-file headers.

CloudFront

Put CloudFront in front of the bucket for HTTPS, custom domains, and a global edge cache. Configure CloudFront's default cache behavior to honor the origin's Cache-Control header.

nginx

For self-hosted deployments, nginx is the most efficient option. A minimal config:

server {
                    listen 80;
                    server_name dashboard.example.com;
                
                    root /var/www/architectui-html-pro;
                    index index.html;
                
                    # Cache hashed assets aggressively
                    location /assets/ {
                        expires 1y;
                        add_header Cache-Control "public, immutable";
                    }
                
                    # HTML files reference hashed assets — keep them fresh
                    location ~ \.html$ {
                        expires -1;
                        add_header Cache-Control "no-cache, must-revalidate";
                    }
                
                    # gzip everything
                    gzip on;
                    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;
                    gzip_min_length 1024;
                }

Deploy with rsync:

rsync -avz --delete \
                    architectui-html-pro/ \
                    user@server:/var/www/architectui-html-pro/

Apache

Apache works equally well. The most common gotcha is the .htaccess for caching headers:

<IfModule mod_expires.c>
                    ExpiresActive On
                
                    # Hashed assets — far-future cache
                    <FilesMatch "\.(?:js|css|woff2|woff|ttf|eot|jpg|jpeg|png|gif|svg|ico)$">
                        ExpiresDefault "access plus 1 year"
                        Header set Cache-Control "public, immutable"
                    </FilesMatch>
                
                    # HTML — no cache
                    <FilesMatch "\.html$">
                        ExpiresDefault "access plus 0 seconds"
                        Header set Cache-Control "no-cache, must-revalidate"
                    </FilesMatch>
                </IfModule>
                
                <IfModule mod_deflate.c>
                    AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/json
                </IfModule>

Drop the build output into your DocumentRoot (or a subdirectory) and you're live.

Docker (nginx)

For containerized deployments, build the static site in one stage and serve it from nginx in the next:

FROM node:20-alpine AS builder
                WORKDIR /app
                COPY package*.json ./
                RUN npm ci
                COPY . .
                RUN npm run build
                
                FROM nginx:alpine
                COPY --from=builder /app/architectui-html-pro /usr/share/nginx/html
                COPY nginx.conf /etc/nginx/conf.d/default.conf
                EXPOSE 80
                CMD ["nginx", "-g", "daemon off;"]

Use the nginx config from the previous section for the nginx.conf COPY. Build and push:

docker build -t my-registry/architectui:latest .
                docker push my-registry/architectui:latest

Drop-in to an Existing Site

Already have a website and want to add an admin panel as a subdirectory? Build, then copy the output:

npm run build
                rsync -avz --delete architectui-html-pro/ /var/www/mysite/admin/

Asset paths in the generated HTML are relative (./assets/scripts/...), so they resolve correctly when served from any subdirectory. No build-time configuration is needed for the subpath.

Post-Deployment Checklist

• Smoke-test critical pages. Navigate to the dashboard, a chart page, the auth pages, and the docs — any that use dynamic JS. If any page is silently broken, the build skipped a script entry or a CSS file.
• Check the network tab. All assets/scripts/* and assets/styles/* requests should return 200. A 404 on a hashed asset means caching is misconfigured (stale HTML pointing at a non-existent bundle).
• Verify caching headers. Hashed assets should have Cache-Control: public, max-age=31536000, immutable. HTML files should have Cache-Control: no-cache.
• Test on a slow connection. Chrome DevTools → Network → Throttling → Slow 3G. The Page Loader (if enabled) should hide the FOUC; without it, you should still see a usable layout within ~2s.
• Run Lighthouse. ArchitectUI scores 90+ on Performance for static-host deployments out of the box. Use Lighthouse as a regression check between releases.

Common Issues

404 on /assets/scripts/main.js

Filenames include a hash like main.31ffdaca0792a200e485.js. If your link or hardcoded reference uses the unhashed name, it will 404. Always let HtmlWebpackPlugin inject the correct hashed reference.

Old HTML pointing at a deleted hashed asset

Cached HTML referencing a previous build's hashed asset. Fix: set Cache-Control: no-cache on .html files so clients always re-fetch the HTML, which contains the current hashed asset references.

Fonts blocked by CORS

If you serve assets from a different origin than the HTML (e.g. CloudFront for assets, separate domain for HTML), add the correct CORS headers to font files. nginx example:

location ~ \.(woff2?|ttf|eot)$ {
                    add_header Access-Control-Allow-Origin "https://your-html-domain.com";
                }