Deploy to Production

How to deploy Haze Dashboard to Vercel, Netlify, Cloudflare Pages, a Node.js server, or Docker.

Production Build

Before deploying, create an optimized production build:

bash
npm run build

This generates a production-ready output in the .output/ directory. It contains both the Nitro server (which serves API routes and SSR-rendered pages) and the optimized client bundle. The build is self-contained — the .output/ directory is all you need to deploy.

Static Generation

For static hosting (no Node.js server), pre-render all routes as static HTML:

bash
npx nuxt generate

This crawls all routes and generates HTML files in .output/public/. Best for sites where all content is known at build time. Dynamic API routes still work — Nitro bundles them as serverless functions on compatible platforms.

SSR vs Static: Trade-offs

FeatureSSR (npm run build)Static (nuxt generate)
Server requiredYes (Node.js or serverless)No (any CDN/static host)
Dynamic contentRendered per-requestPre-rendered at build time
API routesRun as server endpointsBundled as serverless functions (platform-dependent)
Deploy targetsVercel, Netlify, Cloudflare, Node.js, DockerAny CDN, GitHub Pages, S3, Cloudflare Pages
Best forDashboards with real-time dataTemplate demos, portfolios, marketing sites

Vercel

Vercel auto-detects Nuxt projects and configures everything automatically.

  1. Push your repository to GitHub, GitLab, or Bitbucket.
  2. Go to vercel.com/new and import your repository.
  3. Vercel detects the Nuxt framework — no configuration needed.
  4. Click Deploy. Vercel runs npm run build and deploys the output.

Subsequent pushes to the main branch trigger automatic deployments. Pull request branches get preview URLs.

Netlify

Netlify supports Nuxt SSR via its serverless functions layer.

  1. Connect your repository at app.netlify.com.
  2. Set the build command and publish directory:
bash
# Build command
npm run build

# Publish directory
.output/public

For static generation, use npx nuxt generate as the build command and dist as the publish directory.

Cloudflare Pages

Cloudflare Pages supports Nuxt with the Cloudflare preset.

  1. Connect your repository in the Cloudflare dashboard under Workers & Pages.
  2. Set the build command: npm run build
  3. Set the output directory: .output/public
  4. Add the environment variable: NITRO_PRESET=cloudflare_pages

Alternatively, set the preset in nuxt.config.ts:

typescript
// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare_pages',
  },
})

Node.js Server

Run the production build directly on any server with Node.js 18+:

bash
# Build
npm run build

# Start the production server
node .output/server/index.mjs

For long-running production servers, use PM2 as a process manager:

bash
# Install PM2 globally
npm install -g pm2

# Start with PM2
pm2 start .output/server/index.mjs --name haze-dashboard

# Other PM2 commands
pm2 logs haze-dashboard    # View logs
pm2 restart haze-dashboard # Restart
pm2 stop haze-dashboard    # Stop
pm2 save                   # Save process list for auto-restart on reboot
pm2 startup                # Configure auto-start on system boot

The server runs on port 3000 by default. Use the PORT environment variable to change it: PORT=8080 node .output/server/index.mjs

Docker

Create a Dockerfile at the project root for containerized deployments:

dockerfile
FROM node:20-alpine AS builder

WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner

WORKDIR /app
COPY --from=builder /app/.output .output

ENV HOST=0.0.0.0
ENV PORT=3000

EXPOSE 3000
CMD ["node", ".output/server/index.mjs"]

Build and run the container:

bash
# Build the image
docker build -t haze-dashboard .

# Run the container
docker run -p 3000:3000 haze-dashboard

Environment Variables

Key environment variables for production deployments:

VariableDescription
NUXT_PUBLIC_SITE_URLYour production URL (e.g., https://your-domain.com)
PORTServer port (default: 3000)
HOSTServer host (default: 0.0.0.0)
NITRO_PRESETDeploy target preset (e.g., cloudflare_pages, netlify, vercel)
NODE_ENVSet to production for optimized builds

Tip

The mock API routes work in production too — Nitro serves them as serverless functions (on Vercel, Netlify, Cloudflare) or as Node.js endpoints (on a traditional server). You can replace them with real API calls when you connect a backend.

Next Steps

Check the Changelog for the latest updates and release notes.