6.2: Frontend Deployment (Netlify/Vercel)

Deploy your static websites to the web for free using modern hosting platforms like Netlify, Vercel, and GitHub Pages. Learn the deployment process, custom domains, HTTPS, and how to make your website accessible to everyone online.

1. Understanding Web Hosting

Types of Hosting

Static Hosting:

  • Serves pre-built HTML, CSS, JavaScript files
  • No server-side processing
  • Fast, cheap, secure
  • Examples: Netlify, Vercel, GitHub Pages

Traditional Server Hosting:

  • Requires server configuration
  • Handles server-side code (Node.js, Python, PHP)
  • More complex, more expensive
  • Examples: DigitalOcean, AWS EC2, Heroku

For this lesson: We'll focus on static hosting for frontend applications.

Static vs. Dynamic Sites

Static Site:

HTML + CSS + JavaScript
     ↓
Served directly to browser
     ↓
Client-side rendering only

Dynamic Site:

Request
     ↓
Server processes (PHP, Node.js, Python)
     ↓
Generates HTML
     ↓
Sends to browser

Modern Approach (JAMstack):

  • JavaScript (frontend logic)
  • APIs (backend services)
  • Markup (pre-rendered HTML)

This combines the speed of static sites with the functionality of dynamic sites.

2. Introduction to Netlify

What is Netlify?

Netlify is a modern hosting platform that offers:

  • Free tier: Perfect for personal projects
  • Automatic deployments: From Git repositories
  • CDN: Fast global content delivery
  • HTTPS: Free SSL certificates
  • Custom domains: Use your own domain name
  • Form handling: Built-in form submissions
  • Serverless functions: Backend functionality

Why Netlify?

  • Easiest to use for beginners
  • Generous free tier
  • Excellent documentation
  • Great for static sites and Vue/React apps

Create a Netlify Account

  1. Go to https://netlify.com
  2. Click "Sign up"
  3. Sign up with GitHub (recommended) or email
  4. Verify your email if needed

3. Deploying a Static Website to Netlify

Method 1: Drag and Drop (Simplest)

Step 1: Prepare your site

Create a simple website:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Deployed Site</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
    <p>This site is deployed on Netlify!</p>
  </header>
  <main>
    <section>
      <h2>About Me</h2>
      <p>I'm learning web development.</p>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 My Website</p>
  </footer>
</body>
</html>

/* styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: #333;
}

header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 4rem 2rem;
  text-align: center;
}

main {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 2rem;
}

footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 2rem;
  margin-top: 4rem;
}

Step 2: Deploy

  1. Log in to Netlify
  2. Drag your project folder onto the Netlify dashboard
  3. Wait a few seconds for deployment
  4. Your site is live! Netlify gives you a URL like: https://random-name-12345.netlify.app

Step 1: Push to GitHub

# Initialize Git (if not already done)
git init
git add .
git commit -m "Initial commit"

# Create GitHub repo and push
git remote add origin https://github.com/yourusername/my-website.git
git push -u origin main

Step 2: Connect to Netlify

  1. In Netlify dashboard, click "Add new site" → "Import an existing project"
  2. Choose "GitHub"
  3. Authorize Netlify to access GitHub
  4. Select your repository
  5. Configure build settings (for static sites, leave empty):
    • Build command: (leave empty)
    • Publish directory: . (current directory)
  6. Click "Deploy site"

Step 3: Automatic deployments

Now every time you push to GitHub:

git add .
git commit -m "Update homepage content"
git push

Netlify automatically rebuilds and deploys your site!

4. Deploying Vue.js Apps to Vercel

What is Vercel?

Vercel (creators of Next.js) specializes in:

  • Frontend frameworks: Vue, React, Next.js
  • Zero configuration: Automatic build detection
  • Edge network: Ultra-fast global CDN
  • Serverless functions: Backend API routes
  • Analytics: Performance monitoring

Why Vercel for Vue?

  • Optimized for Vue.js and Nuxt
  • Excellent performance
  • Great developer experience

Create a Vercel Account

  1. Go to https://vercel.com
  2. Sign up with GitHub (recommended)
  3. Authorize Vercel

Deploying a Vue.js Project

Step 1: Create a Vue project

# Create Vue app with Vite
npm create vue@latest my-vue-app

# Follow prompts:
# - TypeScript: No
# - JSX: No
# - Router: Yes
# - Pinia: No
# - Testing: No

cd my-vue-app
npm install

Step 2: Test build locally

npm run build

This creates a dist folder with production-ready files.

Step 3: Push to GitHub

git init
git add .
git commit -m "Initial Vue.js app"

# Create GitHub repo and push
git remote add origin https://github.com/yourusername/my-vue-app.git
git push -u origin main

Step 4: Deploy to Vercel

  1. Go to https://vercel.com/dashboard
  2. Click "Add New..." → "Project"
  3. Import your GitHub repository
  4. Vercel auto-detects Vue.js and sets:
    • Framework Preset: Vite
    • Build Command: npm run build
    • Output Directory: dist
  5. Click "Deploy"

Step 5: Deployment complete!

Vercel gives you a URL like: https://my-vue-app.vercel.app

Automatic Deployments

Like Netlify, Vercel automatically redeploys when you push:

# Make changes
git add .
git commit -m "Update navigation menu"
git push

Vercel automatically builds and deploys the new version!

5. Environment Variables

What are Environment Variables?

Environment variables store sensitive data or configuration that changes between environments.

Examples:

  • API keys
  • Database URLs
  • Feature flags
  • Analytics IDs

Why use them?

  • Keep secrets out of your code
  • Different values for development vs production
  • Easy to change without code changes

Using Environment Variables

In Vue.js:

Create .env file:

# .env
VITE_API_URL=https://api.example.com
VITE_ANALYTICS_ID=UA-123456789-1

Important: Vite requires VITE_ prefix for client-side variables!

Access in your code:

// src/config.js
export const config = {
  apiUrl: import.meta.env.VITE_API_URL,
  analyticsId: import.meta.env.VITE_ANALYTICS_ID
}

Add to .gitignore:

# .gitignore
.env
.env.local
.env.*.local

Setting Environment Variables in Netlify

  1. Go to your site in Netlify
  2. Site settings → Environment variables
  3. Add variables:
    • Key: VITE_API_URL
    • Value: https://api.example.com
  4. Redeploy site

Setting Environment Variables in Vercel

  1. Go to your project in Vercel
  2. Settings → Environment Variables
  3. Add variables:
    • Key: VITE_API_URL
    • Value: https://api.example.com
    • Environment: Production
  4. Redeploy

Note: Environment variables are set at build time for static sites, not runtime!

6. Custom Domains

Setting Up a Custom Domain

Instead of random-name.netlify.app, use your own domain like mywebsite.com.

Step 1: Register a domain

Popular registrars:

  • Namecheap (affordable)
  • Google Domains
  • GoDaddy
  • Cloudflare

Step 2: Add domain to Netlify

  1. Site settings → Domain management
  2. Click "Add custom domain"
  3. Enter your domain: mywebsite.com
  4. Netlify provides DNS records

Step 3: Update DNS records

At your domain registrar:

  1. Add A record pointing to Netlify's IP: 75.2.60.5
  2. Or add CNAME record: random-name.netlify.app
  3. Wait for DNS propagation (up to 48 hours, usually faster)

Step 4: Enable HTTPS

Netlify automatically provisions SSL certificate (free via Let's Encrypt).

Custom Domain on Vercel

  1. Project settings → Domains
  2. Add your domain
  3. Vercel provides DNS instructions
  4. Update DNS at your registrar
  5. HTTPS is automatic

7. Build Configuration

Understanding the Build Process

For static sites:

Source files (HTML, CSS, JS)
     ↓
Copy to publish directory
     ↓
Deploy to CDN

For Vue.js:

Source files (.vue, .js)
     ↓
Build command (npm run build)
     ↓
Vite bundles and optimizes
     ↓
Output to dist/
     ↓
Deploy dist/ to CDN

Netlify Build Settings

netlify.toml (optional configuration file):

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Explanation:

  • command: Build command to run
  • publish: Directory to deploy
  • redirects: SPA routing support

Vercel Build Settings

vercel.json (optional):

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

Most projects don't need this - Vercel auto-detects settings!

8. Troubleshooting Deployments

Common Issues

Issue 1: Build fails

Symptoms:

Error: Command failed with exit code 1

Solutions:

  • Check build logs in Netlify/Vercel dashboard
  • Ensure package.json includes all dependencies
  • Test npm run build locally
  • Check Node version matches

Issue 2: Page not found (404)

Symptoms:

  • Homepage works
  • Other routes return 404

Solution: Add redirect rules for SPA routing.

Netlify (_redirects file):

/*    /index.html   200

Vercel (automatic for Vue/Vite)

Issue 3: Environment variables not working

Symptoms:

console.log(import.meta.env.VITE_API_URL) // undefined

Solutions:

  • Check variable name has VITE_ prefix
  • Variables set in deployment platform
  • Redeploy after adding variables
  • Build variables are set at build time, not runtime

Issue 4: Assets not loading

Symptoms:

  • CSS/images don't load
  • Console shows 404 errors

Solution: Use correct asset paths:

Bad:

<img src="/assets/logo.png">

Good (Vite):

<script setup>
import logo from '@/assets/logo.png'
</script>

<template>
  <img :src="logo" alt="Logo">
</template>

Debugging Tips

1. Check build logs:

  • Netlify: Site → Deploys → (click deploy) → Deploy log
  • Vercel: Project → Deployments → (click deployment) → Build Logs

2. Test locally:

npm run build
npm run preview  # Test production build

3. Clear cache and redeploy:

  • Netlify: Deploys → Trigger deploy → Clear cache and deploy
  • Vercel: Deployments → (three dots) → Redeploy

9. Deployment Best Practices

Pre-Deployment Checklist

1. Test production build:

npm run build
npm run preview
# Test all routes and features

2. Optimize assets:

  • Compress images (use WebP format)
  • Minify CSS/JS (Vite does this automatically)
  • Remove unused dependencies

3. Set up error tracking:

  • Sentry
  • LogRocket
  • Rollbar

4. Enable analytics:

  • Google Analytics
  • Plausible (privacy-friendly)
  • Netlify Analytics

5. Performance optimization:

  • Lazy load images
  • Code splitting
  • Preload critical resources

Security Best Practices

1. HTTPS only:

  • Both Netlify and Vercel provide free HTTPS
  • Redirect HTTP to HTTPS (automatic)

2. Environment variables:

  • Never commit .env files
  • Use platform environment variables
  • Different variables for dev/staging/production

3. Security headers:

Netlify (_headers file):

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: camera=(), microphone=(), geolocation=()

4. Content Security Policy:

/*
  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'

10. Monitoring and Analytics

Netlify Analytics

Built-in analytics (paid feature):

  • Page views
  • Top pages
  • Traffic sources
  • Bandwidth usage

Enable:

  1. Site settings → Analytics
  2. Enable Netlify Analytics ($9/month)

Vercel Analytics

Built-in Web Vitals (free):

  • Core Web Vitals
  • Performance metrics
  • Real user monitoring

Enable:

  1. Project settings → Analytics
  2. Enable Web Analytics

Google Analytics

Add to Vue.js app:

Install:

npm install vue-gtag

Configure (main.js):

import { createApp } from 'vue'
import VueGtag from 'vue-gtag'
import App from './App.vue'

const app = createApp(App)

app.use(VueGtag, {
  config: {
    id: import.meta.env.VITE_GA_ID
  }
})

app.mount('#app')

Set environment variable:

# .env
VITE_GA_ID=G-XXXXXXXXXX

11. Preview Deployments

Branch Previews

Both Netlify and Vercel create preview deployments for branches.

How it works:

# Create feature branch
git checkout -b feature-new-header

# Make changes and push
git push origin feature-new-header

Result:

  • Netlify/Vercel creates a preview deployment
  • Unique URL for testing
  • Doesn't affect production
  • Preview updates on every push

Use cases:

  • Test features before merging
  • Share with team/client for feedback
  • QA testing

Pull Request Previews

When you create a pull request:

  • Automatic preview deployment
  • Comment on PR with preview URL
  • Deploy preview updates with new commits

12. Knowledge Check

Question 1: What's the difference between Netlify and Vercel?

Show answer Both are excellent for static site hosting. Netlify is slightly easier for beginners with more features (forms, identity). Vercel is optimized for frontend frameworks like Vue/React with better performance analytics.

Question 2: How do you enable automatic deployments?

Show answer Connect your GitHub repository to Netlify or Vercel. Every push to the main branch automatically triggers a new deployment.

Question 3: Why use environment variables instead of hardcoding values?

Show answer Environment variables keep secrets out of your code, allow different values per environment (dev/prod), and make configuration changes easier without code changes.

Question 4: What should be in your .gitignore file?

Show answer node_modules/, dist/, .env files, .DS_Store, IDE settings, and any build artifacts or sensitive data.

Question 5: How do you fix 404 errors on Vue Router routes?

Show answer Add redirect rules to send all routes to index.html. Create a `_redirects` file in Netlify or use Vercel's automatic SPA routing.

13. Practical Exercises

Exercise 6.2.1: Deploy Static Site to Netlify

  1. Create a simple HTML/CSS website with at least 3 pages
  2. Push to GitHub
  3. Deploy to Netlify using Git
  4. Verify automatic deployments work by making a change

Exercise 6.2.2: Deploy Vue App to Vercel

  1. Create a Vue.js app with Vite
  2. Add Vue Router with 3 routes
  3. Test production build locally
  4. Deploy to Vercel
  5. Test all routes work correctly

Exercise 6.2.3: Configure Environment Variables

  1. Add an API URL environment variable
  2. Use it in your Vue app
  3. Configure it in Vercel/Netlify
  4. Verify it works in production

Exercise 6.2.4: Set Up Custom Domain

  1. Register a domain (or use a free subdomain)
  2. Connect it to your Netlify/Vercel site
  3. Configure DNS records
  4. Enable HTTPS

Exercise 6.2.5: Add Analytics

  1. Set up Google Analytics
  2. Add tracking code to your Vue app
  3. Deploy and verify events are being tracked

14. Key Takeaways

  • Netlify and Vercel are excellent free hosting platforms for frontend apps
  • Git-based deployment enables automatic updates from GitHub
  • Environment variables keep secrets secure and configuration flexible
  • Custom domains make your site professional
  • HTTPS is automatic and free on modern platforms
  • Preview deployments let you test before going live
  • Build process transforms source code into optimized production files
  • Troubleshoot by checking build logs and testing locally
  • Monitor performance with analytics and error tracking
  • Security headers protect your users

15. Next Steps

Great job! You can now deploy static websites and Vue.js applications to production.

In Lesson 6.3: FastAPI Backend Setup, you'll learn how to create and deploy backend APIs with Python FastAPI, connecting them to your frontend applications.

Ready to build full-stack applications? Let's continue!

Further Resources

Platform Documentation:

Tutorials:

Tools:

Free Domain Options:

  • Freenom - Free domains (.tk, .ml, .ga)
  • Use Netlify/Vercel subdomain for learning
Previous Lesson
6.1: Git & Version Control
Next Lesson
6.3: FastAPI Backend Setup