Skip to main content

​
Build Process

Before deploying, you need to build the application for production.

​
Standard Build

Create an optimized production build: 
yarn build
This runs next build which:
  • Compiles TypeScript
  • Optimizes React components
  • Generates static assets
  • Creates production bundles

​
Build Verification

After building, test the production build locally: 
yarn build && yarn serve
The production server will start at http://localhost:3000.

​
Type Checking

Verify TypeScript types before deployment: 
yarn check-types
Fix all TypeScript errors before deploying to production. Use NEXT_PUBLIC_IGNORE_BUILD_ERROR=true only for testing.

​
Deployment Options

Agora DAO frontend can be deployed to various platforms:

Vercel

Recommended for traditional web hosting

IPFS

Recommended for decentralized hosting

​
Vercel Deployment

Vercel is the recommended platform for deploying Next.js applications.

​
Prerequisites

1

Install Vercel CLI

The Vercel CLI is already included in devDependencies:
yarn vercel:login
2

Link Your Project

Link your local project to Vercel:
vercel link

​
Deployment Commands

The project includes specialized Vercel deployment scripts:
Deploy with all checks enabled:
yarn vercel
This runs:
vercel \
  --build-env YARN_ENABLE_IMMUTABLE_INSTALLS=false \
  --build-env ENABLE_EXPERIMENTAL_COREPACK=1 \
  --build-env VERCEL_TELEMETRY_DISABLED=1

​
Environment Variables in Vercel

Configure environment variables in the Vercel dashboard:
  1. Go to your project settings
  2. Navigate to “Environment Variables”
  3. Add the following variables:
NEXT_PUBLIC_ALCHEMY_API_KEY=your_production_alchemy_key
NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_walletconnect_project_id
Environment variables set in Vercel override those in .env.local. Use different API keys for production and development.

​
Deployment Workflow

1

Configure Environment

Set production environment variables in Vercel dashboard
2

Update Networks

Configure production networks in scaffold.config.ts:
targetNetworks: [chains.mainnet] // or your target network
3

Deploy Contracts

Deploy smart contracts to your target network first
4

Deploy Frontend

Run the deployment command:
yarn vercel
5

Verify Deployment

Test the deployed application:
  • Connect wallet
  • Verify contract interactions
  • Check all routes

​
IPFS Deployment

Deploy to IPFS for fully decentralized hosting.

​
IPFS Build Configuration

The project is pre-configured for IPFS deployment using bgipfs.

​
Deployment Command

Deploy to IPFS with a single command: 
yarn ipfs
This script:
  1. Sets NEXT_PUBLIC_IPFS_BUILD=true
  2. Builds static export with yarn build
  3. Initializes bgipfs upload configuration
  4. Uploads the out/ directory to IPFS
  5. Returns the IPFS CID and public URL

​
What Happens During IPFS Build

When NEXT_PUBLIC_IPFS_BUILD=true, the Next.js config enables:
next.config.ts
if (process.env.NEXT_PUBLIC_IPFS_BUILD === "true") {
  nextConfig.output = "export";        // Static HTML export
  nextConfig.trailingSlash = true;     // Add trailing slashes
  nextConfig.images = {
    unoptimized: true,                 // Disable image optimization
  };
}

​
IPFS Deployment Output

Successful deployment shows: 
✓ Static HTML export completed
✓ Uploading to IPFS...
🚀 Upload complete! Your site is now available at:
https://community.bgipfs.com/ipfs/QmXxx...

​
IPFS Limitations

IPFS deployment has limitations:
  • No server-side rendering (SSR)
  • No API routes
  • No dynamic image optimization
  • All routes must be static
Ensure your application is compatible with static export before deploying to IPFS.

​
IPFS Deployment Workflow

1

Update Configuration

Ensure scaffold.config.ts targets the correct network
2

Deploy Contracts

Deploy smart contracts to your target network
3

Build and Upload

Run the IPFS deployment:
yarn ipfs
4

Access Your Site

Visit your site at the provided IPFS URL:
https://community.bgipfs.com/ipfs/<CID>
5

Pin to IPFS (Optional)

For persistence, pin your CID using:

​
Production Checklist

Before deploying to production, ensure:
  • Production API keys configured
  • Correct network selected in scaffold.config.ts
  • Environment variables set in hosting platform
  • Contract addresses updated
  • All TypeScript errors resolved
  • ESLint warnings addressed
  • Code formatted with Prettier
  • Tests passing (if applicable)
  • Contracts deployed to target network
  • Contract addresses verified
  • ABIs generated in contracts/
  • Contracts verified on block explorer
  • Production build tested locally
  • Wallet connections verified
  • Contract interactions tested
  • All routes accessible
  • Mobile responsiveness checked
  • No private keys in code
  • No sensitive data in client-side code
  • HTTPS enabled (Vercel provides this)
  • Content Security Policy configured

​
Deployment Comparison

FeatureVercelIPFS
Deployment SpeedFast (~2 min)Medium (~5 min)
Server-Side Rendering✅ Yes❌ No
API Routes✅ Yes❌ No
Image Optimization✅ Yes❌ No
Decentralization❌ No✅ Yes
Censorship Resistance❌ No✅ Yes
Custom Domain✅ Easy⚠️ Requires ENS/DNSLink
CostFree tier availablePay for pinning services
Automatic HTTPS✅ Yes✅ Yes (via gateway)

​
Continuous Deployment

​
Vercel Git Integration

Enable automatic deployments:
  1. Connect your GitHub/GitLab repository to Vercel
  2. Configure production branch (usually main)
  3. Enable automatic deployments
  4. Set environment variables
Every push to the production branch triggers a deployment.

​
GitHub Actions (IPFS)

Automate IPFS deployments with GitHub Actions:
.github/workflows/deploy-ipfs.yml
name: Deploy to IPFS

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          
      - name: Install dependencies
        run: yarn install
        working-directory: packages/nextjs
        
      - name: Deploy to IPFS
        run: yarn ipfs
        working-directory: packages/nextjs
        env:
          NEXT_PUBLIC_ALCHEMY_API_KEY: ${{ secrets.ALCHEMY_API_KEY }}
          NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ${{ secrets.WALLET_CONNECT_PROJECT_ID }}

​
Troubleshooting

Run yarn check-types locally to see all errors. Fix them before deploying.If you need to deploy urgently (not recommended):
yarn vercel:yolo
Verify:
  • Correct network configured in scaffold.config.ts
  • Valid NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
  • Contracts deployed to the target network
Check:
  • Contract addresses in contracts/deployedContracts.ts
  • Network ID matches deployed contracts
  • ABIs are up to date
Common issues:
  • Build errors (run NEXT_PUBLIC_IPFS_BUILD=true yarn build to debug)
  • API routes or SSR features (not supported on IPFS)
  • Network connectivity to IPFS upload service

​
Next Steps

Monitoring

Set up monitoring with Vercel Analytics or custom solutions

Custom Domain

Configure a custom domain for your deployment

Performance

Optimize performance with caching and CDN

Security

Implement additional security measures

Build docs developers (and LLMs) love

Get started for freeTalk to us