Skip to main content
The dashboard is optimized for deployment on Vercel, but can be deployed to any platform that supports Next.js applications.

Prerequisites

Before deploying, ensure you have:
1

Tinybird Workspace

A Tinybird workspace with the Web Analytics data project deployed
2

Admin Token

A Tinybird admin token or token with read permissions for the analytics pipes
3

Repository Access

The dashboard code in a Git repository (GitHub, GitLab, or Bitbucket)

Deploy to Vercel

The fastest way to deploy the dashboard is using Vercel’s GitHub integration.

Option 1: Deploy with Vercel Button

Deploy to Vercel

Click the “Deploy” button to automatically set up the dashboard on Vercel:Deploy with Vercel

Option 2: Manual Deployment

1

Import Repository

  1. Go to vercel.com/new
  2. Import your Git repository
  3. Select the dashboard folder as the root directory
2

Configure Build Settings

Vercel will automatically detect Next.js. Verify these settings:
  • Framework Preset: Next.js
  • Build Command: pnpm build (or npm run build)
  • Output Directory: .next
  • Install Command: pnpm install (or npm install)
3

Add Environment Variables

Configure the required environment variables (see below)
4

Deploy

Click “Deploy” and wait for the build to complete

Environment Variables

Configure these environment variables in your Vercel project settings:

Required Variables

# Tinybird Configuration (server-only, required)
TINYBIRD_TOKEN=your-tinybird-token
TINYBIRD_HOST=https://api.tinybird.co

# Dashboard URL (public)
NEXT_PUBLIC_TINYBIRD_DASHBOARD_URL=https://your-dashboard.vercel.app
TINYBIRD_TOKEN
string
required
Your Tinybird admin token or read token. Get it from Tinybird Console → Tokens.
This is a server-only variable. Never expose it in client-side code.
TINYBIRD_HOST
string
required
Your Tinybird API host URL. Common values:
  • https://api.tinybird.co (EU Shared)
  • https://api.us-east.tinybird.co (US East)
  • https://api.us-east.aws.tinybird.co (AWS US East)
  • https://api.eu-central-1.aws.tinybird.co (AWS EU Central)
NEXT_PUBLIC_TINYBIRD_DASHBOARD_URL
string
required
The public URL of your deployed dashboard (e.g., https://analytics.yourdomain.com).For local development, use http://localhost:3000.

Optional Variables

# Tracker token for analytics (public, optional)
NEXT_PUBLIC_TINYBIRD_TRACKER_TOKEN=your-tracker-token

# Dashboard Basic Auth (server-only, defaults to admin/admin if not set)
DASHBOARD_USERNAME=admin
DASHBOARD_PASSWORD=changeme

# Optional: Set to "true" to disable auth during development
DISABLE_AUTH=false

# Optional: AI Chat
NEXT_PUBLIC_ASK_TINYBIRD_ENDPOINT=https://ask-tb.tinybird.live/api/chat
NEXT_PUBLIC_TINYBIRD_TRACKER_TOKEN
string
Token for tracking analytics on the dashboard itself (dogfooding). Create a token with append permissions to the analytics_events Data Source.
DASHBOARD_USERNAME
string
default:"admin"
Username for basic authentication. See Authentication for details.
DASHBOARD_PASSWORD
string
default:"admin"
Password for basic authentication.
Change the default password in production!
DISABLE_AUTH
boolean
default:"false"
Set to true to disable authentication during development. Never use in production.
NEXT_PUBLIC_ASK_TINYBIRD_ENDPOINT
string
API endpoint for the AI chat feature. Use the default endpoint or deploy your own.

Multi-Tenant Configuration

TENANT_ID
string
If using multi-tenant mode, specify the tenant ID to filter data.

Vercel Configuration

The dashboard includes a Next.js configuration optimized for Vercel:
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ['@tinybirdco/analytics-client', '@tinybirdco/sdk'],
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig
The transpilePackages option ensures the Tinybird packages are properly bundled for deployment.

Custom Domain

To use a custom domain with your Vercel deployment:
1

Add Domain in Vercel

  1. Go to your project settings in Vercel
  2. Navigate to “Domains”
  3. Add your custom domain (e.g., analytics.yourdomain.com)
2

Configure DNS

Add a CNAME record pointing to cname.vercel-dns.com in your DNS provider
3

Update Environment Variable

Update NEXT_PUBLIC_TINYBIRD_DASHBOARD_URL to your custom domain

Alternative Deployment Platforms

While Vercel is recommended, you can deploy to other platforms:

Docker

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]
docker build -t tinybird-dashboard .
docker run -p 3000:3000 --env-file .env tinybird-dashboard

Node.js Server

# Install dependencies
pnpm install

# Build for production
pnpm build

# Start the server
pnpm start
Ensure your hosting platform supports Node.js 18+ and can serve the Next.js application.

Production Checklist

Before launching to production:
1

Security

  • Change default authentication credentials
  • Set up HTTPS/SSL certificate
  • Keep TINYBIRD_TOKEN secret (server-only)
  • Set DISABLE_AUTH=false
2

Configuration

  • Verify all environment variables are set
  • Test authentication flow
  • Confirm data is loading correctly
  • Check all time ranges work
3

Performance

  • Enable caching in Tinybird pipes
  • Configure SWR revalidation intervals
  • Test load times
  • Monitor Vercel analytics
4

Monitoring

  • Set up error tracking (Sentry, etc.)
  • Configure uptime monitoring
  • Review Vercel logs
  • Test AI chat functionality

Troubleshooting

Ensure transpilePackages is configured in next.config.js to include Tinybird packages:
transpilePackages: ['@tinybirdco/analytics-client', '@tinybirdco/sdk']
  1. Verify TINYBIRD_TOKEN is set correctly
  2. Check the token has read permissions for all analytics pipes
  3. Confirm TINYBIRD_HOST matches your workspace region
  1. Verify the tracker is sending events to Tinybird
  2. Check that pipes are published and working in Tinybird Console
  3. Inspect browser console for API errors
  4. Verify time range selection includes data
Ensure NEXT_PUBLIC_ASK_TINYBIRD_ENDPOINT is set to a valid endpoint. The default endpoint is:
https://ask-tb.tinybird.live/api/chat

Next Steps

Configure Authentication

Set up secure access to your dashboard

Customize the Dashboard

Adapt the UI to match your brand

Build docs developers (and LLMs) love