Netlify Deployment

​

Why Netlify?

• Automatic deployments from Git
• Serverless functions for backend logic
• Global CDN for fast content delivery
• Automatic HTTPS with free SSL certificates
• Deploy previews for pull requests
• Environment variable management

​

Prerequisites

• Git repository with your code (GitHub, GitLab, or Bitbucket)
• Netlify account (sign up at https://netlify.com)
• Resend API key for email functionality (get one here)

​

Deployment Steps

​

Build Configuration

​

Build Settings

[build]
  publish = "dist"              # Output directory
  command = "npm run build"      # Build command

[functions]
  directory = "netlify/functions"  # Serverless functions location

[build.environment]
  NODE_VERSION = "20"            # Node.js version

​

Redirects and Rewrites

# SPA fallback - serve index.html for all routes
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# Custom 404 page
[[redirects]]
  from = "/*"
  to = "/404"
  status = 404
  conditions = {Not = [{Path = ["/*.js", "/*.css", "/*.png", ...]}]}

# Updates page redirect
[[redirects]]
  from = "/updates"
  to = "/updates/1"
  status = 302

​

CORS Headers

[[headers]]
  for = "/api/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"
    Access-Control-Allow-Methods = "GET, POST, OPTIONS"
    Access-Control-Allow-Headers = "Content-Type"

​

Serverless Functions

​

Available Functions

• submit-voice.ts - Submit community stories
• submit-store.ts - Submit store listings
• submit-marketplace.ts - Submit marketplace items
• submit-course.ts - Submit course information
• send-feedback-confirmation.ts - Send feedback confirmations
• send-booking-confirmation.ts - Send booking confirmations

​

Function Configuration

import { Resend } from 'resend';
import type { Handler, HandlerEvent } from '@netlify/functions';

const resend = new Resend(process.env.RESEND_API_KEY);

export const handler: Handler = async (event: HandlerEvent) => {
  // Function logic
};

​

Function URLs

https://your-site.netlify.app/.netlify/functions/function-name

https://services.dzaleka.com/.netlify/functions/submit-voice

​

Environment Variables in Production

​

Continuous Deployment

​

Automatic Builds

• Push to main: Deploys to production
• Push to other branches: Creates branch deploys (if enabled)
• Open pull request: Creates deploy preview

​

Deploy Contexts

# Production context
[context.production]
  environment = { NODE_ENV = "production" }

# Deploy Preview context
[context.deploy-preview]
  environment = { NODE_ENV = "staging" }

# Branch deploys
[context.branch-deploy]
  environment = { NODE_ENV = "development" }

​

Build Notifications

1. Go to Site settings → Build & deploy → Deploy notifications
2. Add notifications for:
   • Deploy started
   • Deploy succeeded
   • Deploy failed
3. Choose notification method (Email, Slack, webhook)

​

Monitoring and Logs

​

Build Logs

1. Go to Deploys tab
2. Click on a deploy
3. View the build log output

​

Function Logs

1. Go to Functions tab
2. Click on a function
3. View recent invocations and logs

netlify functions:log submit-voice

​

Analytics

1. Go to Analytics tab
2. Enable analytics (paid feature)
3. View traffic, top pages, and more

​

Troubleshooting

​

Build fails

netlify build --clear-cache

​

Functions not working

netlify dev

​

Deployment preview not generating

1. Go to Site settings → Build & deploy → Deploy contexts
2. Ensure “Deploy previews” is set to Any pull request against your production branch

​

Netlify CLI

npm install -g netlify-cli

yarn global add netlify-cli

pnpm add -g netlify-cli

​

Useful Commands

# Link local project to Netlify site
netlify link

# Run dev server with functions
netlify dev

# Deploy to production
netlify deploy --prod

# Deploy preview
netlify deploy

# View environment variables
netlify env:list

# View function logs
netlify functions:log function-name

​

Performance Optimization

​

Build Optimization

[[plugins]]
  package = "@netlify/plugin-lighthouse"

[[plugins]]
  package = "netlify-plugin-cache"

​

Asset Optimization

• Image compression
• Asset bundling
• Brotli compression
• HTTP/2 server push

​

Next Steps