Deployment: Launching to the World

6.1 What is Deployment?

Local vs Deployed

Services We'll Use

• Vercel - Frontend deployment (free, Next.js optimized)
• Supabase - Database (already in use)

6.2 Git Basics

To deploy, you need to upload your code to GitHub. Git is a tool for managing code versions.

Git Basic Concepts

• Repository - Where the project is stored
• Commit - A unit for saving changes
• Push - Upload local commits to the remote

Uploading to GitHub

1. Create a New Repository on GitHub.com
2. In your terminal:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/linkhub.git
git push -u origin main

6.3 Frontend Deployment - Vercel

Environment Variable Setup

Add the same variables from your local .env.local in Settings → Environment Variables:

NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
NEXT_PUBLIC_APP_URL=https://linkhub.com

6.4 Backend Deployment - Railway (Optional)

Use Railway when you need a custom API server or background jobs (cron jobs, image processing, etc.). LinkHub uses Supabase Realtime so a separate WebSocket server isn't needed, but you may need a backend server as your service grows.

Domain Setup

Generate a Railway domain via Settings → Networking → Generate Domain, or connect a Custom Domain.

6.5 Connecting a Custom Domain

Buying a Domain

Places to buy domains:

• Namecheap - Affordable .com domains
• Cloudflare - Cost-price sales, easy DNS management
• Google Domains - Simple interface

DNS Basics

Using Subdomains

You can split subdomains by purpose:

• linkhub.com → Vercel (main app)
• www.linkhub.com (opens in a new tab) → Redirect to linkhub.com

6.6 Post-Deployment Checklist

Common Issues

6.7 Checking Logs

The ability to check logs when errors occur is a key skill for solving problems on your own.

Vercel Logs

1. Vercel Dashboard → Select project
2. Deployments tab → Click recent deployment
3. Check real-time logs in the Functions tab
4. Errors are shown in red

Railway Logs

1. Railway Dashboard → Select project
2. Click service → Logs tab
3. View real-time log streaming
4. Filter specific errors with search

Reading Logs

6.8 Deployment Troubleshooting

CORS / Origin Issues

CORS errors occur when frontend and backend domains are different.

// Express server
import cors from 'cors';
 
app.use(cors({
  origin: ['https://linkhub.com', 'https://www.linkhub.com'],
  credentials: true,
}));

Railway WebSocket Timeout

Railway has a default 60-second timeout. WebSocket requires keepalive settings.

// Client side
const socket = io(SERVER_URL, {
  pingInterval: 25000,
  pingTimeout: 60000,
});

6.9 Operations and Monitoring

Error Tracking: Sentry

Collect frontend and backend errors in real-time.

npm install @sentry/nextjs

Key Metrics Monitoring

6.10 Other Deployment Options

Besides Vercel and Railway, there are various deployment platforms available.

Frontend Deployment Options

Backend Deployment Options

Netlify (Frontend)

Strong for static sites and serverless functions.

Deploy Next.js project to Netlify.
Include netlify.toml config file.

# netlify.toml
[build]
  command = "npm run build"
  publish = ".next"
 
[[plugins]]
  package = "@netlify/plugin-nextjs"

Cloudflare Pages (Frontend)

Served from edge locations worldwide, extremely fast.

Deploy Next.js project to Cloudflare Pages.
Use @cloudflare/next-on-pages.

Render (Backend)

Similar to Railway but often rated as more stable.

Deploy Node.js WebSocket server to Render.
Include render.yaml config file.

# render.yaml
services:
  - type: web
    name: linkhub-server
    env: node
    buildCommand: npm install && npm run build
    startCommand: npm start
    envVars:
      - key: NODE_ENV
        value: production

Fly.io (Backend)

Deploy Docker containers to edge locations worldwide.

Deploy Node.js server to Fly.io.
Include Dockerfile and fly.toml config.

# fly.toml
app = "linkhub-server"
primary_region = "nrt"  # Tokyo
 
[http_service]
  internal_port = 3000
  force_https = true

Coolify (Self-hosted)

Build a Vercel/Railway-like environment on your own server.

Install Coolify on my server.
Then deploy the LinkHub project.

All-in-One Options

Which One Should You Choose?

Chapter Summary

• Learned Git and GitHub basics
• Deployed frontend with Vercel
• Deployed backend with Railway
• Connected a custom domain
• Completed post-deployment checks
• Learned how to check logs
• Explored various deployment options

In the next chapter, we'll add payments to start generating revenue!

Chapter 7: Monetization →