Deploy Web App: Complete Guide to Vercel, Netlify, and Railway 2026

Deploy Web App Tutorial: Complete Guide to Vercel, Netlify, and Railway 2026

Web application banana akela kaafi nahi hai — aapko use publicly accessible banana hoga. Yeh complete guide aapko Vercel, Netlify, aur Railway par deployment sikhayega step by step, free hosting se lekar custom domains tak.

Web Deployment Basics

Kya Hai Web Deployment

Web deployment means aapki website/application ko internet par live karna. Aapka code server par upload hota hai, server usse process karta hai, aur users access kar sakte hain through URL.

Traditional vs Modern Deployment

Traditional (Shared Hosting):

• cPanel se files upload
• Manual configuration
• Limited resources
• Slower deployment

Modern (Git-based):

• Git push se automatic deployment
• Server configuration managed
• Scalable resources
• Free SSL, CDN included

Modern Deployment Platforms

Vercel - Best For: Next.js, React, Static. Free Tier: Generous

Netlify - Best For: Static, JAMstack. Free Tier: Generous

Railway - Best For: Full-stack, Node, DBs. Free Tier: Limited

Render - Best For: Backend, APIs. Free Tier: Limited

Fly.io - Best For: Containers, global. Free Tier: Limited

Vercel Deployment Tutorial

Vercel sabse popular deployment platform hai especially Next.js applications ke liye. Yeh Vercel dwara officially support kiya jata hai.

Why Vercel?

• Zero configuration for Next.js
• Automatic preview deployments
• Edge network (global CDN)
• Free SSL with auto-renewal
• Serverless functions built-in
• Excellent developer experience

Vercel Account Setup

1. Go to vercel.com
2. Sign up with GitHub/GitLab/Bitbucket
3. Authorize repository access
4. Done — ready to deploy

Deploy Next.js App to Vercel

Method 1: Git Integration (Recommended)

1. Push your code to GitHub:

git init

git add .

git commit -m "Initial commit"

git remote add origin https://github.com/username/nextjs-app.git

git push -u origin main

1. Go to vercel.com/dashboard
2. Click "New Project"
3. Import your GitHub repository
4. Vercel auto-detects Next.js
5. Click "Deploy"

That's it! Vercel will:

• Detect framework
• Install dependencies
• Build the project
• Deploy to global CDN
• Provide URL like: app-name.vercel.app

Vercel CLI Deployment

Install Vercel CLI globally:

npm install -g vercel

Login to Vercel:

vercel login

Deploy from project directory:

cd your-project

vercel

Follow prompts:

• Set up and deploy? Y
• Which scope? (select account)
• Link to existing project? N
• Project name? (your-app-name)
• Directory? ./
• Override settings? N

Deploy production:

vercel --prod

Vercel Configuration (vercel.json)

{

"buildCommand": "npm run build",

"outputDirectory": ".next",

"framework": "nextjs",

"rewrites": [{ "source": "/api/:path*", "destination": "/api/:path*" }],

"headers": [{ "source": "/(.*)", "headers": [{ "key": "X-Frame-Options", "value": "DENY" }, { "key": "X-Content-Type-Options", "value": "nosniff" }] }]

}

Vercel Environment Variables

Using Vercel dashboard:

Project -> Settings -> Environment Variables

Or using CLI:

vercel env add DATABASE_URL

Enter value when prompted

vercel env add API_KEY

vercel env pull .env.local (Download to local)

Vercel Custom Domain Setup

1. Go to Project -> Settings -> Domains
2. Enter your domain (e.g., mysite.com)
3. Add DNS records as instructed:

- For apex: A record pointing to 76.76.21.21

- For subdomain: CNAME pointing to cname.vercel-dns.com

1. Wait for verification (usually few minutes)
2. SSL certificate auto-generated

Vercel Preview Deployments

Har pull request ke liye automatically preview URL generate hota hai. Team members code review karne se pehle live preview dekh sakte hain.

Netlify Deployment Tutorial

Netlify JAMstack aur static websites ke liye excellent hai, but full-stack bhi support karta hai.

Why Netlify?

• Drag-and-drop deployment option
• Excellent Git integration
• Built-in forms
• Identity (user authentication)
• Functions (serverless)
• Split testing

Deploy to Netlify via Git

Method 1: Git Integration

1. Push code to GitHub/GitLab/Bitbucket:

git add .

git commit -m "Ready to deploy"

git push origin main

1. Go to app.netlify.com
2. Click "Add new site"
3. Select "Import from existing project"
4. Choose your Git provider
5. Select repository
6. Configure build settings:

- Build command: npm run build

- Publish directory: out (or .next, dist, build)

1. Click "Deploy site"

Netlify will:

• Clone repository
• Run build command
• Publish directory
• Provide .netlify.app subdomain

Netlify CLI Deployment

Install Netlify CLI:

npm install -g netlify-cli

Login:

netlify login

Deploy:

cd your-project

netlify deploy --prod

With preview:

netlify deploy

Build and deploy together:

netlify deploy --prod --build

Netlify Configuration (netlify.toml)

[build]

command = "npm run build"

publish = "out"

[build.environment]

NODE_VERSION = "18"

[[redirects]]

from = "/*"

to = "/index.html"

status = 200

[[headers]]

for = "/*"

[headers.values]

X-Frame-Options = "DENY"

X-Content-Type-Options = "nosniff"

Netlify Functions (Serverless)

netlify/functions/hello.js:

exports.handler = async (event, context) => {

return {

statusCode: 200,

body: JSON.stringify({

message: 'Hello from Netlify Functions!',

timestamp: new Date().toISOString()

})

};

};

Railway Deployment Tutorial

Railway full-stack applications ke liye excellent hai jahan aapko database, background workers, aur custom environments chahiye.

Why Railway?

• Database support (PostgreSQL, MySQL, MongoDB, Redis)
• Custom runtime environments
• Region selection
• Real deployment with persistent storage
• Railway CLI for easy deployment

Deploy Node.js App to Railway

Method 1: GitHub Integration

1. Push code to GitHub:

git init

git add .

git commit -m "Ready for Railway"

git remote add origin https://github.com/username/railway-app.git

git push -v origin main

1. Go to railway.app
2. Click "New Project"
3. Select "Deploy from GitHub repo"
4. Authorize GitHub
5. Select repository
6. Railway auto-detects Node.js
7. Click "Deploy Now"

1. Add environment variables:

Project -> Variables -> Add:

DATABASE_URL=your-postgres-url

PORT=3000

NODE_ENV=production

Railway CLI Deployment

Install Railway CLI:

npm install -g @railway/cli

Login:

railway login

Initialize project:

cd your-project

railway init

Add database:

railway add postgresql

Deploy:

railway up

Open in browser:

railway open

Comparing Deployment Platforms

Feature comparison:

• Static Sites: Vercel Excellent, Netlify Excellent, Railway Good
• Next.js: Vercel Best, Netlify Good, Railway Good
• Node.js API: Vercel Functions, Netlify Functions, Railway Full support
• Database: Vercel No (needs external), Netlify No (needs external), Railway Built-in
• Free Tier: Vercel Generous, Netlify Generous, Railway Limited
• Custom Domains: All Free
• SSL: All Auto
• CI/CD: All Built-in

Custom Domain Configuration

DNS Records Setup

For Vercel:

Type Name Value

CNAME www cname.vercel-dns.com

A @ 76.76.21.21

For Netlify:

Type Name Value

CNAME www your-site.netlify.app

ALIAS @ your-site.netlify.app

For Railway:

Use CNAME pointing to your Railway app domain

HTTPS/SSL Setup

All three platforms provide free SSL certificates:

1. Add custom domain in dashboard
2. Platform validates domain ownership
3. SSL auto-provisioned (usually 5-10 minutes)
4. HTTPS enforced automatically

CI/CD Pipeline Setup

GitHub Actions workflow for deployment:

name: Deploy

on:

push:

branches: [main]

jobs:

deploy:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v3

- name: Setup Node

uses: actions/setup-node@v3

with:

node-version: '18'

- name: Install and Build

run: npm ci && npm run build

- name: Deploy to Vercel

uses: amondnet/vercel-action@v25

with:

vercel-token: your-vercel-token

vercel-org-id: your-org-id

vercel-project-id: your-project-id

vercel-args: '--prod'

Cyber Defence Deployment Course

Cyber Defence mein web deployment ka training available hai jo students ko production-ready deployment pipelines build karne mein help karta hai. Course covers all major platforms with hands-on projects.

FAQs

Kya free hosting sufficient hai for production?

Haan, Vercel aur Netlify ki free tiers production-ready hain. Startup projects aur portfolios ke liye ideal hain. Scale hone par plans upgrade kar sakte ho.

Custom domain free hai?

Haan, all platforms custom domain free support karte hain. Sirf domain khareedna padta hai (600-1000 rupees per year).

Kya multiple deployments ek hi domain par kar sakte hain?

Haan, subdomains use karein (app1.mysite.com, app2.mysite.com) ya different domains use karein.

CI/CD kya hota hai?

CI/CD means Continuous Integration/Continuous Deployment. Code push karne par automatically build aur deployment hota hai — manual intervention nahi chahiye.

Railway free tier kitna deta hai?

$5 credit har month, jo basic usage ke liye sufficient hai. Database included free PostgreSQL.