Skip to main content
Deploy your Dzaleka Online Services site to Netlify for fast, reliable hosting with automatic builds and serverless functions.

​
Why Netlify?

Netlify provides:
  • 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

Before deploying:
  • 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

1
Connect your repository
2
  • Log in to Netlify
  • Click Add new site → Import an existing project
  • Choose your Git provider (GitHub, GitLab, or Bitbucket)
  • Authorize Netlify to access your repositories
  • Select the dzaleka-heritage-archive repository
    • 3
    Configure build settings
    4
    Netlify will auto-detect settings from netlify.toml, but verify:
    5
    Build command:
    6
    npm run build
    7
    Publish directory:
    8
    dist
    9
    Functions directory:
    10
    netlify/functions
    11
    These are defined in netlify.toml:4-9:
    12
    [build]
  publish = "dist"
  command = "npm run build"

[functions]
  directory = "netlify/functions"
    13
    Set environment variables
    14
    Required: Add your RESEND_API_KEY before deploying!
    15
  • In the deployment configuration screen, click Show advanced
  • Click New variable
  • Add the following:
    • 16
    VariableValueRequiredRESEND_API_KEYYour Resend API keyYesNODE_VERSION20Auto-set from netlify.toml
    17
    The Node.js version is configured in netlify.toml:33-34:
    18
    [build.environment]
  NODE_VERSION = "20"
    19
    Deploy the site
    20
  • Review your settings
  • Click Deploy site
  • Wait for the build to complete (typically 2-5 minutes)
  • Your site will be live at a Netlify subdomain (e.g., your-site.netlify.app)

    • ​
    Build Configuration

    The netlify.toml file in your repository root configures the deployment.

    ​
    Build Settings

    netlify.toml
    [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

    The configuration includes important redirects in netlify.toml:14-30: 
    # 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

    API endpoints have CORS headers configured in netlify.toml:37-42: 
    [[headers]]
  for = "/api/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"
    Access-Control-Allow-Methods = "GET, POST, OPTIONS"
    Access-Control-Allow-Headers = "Content-Type"

    ​
    Serverless Functions

    Netlify Functions provide backend functionality without a server.

    ​
    Available Functions

    The project includes these serverless 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
    All functions are in netlify/functions/ directory.

    ​
    Function Configuration

    Each function follows this structure: 
    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

    Functions are accessible at: 
    https://your-site.netlify.app/.netlify/functions/function-name
    Example: 
    https://services.dzaleka.com/.netlify/functions/submit-voice

    ​
    Environment Variables in Production

    Manage environment variables after deployment:
    2
  • Go to your site dashboard on Netlify
  • Click Site settings
  • Navigate to Environment variables
    • 3
    Add or edit variables
    4
  • Click Add a variable or edit existing ones
  • Enter the variable name (e.g., RESEND_API_KEY)
  • Enter the value
  • Select scopes:
    • Production: Live site
    • Deploy Previews: Preview deployments from PRs
    • Branch deploys: Specific branch deployments
    • 5
    Trigger a redeploy
    6
    Changes to environment variables don’t auto-rebuild. Trigger a new deploy:
    7
    Option 1: Clear cache and deploy
    8
  • Go to Deploys tab
  • Click Trigger deploy
  • Select Clear cache and deploy site
    • 9
    Option 2: Git commit
    10
    git commit --allow-empty -m "Update environment variables"
git push

    ​
    Continuous Deployment

    Netlify automatically rebuilds your site when you push to your repository.

    ​
    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

    Configure different settings for different contexts:
    netlify.toml
    # 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

    Enable notifications for build status:
    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

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

    ​
    Function Logs

    Monitor serverless function execution:
    1. Go to Functions tab
    2. Click on a function
    3. View recent invocations and logs
    Or use the Netlify CLI: 
    netlify functions:log submit-voice

    ​
    Analytics

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

    ​
    Troubleshooting

    ​
    Build fails

    Check Node.js version: Ensure NODE_VERSION = "20" is set in netlify.toml:34. Clear cache: 
    netlify build --clear-cache
    Check build logs: Look for error messages in the deploy log.

    ​
    Functions not working

    Verify environment variables: Ensure RESEND_API_KEY is set in Site settings → Environment variables. Check function logs: View function logs in the Netlify dashboard under Functions. Test locally: 
    netlify dev
    This runs functions locally for testing.

    ​
    Deployment preview not generating

    Check branch deploy settings:
    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

    Install the Netlify CLI for local development: 
    npm install -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

    Enable build plugins: Add Netlify build plugins for optimization:
    netlify.toml
    [[plugins]]
  package = "@netlify/plugin-lighthouse"

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

    ​
    Asset Optimization

    Netlify automatically optimizes:
    • Image compression
    • Asset bundling
    • Brotli compression
    • HTTP/2 server push

    ​
    Next Steps

    Custom Domain

    Connect a custom domain to your Netlify site

    Environment Variables

    Learn more about environment variable configuration