Forem: Netlify

How to keep your secrets secret on Netlify

Sean Roberts — Mon, 09 Dec 2024 21:45:41 +0000

Managing secrets is a critical part of building secure applications. But let’s face it—mistakes happen. Secrets can accidentally find their way into your codebase, your logs, or even your published files. That’s where Netlify’s Secrets Controller steps in, offering a quick way to protect sensitive data for everyone using Netlify.

Watch it in action

Want to see how it works? Check out this quick demo:

Here’s how the Secrets Controller helps you sleep better at night:

Environment variables, done right

Secrets are stored securely as environment variables, either synced from a vault or added directly in your site settings. They’re delivered in-memory and never exposed in your codebase.
Mark secrets for extra security

Any environment variable can be flagged as a secret. Once flagged, these values are locked down—hidden from the UI, API, or CLI—ensuring they’re only accessible to your app during runtime.
Automatic secret leak detection

Mistakes happen, but Netlify has your back. During every build, Secrets Controller scans your repo code and bundled files for any instance where a secret might have been exposed. If it finds one, the build is blocked, and you’re alerted to fix the issue before it goes live.

Even the most careful developers can accidentally expose secrets. Misconfigured build tools, copy-pasting errors, or overlooked logs can lead to serious data breaches. Netlify’s Secrets Controller not only prevents these mistakes but also simplifies your workflow, so you can focus on building, not worrying.

Let’s talk secrets

Have you ever experienced a close call with leaked secrets? How do you handle secrets in your workflows today? Share your thoughts in the comments!

Debugging failed builds with Netlify

Taylor Barnett-Torabi — Thu, 05 Dec 2024 19:57:30 +0000

We all get failed builds. Sometimes it works on your machine and then as soon as you push it to your hosting platform, something breaks in the build. Then, you have to sort through the build logs trying to spot what went wrong and figure it out.

But what if you could get some help?

Meet Netlify’s AI-powered 'Why Did It Fail?' feature—designed to help you troubleshoot build errors.

In this video, we’ll walk you through how to use this powerful debugging tool to identify and fix the issues behind a failed deploy. With a single click, Netlify identifies the cause of deploy failures and provides actionable solutions, helping you fix errors in record time.

Deploy your bolt.new app to Netlify

Karin — Tue, 03 Dec 2024 08:54:33 +0000

Have you tried Bolt.new? This AI-powered tool transforms your ideas into fully functional websites in minutes. Simply provide a short prompt, and Bolt takes care of the rest—generating the code for your site and making it effortless to create unique projects.

In this video, we explore how to create and deploy a fully functional website in just a few steps:

Generate your site: Provide a simple prompt—like creating a website celebrating cats! Bolt generates a beautiful application, complete with features like comments powered by Turo and Netlify Functions.
View your live site: Bolt automatically deploys your site to Netlify, giving you a live URL to share instantly.
Claim ownership: Transfer the site to your Netlify team and make it yours.
Link to GitHub: Open your project in StackBlitz, create a repository, and link it to your Netlify site for streamlined version control.

With Bolt and Netlify, turning ideas into live, production-ready sites has never been faster. What kind of website would you create? Share your ideas (and URLs) in the comments—we’d love to see them!

Netlify Dynamic Site Challenge - Help Thread!

Sean C Davis — Thu, 02 May 2024 21:01:44 +0000

Looking for help with your Netlify DEV Challenge Submission?

We're here to assist anyone who encounters issues or has questions about Netlify!

Feel free to post your questions or concerns in the comments below, and we'll do our best to provide timely and helpful responses.

Just hearing about this challenge? Read the announcement post here:

Join us for the Netlify Dynamic Site Challenge: $3,000 in Prizes!

dev.to staff for The DEV Team ・ May 1

#netlifychallenge #devchallenge #webdev #javascript

Building AI experiences on Netlify

Sean Roberts — Tue, 23 Apr 2024 15:24:34 +0000

The rise and acceleration of AI experiences across the web is seeing an adoption curve unlike any technology we’ve seen in years. AI driven experiences have raised the bar in UX expectations and is offering new frontiers for serving customers. Traditional static design and rigid input experiences are going to become a sign of outdated experiences on the web. As we’re helping our millions of developers embrace these new capabilities, this guide will start your journey of building AI experiences on Netlify.

TL;DR

We’re going to discuss the high-level approaches to building AI experiences on Netlify. You’ll walk away knowing how to start your AI journey, what parts of AI workloads Netlify can support, and considerations to keeping things fast and secure. Along the way, we'll step through some examples that you can code along with to get started.

I got 99 problems and AI should solve some

The first consideration in this space is to ensure you have a problem that’s right for AI to solve. Of course, those that are just exploring the tech and APIs this isn’t necessary. But if you’re building for your business/community, it’s important to start with the problem. AI is part of the solution (to a lot of problems) but it can be a challenge to start with the solution vs starting with the right problems. Starting with the right problem allows you to narrow in on which tools to use, provides clearer ways of evaluate the solutions, and reduces the risk of forcing a solution onto the wrong problem.

Here are some usecases/problems our customers solve with AI on Netlify today.

AI-driven chat agents to help their customer workloads
Generative UI to provide more personalized experiences
AI Agents/Assistants trained to solve key tasks on behalf of users
Publishing/hosting websites/artifacts generated by AI tools
Semantic search of knowledgebases to make it easier to get insights and solve issues
Storing and processing the data needed to create embeddings and push to vector databases
Generating or modifying images, content, etc. to personalize their customer experiences

Did you know?

Cognition Labs, creators of the AI Software Engineer, Devin, faced challenges with needing to be able to run, host, and validate web experiences created by their AI engineer.

The team chose Netlify to manage all of the web infrastructure that Devin produces during its development.

Composable AI stacks

With a usecase and concept in mind, you’ll want to get to building on your stack as quickly as possible. Netlify’s composable platform let’s your team decide the right combination of tools to use to achieve your goals.

UI / Framework stack

You probably already have a framework of choice and a website you’re building on. If you don’t, here are some templates to get you started with a site on Netlify.

Remix
Next.js (with App Router)
… check out our docs for your UI framework of choice

For most usecases, AI solutions tend to be a server/backend concern. It’s often treated as an API layer separate from your frontend stack or integrated into it. That is to say, like your site’s other server concerns, your AI layer will usually look the same and sit next to the rest.

For example, if you’re building Generative UI via React Server Components, you are already integrating your server logic next to your components. Most websites today utilize a more trigger oriented flow - user interacts with UI, an API call happens, and UI is updated to reflect the information. Both approaches are supported on Netlify so you can use the approach that fits with your current site.

Any Model. Any AI Pattern. Any AI Framework.

Within your website architecture, you can decide which model and provider you would like to use. Netlify’s serverless runtime allows you to start working with AI without worrying about the infrastructure that powers it.

Access any AI model from a provider of your choosing. Here’s some that you might be interested in for your usecases.

OpenAI - powerful proprietary models
Groq - extremely fast LLM inference
HuggingFace - extensive library of open models
Anthropic - exceptional proprietary models
OctoAI - containerized access to models and inference stack
Google’s Vertex AI - powerful proprietary and open model access
countless more!

Depending on your usecases, you’ll employ various AI patterns. Whether you’re just using basic direct inference, RAG (Retrieval Augmented Generation), or supporting something more complex such as knowledge graphs. These patterns combine compute, data, and inference to achieve results and Netlify is the glue and runtime to make this happen.

As your usecases get more complex, it’s a good idea to start reaching for a purpose-built AI framework to simplify what you need to understand.

LangChain - A complete framework for orchestrating different patterns, normalizing provider differences, and making it easy to build and maintain AI systems without needing to know the nuances.
AI SDK - Normalizing the responses from AI tools, common utilities, and prebuilt usecase methods.
LlammaIndex - A data framework for orchestrating the data workloads used in your AI systems.

If you’re needing a vector database to do some advanced patterns, Netlify supports connecting to all of the major providers such as Pinecone, PlanetScale, Supabase, MongoDB, Neo4J, etc. Just select the tools that fits your needs.

Using Anthropic for product descriptions

Let’s apply some of this approach to see how simple it is to build AI experiences on Netlify. If we needed an API that generates descriptions of products, how would we build that? In this example, we will create an AI endpoint that runs on the edge and uses Anthropic’s Claude model to generate product descriptions.

Step 1

Set up an Anthropic account and create an API key.

Step 2

In your site settings create an environment variable for ANTHROPIC_API_KEY

Step 3

In your codebase, create a Netlify Edge Function, that will your endpoint. In our case the api path will be /product-description and we can send a productSummary query parameter.

import Anthropic from "https://esm.sh/@anthropic-ai/sdk@0.20.4";

export default async (request: Request) => {
  const productSummary = new URL(request.url).searchParams.get("productSummary");

  if (!productSummary) {
    return new Response("", { status: 200 });
  }

  const client = new Anthropic({ apiKey: Netlify.env.get("ANTHROPIC_API_KEY") });

  const chatCompletion = await client.messages.create({
    model: "claude-3-opus-20240229",
    max_tokens: 1024,
    system:
      "You're an ecommerce store. I need you to make the best description possible with the information I provide.",
    messages: [{ role: "user", content: productSummary }],
  });

  return new Response(chatCompletion?.content?.[0]?.text);
};

export const config = {
  path: "/product-description",
};

Step 4

Your API is ready, now we need to call it. Here’s some basic HTML/JS to see this working.

<input type="text" placeholder="Info about the product" id="summary" />
<button id="generate-button">Generate Product Description</button>

<div id="desc-target"></div>

<script>
  const summary = document.getElementById("summary");
  const generateBtn = document.getElementById("generate-button");
  const description = document.getElementById("desc-target");

  generateBtn.addEventListener("click", async () => {
    description.innerText = "generating description...";

    const descResp = await fetch(`/product-description?productSummary=${summary.value}`);
    const desc = await descResp.text();

    description.innerText = desc;
  });
</script>

Done! The more information/specs about the product that’s provided the better the results.

🛹 Prompt: “Eric Koston Girl Basic Logo Skatebord”

Generated: “Ride in style with the Eric Koston Girl Basic Logo Skateboard. This high-quality skateboard features a sleek and minimalist design, perfect for showcasing your love for the iconic Girl Skateboards brand. The deck is made from durable 7-ply maple wood, providing a smooth and responsive ride for skaters of all skill levels.

The top of the deck features Girl's classic logo in bold, black text against a clean white background. The understated design is a testament to Eric Koston's timeless style and the brand's commitment to simplicity and functionality.

The skateboard measures 8.25 inches wide and 31.85 inches long, making it suitable for a wide range of skating styles and techniques. The medium concave shape offers excellent control and stability, while the slightly tapered tail and nose provide ample pop for ollies and other tricks.

The Eric Koston Girl Basic Logo Skateboard comes fully assembled and ready to ride, with high-quality trucks, wheels, and bearings that ensure a smooth and responsive experience. Whether you're cruising the streets or hitting the skate park, this board is built to perform.

As a signature model from one of the most influential skaters of all time, the Eric Koston Girl Basic Logo Skateboard is a must-have for any serious skateboarder or collector. Don't miss your chance to own a piece of skateboarding history and elevate your riding style with this iconic deck.”

Using OpenAI with tool/function calling

Let’s try something a little more advanced using a different tool. In this example, we want to provide an experience to help our customers who are traveling. One way to help is suggesting what clothes to pack for a given travel location and expected weather. Inference models do not have up-to-date information so they need a way to get this information to continue the request.

To achieve this, we will create an endpoint that defines a “tool” that must be called to determine what to do next. With this feature, OpenAI’s model is informed that, when certain questions are asked, it should consult the list of tools for what to do next. In this case, it will call this function when it needs to dynamically look up the weather.

Step 1

Set up an OpenAI account and create an API key.

Step 2

In your site settings create an environment variable for OPENAI_API_KEY

Step 3

Create your function. Below we use OpenAI’s runTools function that will process the prompt, select the right tool, and use the result to complete the prompting.

import OpenAI from "https://esm.sh/openai@4.33.0";

export default async (request: Request) => {
  const locationInput = new URL(request.url).searchParams.get("location");

  if (!locationInput) {
    return new Response("Where are you traveling to?");
  }

  const client = new OpenAI({ apiKey: Netlify.env.get("OPENAI_API_KEY") });

  const toolRunner = await client.beta.chat.completions.runTools({
    messages: [
      {
        role: "system",
        content:
          "You're a helpful travel agent informing the user what clothes they should pack. When deciding what clothes to offer, you will be informed of the travel destination. Ensure that the clothes are appropriate for the weather.",
      },
      { role: "user", content: `I'm traveling to "${locationInput}"` },
    ],
    tools: [
      {
        type: "function",
        function: {
          function: getWeather,
          parse: JSON.parse,
          parameters: {
            type: "object",
            properties: {
              location: { type: "string" },
            },
          },
        },
      },
    ],
    model: "gpt-4-turbo",
  });

  const suggestion = await toolRunner.finalContent();

  return new Response(suggestion);
};

// called automatically when the model believes it needs to get the weather
async function getWeather(args: { location: string }) {
  const { location } = args;
  // call weather API
  return { temperature: "98F", precipitation: "humid" }; // it's hot everywhere :)
}

export const config = {
  path: "/packing-suggestions",
};

Step 4

Let’s start using the API from the website.

<input type="text" placeholder="Location of travel" id="location" />
<button id="generate-button">Suggest clothes for travel</button>

<div id="suggestion-target"></div>

<script>
  const locationInput = document.getElementById("location");
  const generateBtn = document.getElementById("generate-button");
  const suggestionTarget = document.getElementById("suggestion-target");

  generateBtn.addEventListener("click", async () => {
    suggestionTarget.innerText = "generating packing suggestions...";

    const resp = await fetch(`/packing-suggestions?location=${locationInput.value}`);
    const suggestion = await resp.text();

    suggestionTarget.innerText = suggestion;
  });
</script>

Now you have a simple endpoint for helping your users decide how to prepare for their trip.

☀️ “For your trip to Atlanta, Georgia, where the current temperature is 98°F and it's quite humid, it would be best to pack lightweight and breathable clothing. Here are some suggestions:

Light Cotton Shirts/Tops: Help you stay cool.

Shorts or Loose Pants: Opt for breathable materials.

A Wide-Brimmed Hat: To protect from the sun.

Sunglasses and Sunscreen: Essential for sun protection.

Comfortable Sandals or Breathable Shoes: Keep your feet cool.

A Lightweight Jacket or Sweater: For cooler indoor environments due to air conditioning.

Make sure you stay hydrated and take breaks in the shade or indoors as it seems quite hot and humid out there!”

Advanced workflows

These examples are just the beginning of what can be achieved on Netlify. Customers are building out very complex background data processing workflows on Netlify with the ease thanks to the automatic scaling and managed infrastructure. Retrieval augmented generation (RAG) is as easy as selecting a retrieval data store (e.g. Pinecone), using async functions to populate the database, and make the retrieval and inference calls within your endpoints. Combine this with framework techniques like generative UI and you have some amazing opportunities!

Securing AI endpoints

As you build out your web experiences, you need to ensure bad actors are not able to abuse your endpoints causing outages or increased provider billing.

Here are some basic initial steps to ensure you’re building in a secure manner

Store API keys as environment variables. Marking them as secrets will add more protections. Use the Netlify UI, API, or CLI to add these environment variables and avoid committing them to your source code.
Create different API keys for your different deploy contexts. Production should have a different API key than development or pre-production. This reduces the chance of those API keys be exposed through development environments on your local machines.
Treat data sent to your endpoints and generated data as unsafe input. Ensure the expected data is being provided to your endpoints and enforce nothing else is being sent. Generated content from model inference can be erroneous or produce unsafe content. If you’re using generated content elsewhere in your system (such as putting it in a DB, using it in queries, presenting it on the UI) you should treat this content similarly as user content and protect your system from dangerous values.

Controlling Access to your endpoints

Netlify has DDoS protections in place for all customers that constantly protects against global attacks. All sites are different and you know your users and usecases better than Netlify, so you can leverage Netlify’s capabilities to add more protections for who can access the site itself and to what degree they should be using it. Here are some ways of achieving that:

Ensure the expected clients are calling your endpoints. This is the basics around ensuring the client is who you expect them to be. For example, ensuring that the Origin header matches your site. If you only expect authenticated users, you should check the session information as well.
Enable access control protection for your site. When you create PRs and code branches, you’re usually creating preview environments to verify changes. This creates a URL for your team to access and test changes. These are extremely useful but it’s not very often that these are required to be publicly accessible for anyone to use. If you want to lock down who has access to these environments, you can enable password protections, IP requirements, or even require the end user to be someone on your Netlify team account to access the site.
Add rate limits that match your expected traffic patterns. Netlify has very powerful rate limiting capabilities that can target broad sets of users or very granular areas of your site. With these capabilities, you can assess your AI endpoints and enforce rules based on your expectations of usage. For example, our endpoint to generate suggestions for clothes to pack, we do not expect this to be called many times by the same user within a short period of time. I would create a rate limiting rule that enforces a limit that no one device should call that endpoint more than 5 times a minute. Whether it’s abuse or a bug on the site’s code, you’ll be protected from these endpoints being called too many times.

Performance optimization

A key challenge in building with AI tools is performance. If you’re expecting a model inference call to be as fast as a traditional database read, you’ll have a harsh awakening. Over time, we expect that inference providers are going to get faster but until then here are some opportunities to consider when creating more performant AI experiences.

Caching results. The de facto initial perf consideration is deciding if a given response from your endpoint can be cached on the CDN or the browser for some period of time. Netlify has industry leading controls for explicit caching/purging rules for the CDN.
Blob storage of results. This is another form of caching but, unlike browser/CDN cache, this storage would be global. Let’s say you built an AI experience that processes many large documents to compute a summary. If your end users are teams that could ask to process the same large documents, you would want to reuse the results of the initial processing. This is where Netlify Blobs is very powerful. They can be easily used to store/fetch data saving time and money for intensive AI calculations. In addition to performance, this approach is also useful for consistency of results. AI tools tend to generate slightly or significantly different results each time they are called with the same information - that can cause confusion when your users expect the same information.
Pick the right model, then pick the right provider. As mentioned, Netlify’s platform allows teams to pick the right tool for the job. As you evaluate models, you might decide on a model that’s well supported across many platforms. If that’s the case, it’s a good opportunity to assess if you’ll have a faster experience with a different provider. For example, if you decide to use the open Llama 2 7B model from Meta, then you’d find it’s supported across many providers. Choosing a provider like Groq might provide substantial performance benefits because they are focused on high performance inference that includes that model.

Wrapping up

The key takeaways for building AI on Netlify

Start with a problem that AI should solve.
Decide your composable AI stack. With Netlify, you can evolve this stack over time.
Start building by leveraging Netlify’s infrastructure - you focus on the feature, we will handle the infra.
As you advance in complexity, Netlify will be there to let you choose the right tools and support the intensive workloads and patterns you’re building.
Secure your endpoints using protections in your code and granular access controls.
Improve the performance and consistency of AI experiences leveraging the caching, data stores, and the right providers.

Avoiding lock-in for your image pipeline with Nuxt Image and Netlify Image CDN

Phil Hawksworth — Fri, 19 Apr 2024 09:53:12 +0000

Resizing and optimizing image assets in our web projects has become both an important part of the efforts to safeguard performance, and also a common developer experience or code efficiency wrinkle. Many frameworks seek to streamline this for users and developers alike, and often leverage image services such as Netlify Image CDN, Cloudinary, or Imgix. Nuxt Image does this in a way that does not lock you in to any one provider, and is incredibly simple to set up with Netlify.

TL;DR

Here, we'll look at the steps to adding Nuxt Image to a Nuxt project, and see how it is automatically powered by Netlify Image CDN when deployed to Netlify. We'll also see how this can be used and tested in a local development context.

Prerequisites

To code along as we go, you'll need:

Node.js
Netlify CLI for local development with Netlify Image
A Netlify account for deploying a version to test in production

JFDI (just deploy it)

If you'd prefer to just clone and deploy an example to explore, click the button below and you'll very quickly have an example Nuxt site using Netlify Image to power Nuxt Image deployed and ready to tinker with.

Adding Nuxt Image to a Nuxt project

Nuxt Image is a module dedicated to providing image asset optimization, resizing, and associated markup generation for your Nuxt sites. If you have a project already, you can add it that, or if you'd prefer a totally clean start, use the Nuxt CLI (nuxi) to quickly create a new starter Nuxt project to experiment with.

npx nuxi@latest init my-app

Add the Nuxt Image module as a dependency to your project

The Nuxt CLI can help us with this too, which for convenience, we can use via npx like this:

npx nuxi@latest module add image

Tell your Nuxt project that you're using the module

Adding the module to your Nuxt configuration file, nuxt.config.js, will make <NuxtImg> and <NuxtPicture> components available to use in your application.

export default defineNuxtConfig({
  modules: ["@nuxt/image"],
});

Add an image to your application using `<NuxtImg>`

Nuxt Image and Netlify Image CDN can serve images assets which are part of the site repo or sourced from an external resource. To start, let's add a local image and display it in a page template.

Various attributes and modifiers can be set and passed along to the underlying image service provider.

<NuxtImg src="owl.jpg" height="400" width="600" fit="cover" />

Testing Nuxt Image in your local environment

During development, you'll want to get a realistic picture (Yes, I saw this pun coming, and did nothing to avoid it. You're welcome) of how everything is working using the underlying image provider, in our case Netlify Image CDN. Luckily, we can gain access to this by simply running our local build with Netlify Dev.

Netlify Dev is bundled into Netlify CLI and will detect your local site characteristics and run your build for you when you run the command netlify dev in your project directory (or ntl dev if you want to save a few keystrokes)

By running your project with netlify dev you'll gain local access to a number of the facilities of the Netlify platform such as redirects, serverless and edge functions, blob storage, and Image CDN (which is what we care about here)

More specific local dev command control

If for some reason your project is not correctly detected and run by netlify dev, or if you have some exotic local dev commands that you run, you can configure this with a netlify.tomlfile.

Explicitly specifying Netlify Image CDN as a provider

Although Netlify will default to using Netlify CDN automatically, you can explicitly specify this by adding an image object to your nuxt.config.ts file and declaring your provider.

export default defineNuxtConfig({
  modules: ["@nuxt/image"],
  image: {
    provider: "netlify",
  },
});

Allowing external image sources

To use images from external sources in Nuxt Image, with the same optimizations, CDN caching, and manipulation as with your local images, you need to declare the allowed domains by adding a domains array to your nuxt.config.ts file.

export default defineNuxtConfig({
  modules: ["@nuxt/image"],
  image: {
    provider: "netlify",
    domains: ["images.example.com"],
  },
});

Ummm... that's it

The tl;dr could perhaps have been:

Add the dependency
Add it to the config
Use the component
Ship it

Thanks to the thoughtful abstractions provided by Nuxt Image, this is all you need to do to use <NuxtImg> with Netlify powering the image optimizations and manipulations. You might have noticed that we've not even added any mention of Netlify Image CDN to the codebase at this stage.

Nuxt Image will automatically detect when it's being deployed to Netlify and use Netlify Image under the hood.

The power of primitives

One of the principles we value at Netlify is providing developers and framework authors access to powerful primitives to power their applications (or the frameworks that power the applications of others).

Nuxt Image makes use of one such primitive perfectly here, offering convenience to Nuxt users without the need to learn about the underlying primitives (although you could use the Image CDN directly if you wished, or if your site didn't justify the use of a framework).

More information

Netlify integrations can now inject serverless functions to enhance any site. Here’s how

Karin — Thu, 11 Apr 2024 12:01:24 +0000

It’s long been possible to use Netlify Functions in your site. But with the Netlify SDK we’re bringing the power of function injection to integration builders as well. This allows you to build one integration that can power any of your Netlify sites using Netlify Functions with the click of a button! This guide will show you three different types of functions you can inject into a site.

TL;DR

This guide explains the three different types of functions that you can inject into a site using a Netlify integration: serverless functions, scheduled functions and background functions (only available for sites that are on Core Pro and Core Enterprise plans). We'll make an integration by using the functions boilerplate from the Netlify CLI, and deploy it for use in an example site.

You can explore the full source code with examples to see how to inject each of these three types of functions. Or you can add this integration to your Netlify account by clicking the button below.

You can explore the full source code of this integration to see how we built this integration. Or add the integration to your Netlify account by clicking the button below.

Prerequisites

Let’s get started

First, run npm create @netlify/sdk@latest to create a new integration. Answer the prompts following the steps below.

? Where do you want to create the integration? sdk-sf-injection-integration
? What is the slug of the integration? (e.g. my-integration) sdk-sf-injection-integration
? Summarize what your integration does. This will be shown on the integration's card on the Integrations page. It has some examples for
injecting functions
? Which boilerplate should be included? Functions Injection (beta)
? What level will this integration be installed on? site (recommended for Build Event Handlers, Edge Functions and Functions)
? Which package manager do you want to use? pnpm
? Do you want to create or link a Netlify site to your integration? This will help you test your integration and will be used to host
your integration. skip

This will create your integration in the folder with the name you provided! It will have a scaffold that the SDK created for you. There is a basic structure there that looks like this:

├── integration.yaml
├── netlify.toml
├── node_modules
├── package-lock.json
├── package.json
├── src
│ ├── index.ts
│ └── functions
│   └── hello-world.mts
└── tsconfig.json

integration.yaml - The integration configuration file. This is where you configure the integration name, description, and other metadata.
netlify.toml - The Netlify configuration file. This is where you configure the settings for your integration.
src/index.ts - The entry point for developing the integration.
src/functions/ - The folder to store your functions in.
src/functions/hello-world.mts - An example function.

Deploy the integration

You have a working integration now! Follow this guide to deploy your integration to your Netlify account so we can try it out on a Netlify site.

After following that guide, let’s try it out on one of your Netlify sites! You can test it out by finding a site in your Netlify account (make a simple test site if necessary). When you’re in the dashboard of that site, select ‘integrations’ in the site’s sidebar. Then, find your integration in the list of private integrations. The last step is to click ‘enable’ on the integration card.

Test it out by redeploying your test site and visiting your site on the /.netlify/functions/sf_prefix_hello-world path. It should say Hello, world!.

Check out the integration code

Open up the src/index.ts file in your editor to see how the integration is set up. In that file you’ll see the following:

Test it out by redeploying your test site and visiting your site on the /.netlify/functions/sf_prefix_hello-world path. It should say Hello, world!.

Check out the integration code

Open up the src/index.ts file in your editor to see how the integration is set up. In that file you’ll see the following:

// src/index.ts
import { NetlifyIntegration } from "@netlify/sdk";

const integration = new NetlifyIntegration();

integration.addFunctions("./src/functions", {
  prefix: "my_unique_prefix",
});

export { integration };

The addFunctions method defines where the SDK can find your function. In this case it’s ./src/functions. It also provides a prefix for your functions. This is important because it helps avoid naming conflicts with functions that might be injected by other integrations or frameworks.

Different function options

Let’s dive into the different types of functions you can inject through the SDK: serverless functions, background functions and scheduled functions.

Serverless function

The first type is the one that is already part of the scaffold that the SDK created for you, a default serverless function.

What can you use a serverless function for?

These types of functions can be used for a lot of different usecases, some examples are fetching live data from an API, returning dynamic images, sending automated emails or validating user input.

How do you create a serverless function?

If we open the file src/functions/hello-world.mts in the integration’s repository we’ll see the following:

// Documentation: https://sdk.netlify.com

export default async () => {
  return new Response("Hello, world!");
};

You’re looking at the most basic version of a function. As mentioned before, this function can be found on the /.netlify/functions/my_unique_prefix_hello-world endpoint on sites where it is installed. You can change this path by adding a config to the file like this:

// Documentation: https://sdk.netlify.com

export default async () => {
  return new Response("Hello, world!");
};

export const config = {
  path: "/test",
};

How do you use a serverless function?

If you were to commit this change to your integration and push it with continuous deployment set up, it will automatically deploy the changes to your integration. When you try it out on your test site by redeploying your site, this function should be accessible through the /test endpoint.

Background function

Background functions can only be used on sites in teams that are on Core Pro or Core Enterprise plans, so keep this in mind if you’re planning on building that kind of integration.

What can you use a background function for?

A background function is useful if your integration needs to inject a function that has to run for longer than the 10 second maximum execution time permitted for regular serverless functions. A background function can run for up to 15 minutes and doesn’t need to complete before a visitor can take next steps on the site it is injected in. It can be used for tasks such as batch processing, scraping or for slower API workflow execution.

As mentioned in the background functions documentation, background functions are invoked asynchronously. They return an initial 202 success response and will then run in the background until it completes.

How do you create a background function?

Creating a background function works similar to normal functions, the only difference is that you append the name of the file with -background. Let’s create one!

First, let’s install a useful dependency with npm install @netlify/functions. Then, in your src/functions directory create a file called count-background.mts, add the following content:

import type { BackgroundHandler, HandlerEvent, HandlerContext } from "@netlify/functions";

export const handler: BackgroundHandler = (event: HandlerEvent, context: HandlerContext) => {
  const sleep = (ms: number) => {
    return new Promise((resolve) => setTimeout(resolve, ms));
  };

  (async () => {
    for (let i = 0; i <= 60; i++) {
      const date = new Date();
      await sleep(1000);
      console.log(date.toLocaleString(), i);
    }
    console.log("Done");
  })();
};

export const config = {
  path: "/count",
};

How do you use a background function?

This deploys to an endpoint at /count relative to the base URL of the site your integration is used on. When this function is invoked, the function returns an initial 202 success response. It will then log numbers 1 through 60. Try it out by committing it to your integration’s repository and pushing your changes. Your integration will redeploy, after this make sure to also redeploy your test site and call this new function.

Scheduled function

Scheduled functions are an exciting feature that makes it possible to run functions on a regular and consistent schedule, kind of like a cron job!

What can you use a scheduled function for?

Scheduled functions provide so many different possibilities! From invoke a set of APIs to collate data for a report at the end of every week to backing up data from one data store to another at the end of every night or building and/or deploying all your static content every hour instead of for every authored or merged pull request.

How do you create a scheduled function?

Creating a scheduled function works similar to normal functions, the only difference is that you export a config object from the file that defines when the function should run with something called a “cron expression”.

Create a new file in your src/functions directory called hourly-run.mts and add the following content:

import type { Config } from "@netlify/functions";

export default async (req: Request) => {
  const { next_run } = await req.json();

  console.log("Received event! Next invocation at:", next_run);

  return new Response("OK");
};

export const config: Config = {
  schedule: "* * * * *",
};

How do you use the scheduled function?

Commit it to your integration’s repository and push your changes. Your integration will redeploy, after this make sure to also redeploy your test site and call this new function. By going to your function logs you should be able to see an hourly message.

What’s next?

Go ahead and use all of these new possibilities to build something that your team can really use with a private integration! Create one integration and apply it to your different Netlify sites to automate your workflows. Happy coding!

More information

Create an integration that injects edge functions into any site

Karin — Wed, 03 Apr 2024 11:51:36 +0000

Netlify's edge functions have been a useful tool for developers wanting to add logic like transforming responses, setting custom request headers, localizing content based on the user's location, and more. But we also wanted to make it easy for integration developers to inject edge functions into the user's site. This expands the possibilities for what you can do with Netlify integrations and allow the creation of integrations that can modify the user's site at the edge.

TL;DR

In this guide you're going to use the Netlify SDK to create an integration that can block content based on the location of your site visitor. You'll create an integration that injects an edge function into the user's site that checks the user's location and blocks the content if they are in a specific country. You’ll then be able to use this integration on any of your Netlify sites by enabling and configuring them.

You can explore the full source code of this integration to see how we built this integration. Or add the integration to your Netlify account by clicking the button below.

Need full control on who gets to access your sites?

While this integration might provide some control already, if you’re looking for a full-fledged solution to control who can access your Netlify site, then take a look at Netlify Firewall Traffic Rules. This feature empowers Enterprise customers with Netlify High-Performance Edge to proactively control who can access their Netlify web properties based on the geographic location and IP address of the requestor, in real-time.

Prerequisites

Let's get started

First, run npm create @netlify/sdk@latest to create a new integration. Answer the prompts following the steps below. If you're using Visual Studio Code, you can configure it to use Edge Functions. This will install the Deno extension and create a new settings file for you.


? Where do you want to create the integration? NAME-OF-YOUR-INTEGRATION
? What is the slug of the integration? (e.g. my-integration) SLUG-OF-YOUR-INTEGRATION
? Summarize what your integration does. This will be shown on the integration's card on the Integrations page. DESCRIPTION-OF-YOUR-INTEGRATION
? Which boilerplate should be included? [more than one]
? Which boilerplate should be included? Integration UI, Edge Function Injection (beta)
? What level will this integration be installed on? site (recommended for Build Event Handlers and Edge Functions)
? Would you like to configure VS Code to use Edge Functions? yes
? Which package manager do you want to use? pnpm
? Do you want to create or link a Netlify site to your integration? This will help you test your integration and will be used to host your
integration. skip
? A new VS Code settings file will be created at /path/.vscode/settings.json yes
? The Deno VS Code extension is recommended. Would you like to install it now? yes

This will create your integration in the folder with the name you provided. The Netlify SDK will scaffold the basic structure needed for your integration and output the required files:

├── integration.yaml
├── netlify.toml
├── node_modules
├── package-lock.json
├── package.json
├── src
│ ├── index.ts
│ └── edge-functions
│   └── hello-world.ts
└── tsconfig.json

integration.yaml - The integration configuration file. This is where you configure the integration name, description, and other metadata.
netlify.toml - The Netlify configuration file. This is where you configure the settings for your integration.
src/index.ts - The entry point for developing the integration.
src/edge-functions/ - The folder to store your edge functions in.
src/edge-functions/hello-world.ts - An example edge function.

Deploy the integration

You have a working integration now! Let's try it out by deploying your integration as a private integration.

Now that you've created your private integration, let’s try it out on one of your Netlify sites! You can test it out by finding a site in your Netlify account (make a simple test site if necessary). When you’re in the dashboard of that site, select ‘integrations’ in the site’s sidebar. Then, find your integration in the list of private integrations. The last step is to click 'enable' on the integration card.

You can test it out by redeploying your site and then visiting your site on the /test path. You should see the message "Hello, world!".

Customizing

Now that you've seen your integration in action, let's look at the code and customize it so it can block content based on the location of your site visitor.

First let's look at the src/index.ts file. In there you can see that it creates a new NetlifyIntegration instance and calls the addEdgeFunctions method to define where the edge functions are located in the codebase. In this case it's ./src/edge-functions. It also provides a prefix for the edge functions. This is important because it helps avoid naming conflicts with edge functions that might be injected by other integrations or frameworks. Let's change that prefix from ef_prefix to block_content.

// src/index.ts
import { NetlifyIntegration } from "@netlify/sdk";

const integration = new NetlifyIntegration();

integration.addEdgeFunctions("./src/edge-functions", {
  prefix: "block_content",
});

export { integration };

This is step 1 in getting edge functions injected into the user's site. The next step is to define your edge function. In this case the boilerplate has already created an example edge function for you in the src/edge-functions/hello-world.ts file. Let's change this edge function's filename to block-content.ts and update the code to block content based on the user's location.

// src/edge-functions/block-content.ts

export default async (
  _request: Request,
  context: { geo: { country: { code: string; name: string } } }
) => {
  // Get the BLOCKED_COUNTRY_CODE from the site's environment variables.
  const BLOCKED_COUNTRY_CODE = Netlify.env.get('BLOCKED_COUNTRY_CODE');

  // Use context.geo to find the country code and name.
  const countryCode = context.geo?.country?.code;
  const countryName = context.geo?.country?.name';

  // Use the countryCode to check if we should block it.

  if (countryCode === BLOCKED_COUNTRY_CODE) {
    return new Response(
      `We're sorry, you can't access our content from ${countryName}!`,
      {
        headers: { 'content-type': 'text/html' },
        status: 451,
      }
    );
  }

  // Get the response of the original content that this path pointed to.
  // Learn more: https://docs.netlify.com/edge-functions/api/#use-conditional-request
  const response = await context.next();

  // Return the original response
  return new Response(response);
};

// This defines the path that this edge function will run on
// In this case, it runs on every path of the site.
export const config = {
  path: '/*',
};

As you can see, we are using the context.geo.country.code to get the country code of the user's location. We then compare this to the BLOCKED_COUNTRY_CODE environment variable. If the user is in the blocked country, we return a 451 status code with a message that they can't access the content. Otherwise, we return a 200 status code with a message that they can access the content.

Let's commit these changes to your integration and push it. If you've set up continuous deployment for your integration, it will automatically deploy the changes to your integration if you push the commit to your main branch.

Testing

Now on your test site, add the BLOCKED_COUNTRY_CODE environment variable with the country code you want to block. It might be interesting to try it with your own country code to see if it works. After you've added the environment variable, redeploy your site and visit it. You should see the message that you can't access the content from your country.

Add an integration UI

Do you want to go one level further with developer user experience? Try building your own integration UI that allows the developer to set the BLOCKED_COUNTRY_CODE environment variable. If you want to see an example of how this code could look, check out the readme of the repository to see how we built it in this example integration!

Other things to try and more information

If you want to know more about edge function injection through integrations, make sure to read the documentation! It walks you through the steps to create an integration that injects edge functions, but also explains more complex things like the order of execution for edge functions when injected into a user’s site through an integration, and how they interact with any user-defined edge functions.

Happy coding!

Trigger a site update from anything that speaks HTTP with build hooks

Phil Hawksworth — Tue, 02 Apr 2024 09:40:00 +0000

Many might remember (or still be subjected to) long, drawn-out deployment processes. Complex, monolithic products often needed a time-consuming deployment process, taking many days and many people. CI/CD tooling transformed this aspect of web development and also unlocked the potential for highly performant and robust static assets to power sites that frequently update to stay fresh. Triggering a site build and deployment at the right moment is key to this, and build hooks give us that ability.

TL;DR

We can manage and monitor the events that trigger updates to our sites with build hooks. In this guide, we'll see how simple it is to create build hooks from the Netlify UI or using the CLI, and show how to conveniently test them.

Creating build hooks in the Netlify UI

By creating different build hooks, we can initiate new builds from all sorts of different events and see which event triggered our builds. To create a new build hook visit your Site configuration in the Netlify UI and go to Build & deploy to find the Build hooks panel.

You can select the branch that you'd like to deploy and give your new build hook a meaningful name.

It's not possible to edit existing build hooks, but the list of your site's build hooks gives easy access to copy their URLs, and to copy a cURL command to test them out. You can also delete build hooks from here too.

Creating build hooks with the Netlify CLI

The Netlify CLI doesn't include commands to manage build hooks, but the Netlify API does. Since the CLI also gives access to any API command, you can use that facility to do this from your command line or programmatically should you wish.

Bonus Netlify CLI tip

In addition to the built-in utilities in the Netlify CLI, you can also access API commands like so:

netlify api {API—METHOD}

Try running netlify api --list to show the available API methods and get quick access to their documentation.

Use the following command to list any build hooks on your site. (You'll need your Site ID, which you can get from the Netlify UI or from the CLI by running netlify status)

netlify api listSiteBuildHooks --data '{"site_id": "YOUR—SITE—ID"}'

To create a new build hook using the CLI, use the createSiteBuildHook API method, passing it the required data:

netlify api createSiteBuildHook --data '
  {
    "site_id": "YOUR—SITE—ID",
    "body": {"title":"My build hook", "branch":"main"}
  }'

The command will return information about your new build hook including its URL:

{
  "title": "My build hook",
  "branch": "main",
  "url": "https://api.netlify.com/build_hooks/66058fe91febf5273753e516",
  "draft": false,
  "created_at": "2024-03-28T15:42:33.674Z",
  "id": "66058fe91febf5273753e516",
  "site_id": "41d9d252-cc2d-4600-bf60-XXXX",
  "msg": "POST https://api.netlify.com/build_hooks/66058fe91febf5273753e516 to trigger a build"
}

Testing a Build Hook

Invoking a build hook is as simple as making an HTTP POST request to its URL. These URLs contain a unique, non-guessable path but no other form of authentication. It's recommended that you don't advertise your build hook URLs publicly, although it is trivial to delete a build hook and you can create as many as you need. (The ones in this post are all deleted, before you try to have some fun with me!)

You can make an HTTP POST from your command line using cURL. There is no payload to pass, just an HTTP POST to the correct URL. Like this:

curl -X POST -d {} https://api.netlify.com/build_hooks/{YOUR-BUILD-HOOK-ID}

After making the request, you'll see a new build identified with the label you gave to your build hook in your site's deploys in the Netlify UI. Or you could look for the newly requested build by inspecting your deploys with the Netlify Raycast extension if you prefer not to leave your desktop.

Safeguards against build thrashing

Triggering builds programmatically from a variety of different sources and events has the potential to swamp Netlify with requests to build and deploy your site, so we have some safeguards against that, and some recommendations to further protect your build minutes.

The Netlify Build Bots (as they are affectionately known internally at Netlify) have the intelligence to protect our systems and avoid wasting your build minutes. While a build is in progress, any additional build requests are queued behind it until the active build completes, at which time all subsequent build requests are skipped except for the most recent one. This avoids wasted builds that would have been quickly superseded and also gets the most recent request processed in a more timely way.

You can also avoid making excessive build requests by being thoughtful about what events you choose to trigger a build.

For instance, most headless content management systems (CMS) can post to a webhook for different types of events in their systems. Choose wisely here. For convenience, many save your content automatically as you type. This has saved my bacon (that is to say, my content) many times over the years, but also resulted in a lot of build requests to my sites as each keystroke created another request to build. Using the configuration of your chosen CMS to request a build based on publishing events rather than save events can be a good choice.

Uses for build hooks

Combining build hooks, with access to data and content from a variety of tools and services, and the ability to trigger calls to your build hooks from different events makes for a huge array of possibilities.

By making APIs the interfaces between services, and by making the incredibly ubiquitous HTTP the means to communicate between services and trigger actions, we can compose many tools and services together with excellent hygiene and defined roles and responsibilities.

Unifying content sources, digital asset management systems, version control systems, and so much more, all becomes viable and manageable.

In addition to the more conventional uses we might imagine, I've seen many creative uses of build hooks too, with people calling on them to trigger site builds from Alexa, Apple Shortcuts on an iWatch, hardware buttons, and even motion sensors!

Whether we're having fun or solving big, serious infrastructure and tooling challenges, the days of high friction and painful deployment processes are well and truly over.

More information

Using custom error handling if a serverless function has crashed

Phil Hawksworth — Mon, 25 Mar 2024 10:36:00 +0000

When code is executed at request-time rather than at build time, and if it influences what visitors to your site see, then it is vitally important that you can control what happens should that code encounter an error. Displaying a message like "a serverless function has crashed" or a cryptic HTTP error code makes for a rough user experience. That's why Netlify edge functions give you some helpful options to gracefully handle errors, and fully control the experience passed on to the users.

TL;DR

We'll look at how to configure the custom error handling available in Netlify edge functions, and try them out with some simplified examples which you can also clone and explore in your own local and deployed sites.

The default error page

If an error ever causes an edge function to crash, that error is written to the function logs and by default it will also be displayed as a response from the Edge Handler. This default function error page is helpful for the developer, but not so much for the user.

Custom error handling in edge functions

You can configure this error handling behavior to customize the experience. You have three options:

Show the default failure page
Silently bypass the error
Display your own custom error page

1. Show the default failure page

The custom error handling is configured directly in your edge function by adding an onError property to the config. If you don't specify an onError behavior, the default of fail will be used, as you can see here.

import { Config } from "@netlify/edge-functions";

export default async () => {
  throw new Error("error");
};

export const config: Config = {
  // Display the failure message
  // (This is the default behavior if not configured)
  onError: "fail",
};

2. Silently bypass the error

By setting the onError option to bypass, an erroring edge function still throws an error which is entered into the error logs, but it does not halt the progress of the request chain. If an asset was to be returned from this request, that will still happen even though the function encountered an error.

You can see that in this example, where an edge function is invoked on requests made to the intended page. Even though the function errors, you'll still reach the intended page.

import { Config } from "@netlify/edge-functions";

export default async () => {
  throw new Error("error");
};

export const config: Config = {
  // Silently bypass the error
  onError: "bypass",
};

3. Display your own custom error page

By setting the onError option to hold any path on your site, starting with /, the Edge function still throws an error which is entered into the error logs, but the user sees the result of am HTTP rewrite to the path of our choosing within the site. This allows us to let them down gently with whatever nicely designed experience we chose, while logging the error behind the scenes.

You can see that in this example where an edge function is invoked on requests made to the this erroring route which results in you seeing the custom error page.

import { Config } from "@netlify/edge-functions";

export default async () => {
  throw new Error("error");
};

export const config: Config = {
  // Redirect the user to any URL in your site
  onError: "/your-far-prettier-error-page",
};

Try for yourself

Visiting these example links only showed you the view intended for the user. To see the error logging behind the scenes, and to experiment more, you can clone and deploy your own version of these simple examples by clicking the button below.

Build faster with the official Netlify Raycast extension

Phil Hawksworth — Fri, 15 Mar 2024 10:25:00 +0000

Raycast is an outstanding productivity tool for Mac OS offering all sorts of utilities, helpers, and deep integrations. It also has a thriving extension ecosystem. Netlify's official Raycast extension utilizes Netlify's own APIs and offers a number of helpful tools and conveniences for developers building for the web with Netlify.

TL;DR

This post shows how to install the free Netlify Raycast extension, and explores some of the useful features it provides. Don't fancy reading? There is a quick video summary too.

Install the free extension

Existing Raycast users can just click the button below, or you can head over to the Raycast site for more information and the latest release details for the Netlify extension.

Direct docs access

Quick access to the Netlify docs with less context switching is really nice. You can search the docs from within the Raycast UI and also add shortcuts to pages and locations in the docs that you might visit regularly. Assign a hotkey or custom trigger for this and the friction reduces even further.

Explore sites and deploy resources

Raycast lets you swiftly find and access management of your sites hosted on Netlify. It's a speedy way to browse, filter, and access your sites, so you can see what is happening in your Netlify projects without leaving your desktop, and then jump directly into the site, admin, or repo you're interested in. The convenience of accessing site details, scoping by team, and navigating to GitHub repositories is a real bonus. I use this a lot, especially as a stepping stone to exploring site deploys or site repos.

You can also monitor your deploys this way. Access to the active and previous deploys is made more convenient thanks to the ability to filter by deploy context (such as branch, preview, or production), and by team. I love being able to see the status of a recent build quickly, and then quickly access the underlying pull request or code change that triggered the build. This is all available via the Netlify admin, but having it accessible quickly from the Raycast UI brings it closer to where I am working and speeds me up.

Find local Netlify projects

You can also use this to locate your Netlify projects on your local machine. Raycast makes them available for you to filter by name to quickly find projects and get into your code fast. After finding your local project, you can jump into it, open the underlying version control repo, open the Netlify admin for this project and more.

Review team actions

Working in a team? There's extra help for you here too. The extension gives quick access to the team audit log. This functionality can be really useful for teams collaborating on projects and accounts, allowing you to filter and review actions taken on the account by colleagues and collaborators. With the ability to filter by team and access the details of audit logs, team actions across projects become more transparent. Very handy.

There's more to explore in this extension, and you can also submit feature requests vis the Raycast code repo. Why not install it and give it a try?

Install the free extension

You can visit the Netlify Raycast extension page for more information about the extension and to install it from there, or if you're already a Raycast user, you can click the link below to install it directly.

How to serve optimized images using Netlify's Image CDN

Phil Hawksworth — Mon, 04 Mar 2024 13:11:00 +0000

Not only can Netlify's Image CDN optimize image assets to improve site performance, but it can also handle common asset manipulation tasks on the fly. This cuts your site build times and powers valuable techniques such as responsive images and lazy loading.

TL;DR

Use a URL like this to serve your image through Netlify's Image CDN:

/.netlify/images/?url=/images/your-image.jpeg

This post explains how you can quickly start using the Netlify Image CDN, and demonstrates some helpful techniques to make using this service fit conveniently into your development workflow. Learn how to use a single image to provide all of the required asset sizes for responsive images.

No setup required, just a URL

To begin using Netlify's Image CDN, you don't need to install or enable anything in your Netlify Admin. You simply need to make requests for your assets via a special URL pattern that Netlify recognizes:

# An image served from your site's files
/images/some-image.jpeg

# The same image, but served from Netlify's optimized Image CDN
/.netlify/images/?url=/images/some-image.jpeg

You might recognize this special URL pattern from other tools you can use in your sites on Netlify, such as Netlify Functions. That /.netlify/ path is reserved on Netlify to access these sorts of helpers and utilities, so for those already using Netlify Functions this will already feel a little familiar.

Convenience and future-proofing

When using a service like this, I like to make it as unobtrusive in my code as possible. That way, should I ever wish to swap it out for an alternative, I can do so without a major refactor. Since the API is the URL, a small amount of abstraction using Netlify Redirects can help us achieve that.

Let's create a convenient URL pattern we can use to serve the full-sized original image, but serve it from the Netlify Image CDN rather from our own site assets. A few lines in our netlify.toml file will do that for us:

[[redirects]]
  # Requests to URLs matching this pattern...
  from = "/images/full/:file"
  # ...will resolve to this URL pattern
  to = "/.netlify/images/?url=/images/:file"
  # ... and the status code of 200 will make this behave as a rewrite
  status = 200

Other excellent Image CDN and optimization services out there like Cloudinary or Imgix also let you control their APIs through URLs. This means that should you need to upgrade to another service, perhaps to gain access to their more detailed asset manipulation features, you can do so by modifying the URL redirect rules here in your netlify.toml (after creating accounts with them, for example), and leave all of the image URLs across your site untouched.

With our redirect rule in place, a small change to the path used to source our images will let us choose to serve that image from the Image CDN.

From this:

<!-- an image served from my assets folder -->
<img src="/images/seedlings.jpg" alt="A photo of some green seedlings" />

to this:

<!-- an image served from my Netlify's Image CDN, originally sourced from my assets folder -->
<img src="/images/full/seedlings.jpg" alt="A photo of some green seedlings" />

Tip: Assets can be on your sites or third party domains

Netlify's Image CDN needs to source and ingest your image asset before it can optimize, cache, and serve it, which is done by specifying the URL where this can be found. This might be within your site or an external domain. For security reasons, requests for assets on external domains require a little config, which we'll get to later.

On-demand image resizing and manipulation

The Netlify Image CDN can also perform a number of image manipulation tasks for us. It's very common to need differently sized versions of images for optimal display, as seen in our responsive image example above. Doing this for every single image in your site as part of each build can be computationally expensive and make builds take a long time. Handing this off to Netlify to do on-demand the first time an asset is requested in a given size and then caching that result can simplify and speed up our build process.

Including a width or height parameter in the URL will return a suitably resized image. Using just one or the other will retain the aspect ratio for us. Like this:

/.netlify/images/?url=/images/blue-flowers.jpg&width=100

/.netlify/images/?url=/images/blue-flowers.jpg&width=200

/.netlify/images/?url=/images/blue-flowers.jpg&width=400

(Image credit: TOMOKO UJ, Unsplash)

Tip

For information about all of the parameters we support for things like resizing, cropping, transforming image formats,
and more, take a look at the Transform Images section of the Image CDN
documentation

Utility URLs for resizing

Now let's make these URLs more convenient and better abstracted on our site. Similar to the redirect rule we created for our full-sized images (/images/full/file-name.jpg), we could create some mappings for common sizes we might want so that the keywords small, medium, and large each map to a URL with given width parameters. We could also make a rule which lets us pass a width parameter dynamically, like this:

[[redirects]]
  # Get a width and file name value from the URL
  from = "/images/:width/:file"
  # ...and pass them along as the correct request parameters
  to = "/.netlify/images/?url=/images/:file&width=:width"
  status = 200

Order matters

Watch out for an easy mistake here. Netlify treats the order that rules appear in the netlify.toml file as the order of priority, meaning that the first matching rule found is the one that will be applied. This is handy for creating logic in your rules.

To make our example work as we would like, we need to add the rule that catches the variable input for width after the rule that catches the word "full" in the same part of the URL as shown below:


[[redirects]]
  # Serve a full size version
  from = "/images/full/:file"
  to = "/.netlify/images/?url=/images/:file"
  status = 200

[[redirects]]
  # ...or serve a resized version
  from = "/images/:width/:file"
  to = "/.netlify/images/?url=/images/:file&width=:width"
  status = 200

Nice. Now we have some intuitive URLs we can use to serve our images in any size.

/images/100/blue-flowers.jpg

/images/200/blue-flowers.jpg

/images/400/blue-flowers.jpg

(or /images/full/blue-flowers.jpg)

Different asset sizes for responsive images

We've got everything we need to deliver the different asset sizes for use in our srcset in responsive images. A full explanation of how the responsive images work is available at MDN, but here's a look the HTML:

<img
  srcset="
    /images/200/blue-flowers.jpg   200w,
    /images/400/blue-flowers.jpg   400w,
    /images/800/blue-flowers.jpg   800w,
    /images/1200/blue-flowers.jpg 1200w
  "
  sizes="(max-width: 450px) 200px,
         (max-width: 850px) 400px,
         (max-width: 100px) 800px,
         1200px"
  src="/images/1200/blue-flowers.jpg"
  alt="Some blue flowers"
/>

Lovely! We're using readable, intuitive image URLs serving assets that are resized, optimized, and cached for us on demand. And should we decide to make changes to the size variant in our set of images we only need to edit a URL.

Depending on what tools you are using to build your sites, this can also be a useful place for another bit of abstraction. A partial or a component that generates this markup for you when you pass it a file name and an alt tag (don't forget those alt tags, friends!) can keep your code nice and clear, and formalize some common conventions across your sites for how you deliver responsive images.

Using images from remote domains

The example here uses image assets which are part of the same site, so that relative paths are passed to Netlify's Image CDN.

You can also feed the Image CDN assets from external domains. In order to prevent your site from becoming a gateway for anyone to perform unlimited image transformations on any assets, we give you control over which domains can be used. To do this, it's time to add another bit of config to your netlify.toml file, where you can add an array of granted domains and use Reg Ex to describe detailed paths etc:

[images]
  remote_images = ["https://my-images.com/.*", "https://animals.more-images.com/[bcr]at/.*"]

Assets on relative paths, sourced from your site gain all the benefits of our atomic deploys and their default cache behaviors, so assets on the Image CDN don't become outdated as you deploy updates to your site. Assets on remote domains have different default cache characteristics. For information on how to control this, and other information about using remote domains with the Image CDN, take a look at the docs.

Bonus! Instant format optimization

You can specify the format you'd like to use to deliver your assets by providing a format (fm) parameter in the URL.

However, if you don't specify a format, the Netlify Image CDN will determine the most efficient format for the browser requesting the image, and automatically return that using the following logic:

Use avif if accepted
Otherwise, use webp if accepted
If neither is accepted, use the original format

Global infra in your local development

To get access to these capabilities while running your code in a local development environment, run your build using netlify dev which enables various Netlify Build and platform services locally, to smooth your development workflow.

Running your local build this way will provide handlers to those special /.netlify/ URLs, including automatically replicating the image transformation behaviour so that you can review appropriately as you build.

The netlify dev command is made available by installing the Netlify CLI and will serve your sites locally in a way that provides access to Netlify Functions, Edge Functions, Redirects, Image CDN and more.


# Install Netlify CLI
npm i -g netlify-cli

# Run your build with additional Netlify utilities
netlify dev

Try it on one of your sites today!

More resources for handling images

Netlify Image CDN documentation
Netlify Image CDN playground
Cloudinary + Netlify integration
Unpic an open source library of helpers for images and image CDN abstraction

Forem: Netlify

How to keep your secrets secret on Netlify

Watch it in action

Debugging failed builds with Netlify

Deploy your bolt.new app to Netlify

Netlify Dynamic Site Challenge - Help Thread!

Join us for the Netlify Dynamic Site Challenge: $3,000 in Prizes!

dev.to staff for The DEV Team ・ May 1

Building AI experiences on Netlify

TL;DR

I got 99 problems and AI should solve some

Composable AI stacks

UI / Framework stack

Any Model. Any AI Pattern. Any AI Framework.

Using Anthropic for product descriptions

Step 1

Step 2

Step 3

Step 4

Using OpenAI with tool/function calling

Step 1

Step 2

Step 3

Step 4

Advanced workflows

Securing AI endpoints

Controlling Access to your endpoints

Performance optimization

Wrapping up

Avoiding lock-in for your image pipeline with Nuxt Image and Netlify Image CDN

TL;DR

Prerequisites

JFDI (just deploy it)

Adding Nuxt Image to a Nuxt project

Add the Nuxt Image module as a dependency to your project

Tell your Nuxt project that you're using the module

Add an image to your application using <NuxtImg>

Testing Nuxt Image in your local environment

Explicitly specifying Netlify Image CDN as a provider

Allowing external image sources

Ummm... that's it

The power of primitives

More information

Netlify integrations can now inject serverless functions to enhance any site. Here’s how

TL;DR

Prerequisites

Let’s get started

Deploy the integration

Check out the integration code

Check out the integration code

Different function options

Serverless function

What can you use a serverless function for?

How do you create a serverless function?

How do you use a serverless function?

Background function

What can you use a background function for?

How do you create a background function?

How do you use a background function?

Scheduled function

What can you use a scheduled function for?

How do you create a scheduled function?

How do you use the scheduled function?

What’s next?

More information

Create an integration that injects edge functions into any site

TL;DR

Prerequisites

Let's get started

Deploy the integration

Customizing

Testing

Add an integration UI

Other things to try and more information

Trigger a site update from anything that speaks HTTP with build hooks

TL;DR

Creating build hooks in the Netlify UI

Creating build hooks with the Netlify CLI

Bonus Netlify CLI tip

Testing a Build Hook

Add an image to your application using `<NuxtImg>`