Deployment guide

Table of Contents

• 1. Overview
• 2. Prerequisites
• 3. Vercel deployment
• 4. Environment variables
• 5. Other platforms
• 6. Security basics
• 7. Troubleshooting
• 8. Reference

1. Overview

Deployment makes your code accessible on the internet via a URL.

Key terms

2. Prerequisites

1. Complete Setup fundamentals
2. Install Node.js:
   • macOS: brew install node
   • Windows: scoop install node
3. Create a Vercel↗ account (sign up with GitHub)

3. Vercel deployment

Vercel is a deployment platform optimized for frontend frameworks and static sites. It connects to your Git repository and automatically deploys your code whenever you push changes.

Why Vercel?

• Zero configuration for most frameworks
• Automatic HTTPS
• Global CDN (fast everywhere)
• Free tier: 100 GB bandwidth/month
• Every PR gets its own preview URL

Connect repository

1. Go to vercel.com↗, click "Add New..." then "Project"
2. Select your GitHub repository
3. Vercel auto-detects your framework
4. Click "Deploy"

You get a URL like: https://your-project.vercel.app

Automatic deployments

Docs: Vercel↗

4. Environment variables

Environment variables are configuration values stored outside your code. They hold sensitive data like API keys, database URLs, and secrets. Never commit them to Git.

Via dashboard

1. Go to Project > Settings > Environment Variables
2. Add name + value
3. Select environment (Production, Preview, Development)

Via CLI

npm i -g vercel          # Install CLI
vercel login             # Authenticate
vercel env add KEY_NAME  # Add variable (prompts for value)
vercel env pull          # Pull vars to local .env

Environment scopes

Next.js note: Client-side variables must be prefixed with NEXT_PUBLIC_

NEXT_PUBLIC_API_URL=https://api.example.com  # Accessible in browser
DATABASE_URL=postgres://...                   # Server-side only

Docs: Vercel CLI↗

5. Other platforms

Other platforms serve different needs:

Quick recommendations:

6. Security basics

Deployed applications are publicly accessible. The most common mistake is exposing API keys, database credentials, or other secrets in your code.

Always add to .gitignore:

.env
.env.local
.env.production
.env*.local
.vercel
node_modules

Checklist before production:

• All secrets in platform's dashboard (not in code)
• .env files in .gitignore
• No hardcoded API keys in source
• HTTPS enabled (automatic on Vercel/Netlify)

7. Troubleshooting

Fix for React/Vite 404s:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

8. Reference

Platforms

• Vercel↗ - Frontend deployment platform
• Netlify↗ - Static site hosting
• Railway↗ - Full-stack deployment with databases
• Render↗ - Application hosting
• Replit↗ - Browser-based development and deployment

Documentation

• Vercel Docs↗ - Platform documentation
• Vercel CLI↗ - Command-line deployment tool
• Next.js Deployment↗ - Framework-specific guides
• Netlify Docs↗ - Platform documentation
• Railway Docs↗ - Platform documentation
• Render Docs↗ - Platform documentation
• Node.js↗ - JavaScript runtime

Commands