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:
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:
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
| Feature | SSR (npm run build) | Static (nuxt generate) |
|---|---|---|
| Server required | Yes (Node.js or serverless) | No (any CDN/static host) |
| Dynamic content | Rendered per-request | Pre-rendered at build time |
| API routes | Run as server endpoints | Bundled as serverless functions (platform-dependent) |
| Deploy targets | Vercel, Netlify, Cloudflare, Node.js, Docker | Any CDN, GitHub Pages, S3, Cloudflare Pages |
| Best for | Dashboards with real-time data | Template demos, portfolios, marketing sites |
Vercel
Vercel auto-detects Nuxt projects and configures everything automatically.
- Push your repository to GitHub, GitLab, or Bitbucket.
- Go to vercel.com/new and import your repository.
- Vercel detects the Nuxt framework — no configuration needed.
- Click Deploy. Vercel runs
npm run buildand 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.
- Connect your repository at app.netlify.com.
- Set the build command and publish directory:
# 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.
- Connect your repository in the Cloudflare dashboard under Workers & Pages.
- Set the build command:
npm run build - Set the output directory:
.output/public - Add the environment variable:
NITRO_PRESET=cloudflare_pages
Alternatively, set the preset in nuxt.config.ts:
// 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+:
# Build npm run build # Start the production server node .output/server/index.mjs
For long-running production servers, use PM2 as a process manager:
# 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:
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:
# 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:
| Variable | Description |
|---|---|
| NUXT_PUBLIC_SITE_URL | Your production URL (e.g., https://your-domain.com) |
| PORT | Server port (default: 3000) |
| HOST | Server host (default: 0.0.0.0) |
| NITRO_PRESET | Deploy target preset (e.g., cloudflare_pages, netlify, vercel) |
| NODE_ENV | Set 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.