> ## 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.

# Netlify Deployment

> Deploy Dzaleka Online Services to Netlify with step-by-step instructions

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](https://netlify.com))
* Resend API key for email functionality ([get one here](https://resend.com))

## Deployment Steps

<Steps>
  ### Connect your repository

  1. Log in to [Netlify](https://app.netlify.com)
  2. Click **Add new site** → **Import an existing project**
  3. Choose your Git provider (GitHub, GitLab, or Bitbucket)
  4. Authorize Netlify to access your repositories
  5. Select the `dzaleka-heritage-archive` repository

  ### Configure build settings

  Netlify will auto-detect settings from `netlify.toml`, but verify:

  **Build command**:

  ```bash theme={null}
  npm run build
  ```

  **Publish directory**:

  ```bash theme={null}
  dist
  ```

  **Functions directory**:

  ```bash theme={null}
  netlify/functions
  ```

  These are defined in `netlify.toml:4-9`:

  ```toml theme={null}
  [build]
    publish = "dist"
    command = "npm run build"

  [functions]
    directory = "netlify/functions"
  ```

  ### Set environment variables

  <Warning>
    **Required**: Add your `RESEND_API_KEY` before deploying!
  </Warning>

  1. In the deployment configuration screen, click **Show advanced**
  2. Click **New variable**
  3. Add the following:

  | Variable         | Value               | Required                   |
  | ---------------- | ------------------- | -------------------------- |
  | `RESEND_API_KEY` | Your Resend API key | Yes                        |
  | `NODE_VERSION`   | `20`                | Auto-set from netlify.toml |

  The Node.js version is configured in `netlify.toml:33-34`:

  ```toml theme={null}
  [build.environment]
    NODE_VERSION = "20"
  ```

  ### Deploy the site

  1. Review your settings
  2. Click **Deploy site**
  3. Wait for the build to complete (typically 2-5 minutes)
  4. Your site will be live at a Netlify subdomain (e.g., `your-site.netlify.app`)
</Steps>

## Build Configuration

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

### Build Settings

```toml title="netlify.toml" theme={null}
[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`:

```toml theme={null}
# 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`:

```toml theme={null}
[[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:

```typescript theme={null}
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:

<Steps>
  ### Navigate to environment variables

  1. Go to your site dashboard on Netlify
  2. Click **Site settings**
  3. Navigate to **Environment variables**

  ### Add or edit variables

  1. Click **Add a variable** or edit existing ones
  2. Enter the variable name (e.g., `RESEND_API_KEY`)
  3. Enter the value
  4. Select scopes:
     * **Production**: Live site
     * **Deploy Previews**: Preview deployments from PRs
     * **Branch deploys**: Specific branch deployments

  ### Trigger a redeploy

  Changes to environment variables don't auto-rebuild. Trigger a new deploy:

  **Option 1: Clear cache and deploy**

  1. Go to **Deploys** tab
  2. Click **Trigger deploy**
  3. Select **Clear cache and deploy site**

  **Option 2: Git commit**

  ```bash theme={null}
  git commit --allow-empty -m "Update environment variables"
  git push
  ```
</Steps>

## 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:

```toml title="netlify.toml" theme={null}
# 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:

```bash theme={null}
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**:

```bash theme={null}
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**:

```bash theme={null}
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:

<CodeGroup>
  ```bash npm theme={null}
  npm install -g netlify-cli
  ```

  ```bash yarn theme={null}
  yarn global add netlify-cli
  ```

  ```bash pnpm theme={null}
  pnpm add -g netlify-cli
  ```
</CodeGroup>

### Useful Commands

```bash theme={null}
# 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:

```toml title="netlify.toml" theme={null}
[[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

<CardGroup cols={2}>
  <Card title="Custom Domain" icon="globe" href="/deployment/custom-domain">
    Connect a custom domain to your Netlify site
  </Card>

  <Card title="Environment Variables" icon="key" href="/deployment/environment-variables">
    Learn more about environment variable configuration
  </Card>
</CardGroup>