Deploy Full‑Stack Apps on Netlify with Edge Functions

Deploying a full‑stack web application to Netlify is a popular way to deliver fast, globally distributed content without managing servers. Netlify’s Edge Functions let you run JavaScript (or TypeScript) at the CDN edge, while Serverless Stores offer a simple key‑value persistence layer that integrates seamlessly with those functions. This guide walks you through the entire process—from preparing a local project to publishing a production‑ready site—using only free, open‑source tools.

1. Prerequisites and Project Setup

Before you begin, ensure the following are installed on your development machine:

• Node.js ≥ 18 (LTS) – includes npm and npx
• Git – for version control and pushing to Netlify
• A Netlify account – the free tier is sufficient for this tutorial

On a Debian‑based system (Ubuntu, Debian), install Node.js with the official repository:

# Debian/Ubuntu (apt)
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs git

On an AlmaLinux/Rocky/RHEL system, use dnf:

# AlmaLinux/Rocky/RHEL (dnf)
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo dnf install -y nodejs git

Windows users can download the installer from nodejs.org and follow the wizard.

2. Create a Front‑End with a Static Site Generator

Netlify excels at serving static assets, so we’ll start with a lightweight framework such as Next.js (static export mode) or Astro. The example below uses Next.js:

# Create a new Next.js project
npx create-next-app@latest my-fullstack-app --ts --eslint --tailwind

# Move into the project directory
cd my-fullstack-app

# Build the static version
npm run build
npm run export   # Generates the "out" folder with static HTML/CSS/JS

The npm run export command tells Next.js to pre‑render all pages to static files, which Netlify can serve directly from its CDN.

3. Add an Edge Function

Edge Functions run on Netlify’s edge nodes, giving you sub‑second latency for API‑like logic. Create a folder named netlify/edge-functions and add a JavaScript file, for example hello.js:

// netlify/edge-functions/hello.js
export default async (request, context) => {
  // Parse query parameters
  const url = new URL(request.url);
  const name = url.searchParams.get('name') || 'World';

  // Return a JSON response
  return new Response(JSON.stringify({ greeting: `Hello, ${name}!` }), {
    headers: { 'Content-Type': 'application/json' },
  });
};

Tell Netlify that this file is an Edge Function by adding a netlify.toml configuration file at the project root:

# netlify.toml
[build]
  publish = "out"
  command = "npm run build && npm run export"

[[edge_functions]]
  path = "/api/hello"
  function = "hello"

The path entry maps HTTP requests to /api/hello to the hello function. When a client calls https://your-site.netlify.app/api/hello?name=Alice, Netlify executes the code at the nearest edge location and returns the JSON payload.

4. Set Up a Serverless Store for Persistence

Netlify Serverless Stores provide a simple key‑value store that can be accessed from Edge Functions without additional infrastructure. First, enable the store in the Netlify UI:

1. Log in to Netlify and open your site’s dashboard.
2. Navigate to Site settings → Functions → Serverless Store.
3. Click Enable Store. Netlify will create a store named default for you.

Now modify the Edge Function to read and write data:

// netlify/edge-functions/counter.js
export default async (request, context) => {
  const { kv } = context; // "kv" is the Serverless Store client

  // Increment a counter stored under the key "visits"
  const current = (await kv.get('visits')) ?? 0;
  const next = Number(current) + 1;
  await kv.set('visits', next);

  return new Response(JSON.stringify({ visits: next }), {
    headers: { 'Content-Type': 'application/json' },
  });
};

Update netlify.toml to expose the new function:

[[edge_functions]]
  path = "/api/visits"
  function = "counter"

The store automatically replicates across edge locations, so the counter remains consistent for most read‑heavy workloads. For write‑heavy patterns, consider a dedicated database.

5. Deploy to Netlify

There are two common ways to push your code: via the Netlify CLI or by connecting a Git repository. Both methods use the same netlify.toml configuration.

Using the Netlify CLI

# Install the CLI globally
npm install -g netlify-cli

# Log in to your Netlify account
netlify login

# Link the local folder to a Netlify site (creates a new site if needed)
netlify init

# Deploy a draft preview
netlify deploy --build

# Deploy to production (after confirming the draft)
netlify deploy --prod

The --build flag runs the commands defined in the [build] section of netlify.toml. Once the deployment finishes, Netlify provides a URL such as https://my-fullstack-app.netlify.app.

Deploying via Git

1. Create a new repository on GitHub, GitLab, or Bitbucket and push your code.
2. In the Netlify dashboard, click New site from Git and select the repository.
3. Leave the build command blank (Netlify will read it from netlify.toml) and set the publish directory to out.
4. Save and let Netlify build the site automatically.

Every push to the main branch (or the branch you selected) triggers a new build, updating both the static front‑end and any Edge Functions.

6. Test and Monitor Your Deployment

After the site is live, verify the two endpoints:

• Greeting: https://your-site.netlify.app/api/hello?name=Bob should return {"greeting":"Hello, Bob!"}.
• Visit counter: https://your-site.netlify.app/api/visits should return a JSON object with an incrementing visits value.

Netlify’s dashboard offers a Functions tab where you can view logs for each Edge Function execution. Use the logs to debug issues such as missing environment variables or store permission errors.

If you need environment variables (e.g., API keys for third‑party services), add them under Site settings → Build & deploy → Environment. Edge Functions can read them via process.env.VAR_NAME just like regular Node.js code.

Conclusion

Netlify’s combination of static site hosting, Edge Functions, and Serverless Stores makes it straightforward to run a full‑stack web application without provisioning or maintaining servers. By exporting a static front‑end, attaching lightweight JavaScript at the edge, and persisting data in a built‑in key‑value store, you gain global performance and a simple development workflow. The steps outlined above—setting up the project, adding edge logic, enabling a store, and deploying via CLI or Git—provide a repeatable pattern you can adapt for any modern JavaScript framework.

Experiment with additional Edge Function capabilities such as request rewriting, authentication, or integration with external APIs, and keep an eye on Netlify’s documentation for new features that can further streamline your full‑stack deployments.