Debug and test edge function injection

This SDK functionality is in Beta.

While developing an integration that injects edge functions, you can test it locally to check if it works as expected. You also have the option of configuring your code editor for a better edge function development experience.

You can only test edge functions after you inject them into a site

Since edge functions are created within your integration, the only way to test them is by adding your integration and injecting the edge functions into a test site first. Once you run that test site, you can invoke edge functions while the site runs, as documented below. There is no way to test them in isolation.

Test your integration

To test your integration, you need to prepare a test site and then run netlify dev or netlify build to inject the edge functions.

Prepare a test site

Have a test site repository and your integration repository on your local machine.
Create a test site on Netlify.
Install the Netlify CLI with npm install netlify-cli -g.
Make sure your test site is a git repository by running git init in the root of your test site.
Log in to your Netlify account with netlify login.
Link your local test site to the test site you created on Netlify by running netlify link.
Create a netlify.toml file in the root of your test site with the following configuration. Make sure to update the name to match your integration’s slug and the path to specify the location of the integration on your local machine.

# Set the integration "name" to your integration's slug.
[[integrations]]
   name = "my-integration"

[integrations.dev]
  # Set the "path" as the path from your test site to your integration's build folder.
  path = "../path/to/integration/repository"
  # The following forces the integration to be used when building the test site.
  force_run_in_build = true

Test injection and invocations locally

Now that your test site is ready, you can test your integration and the edge functions locally. To do so, run the following command for your test site in your terminal:

netlify dev

Netlify will inject the edge functions from your integration into the site during the onPreDev build event and then start a development environment that executes edge functions on local requests.

You can then invoke and debug the edge functions on your test site by making a request to the appropriate site path for each edge function. Learn more about testing and debugging edge functions locally.

If you only want to test the injection step, you can run the following in your terminal:

netlify build --context=dev

This runs a build of your test site. Netlify will inject the edge functions from your integration into the site during the onPreBuild build event.

When you make changes to your integration’s edge functions, you can check the results in your terminal by re-running the build command. Any console.log statements will show in the terminal.

Note that if your integration includes custom build event handlers that run onPreBuild or onPreDev, Netlify injects the edge functions before your build event handlers run.

Configure your code editor

If you use Visual Studio Code, we recommend that you configure your editor for a better Edge Functions development experience.

Netlify Edge Functions use a runtime based on Deno and configuring your editor will reveal runtime-related feedback on your edge function files. The SDK will prompt you to do this configuration automatically when you create your integration. If you miss the prompt, you can also install the runtime directly from Deno.

If you answer yes to the prompt, the SDK will automatically install the runtime and update your .vscode/settings.json. Make sure the deno.enablePaths value in the configuration file points to your edge functions folder and matches the path you provide to the addEdgeFunctions method:

{
  "testing.automaticallyOpenPeekView": "never",
  "yaml.schemas": {
    "./netlifyIntegrationConfiguration.json": "ntli.yaml"
  },
  "deno.enable": true,
  "deno.enablePaths": ["./my-integration/src/edge-functions/"],
  "deno.unstable": true
}

If you use a different code editor, we recommend investigating whether a similar extension is available for use.