Netlify Reference

Overview

Netlify excels at JAMstack deployment and modern web workflows:

• 🏗️ Static Site Generators - Jekyll, Hugo, Gatsby, etc.
• 🔧 Build Automation - CI/CD from Git
• 📝 Form Handling - No backend required
• 🌐 Edge Functions - Serverless at the edge

Domain Configuration

domains/username.json

{
  "owner": {
    "username": "username",
    "email": "user@example.com"
  },
  "records": {
    "CNAME": "app-name.netlify.app"
  }
}

Setup Process

1. Deploy to Netlify

• Git Integration: Connect GitHub/GitLab/Bitbucket
• Manual Deploy: Drag & drop build folder
• CLI Deploy: Use Netlify CLI tool

2. Configure Custom Domain

1. Site Dashboard → Domain settings
2. Add custom domain → username.loves-to.dev
3. Netlify shows DNS configuration
4. Use your Netlify URL as CNAME target

3. SSL Certificate

• Automatically provisions Let’s Encrypt certificate
• Usually ready within 1-10 minutes
• Force HTTPS redirect available

Build Configuration

netlify.toml

netlify.toml

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

[build.environment]
  NODE_VERSION = "18"
  NPM_VERSION = "9"

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

# Custom headers
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    Referrer-Policy = "same-origin"

# Form handling
[[headers]]
  for = "/contact"
  [headers.values]
    X-Robots-Tag = "noindex"

Build Commands by Framework

Framework	Build Command	Publish Directory
React	npm run build	build
Vue	npm run build	dist
Gatsby	gatsby build	public
Hugo	hugo	public
Jekyll	bundle exec jekyll build	_site
Astro	npm run build	dist

Serverless Functions

Function Structure

netlify/
└── functions/
    ├── hello.js
    ├── api.js
    └── contact-form.js

Basic Function

netlify/functions/hello.js

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      message: "Hello from loves-to.dev!",
      method: event.httpMethod,
      path: event.path
    }),
  }
}

API Endpoint

netlify/functions/api.js

exports.handler = async (event, context) => {
  const { httpMethod, body, queryStringParameters } = event;

  if (httpMethod === 'GET') {
    return {
      statusCode: 200,
      body: JSON.stringify({ data: "API response" }),
    }
  }

  if (httpMethod === 'POST') {
    const data = JSON.parse(body);
    return {
      statusCode: 201,
      body: JSON.stringify({ received: data }),
    }
  }

  return {
    statusCode: 405,
    body: 'Method Not Allowed',
  }
}

Form Handling

HTML Form

contact.html

<form name="contact" method="POST" data-netlify="true">
  <p>
    <label>Name: <input type="text" name="name" required /></label>
  </p>
  <p>
    <label>Email: <input type="email" name="email" required /></label>
  </p>
  <p>
    <label>Message: <textarea name="message" required></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

React Form

ContactForm.jsx

import React, { useState } from 'react';

const ContactForm = () => {
  const [formData, setFormData] = useState({});

  const handleSubmit = (e) => {
    e.preventDefault();
    // Netlify handles the form submission automatically
  };

  return (
    <form
      name="contact"
      method="POST"
      data-netlify="true"
      onSubmit={handleSubmit}
    >
      <input type="hidden" name="form-name" value="contact" />
      {/* Form fields */}
    </form>
  );
};

Environment Variables

Build Environment

Site settings → Environment variables

NODE_ENV=production
GATSBY_SITE_URL=https://username.loves-to.dev
HUGO_VERSION=0.110.0

Function Environment

netlify/functions/config.js

exports.handler = async (event, context) => {
  const apiKey = process.env.API_KEY;
  const siteUrl = process.env.URL; // Netlify provides this automatically

  return {
    statusCode: 200,
    body: JSON.stringify({ siteUrl }),
  }
}

Deploy Previews

Automatic Previews

• Every pull request gets a unique preview URL
• Format: deploy-preview-123--site-name.netlify.app
• Perfect for testing before merging

Preview Configuration

netlify.toml

[context.deploy-preview]
  command = "npm run build:preview"

[context.deploy-preview.environment]
  NODE_ENV = "preview"

Performance Features

Asset Optimization

netlify.toml

[build.processing]
  skip_processing = false

[build.processing.css]
  bundle = true
  minify = true

[build.processing.js]
  bundle = true
  minify = true

[build.processing.html]
  pretty_urls = true

[build.processing.images]
  compress = true

Edge Handlers

netlify/edge-functions/geolocation.js

export default async (request, context) => {
  const country = context.geo.country?.code || 'US';

  return new Response(JSON.stringify({
    country,
    message: `Hello from ${country}!`
  }), {
    headers: { 'content-type': 'application/json' },
  });
};

Common Issues

Build Failures

• Check Node.js version in build settings
• Verify all dependencies are installed
• Review deploy logs for specific errors

Form Submissions Not Working

• Ensure data-netlify="true" attribute is present
• Add name attribute to form element
• Check spam folder for notifications

Function Timeouts

• Free tier: 10 seconds max execution time
• Pro tier: 26 seconds max execution time
• Optimize function performance

DNS Issues

• Verify CNAME points to correct Netlify URL
• Check for conflicting DNS records
• Wait up to 48 hours for propagation