Skip to main content

Documentation Index

Fetch the complete documentation index at: https://dos.dzaleka.com/llms.txt

Use this file to discover all available pages before exploring further.

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 siteImport 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 settingsBuild & deployDeploy 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 settingsBuild & deployDeploy 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