Add and Deploy Netlify Edge Functions with Deno

Prerequisite: A Deno Project

Have Deno already installed?

Make sure you have Deno installed on your machine. Consult the Deno docs for more details

If you don't have a Nx Deno project yet, you can easily create a new one with the following command:

npx create-nx-workspace@latest denoapp --preset=@nx/deno

Nx 15 and lower use @nrwl/ instead of @nx/

This creates a single Deno application.

You can also add a new Deno application to an existing Nx monorepo workspace. Make sure you have the @nx/deno package installed:

Directory Flag Behavior Changes

The command below uses the as-provided directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the derived option, omit the --directory flag. See the as-provided vs. derived documentation for more details.

Then generate a new Deno app with the following command:

nx g @nx/deno:app denoapp --directory=apps/denoapp

Nx 15 and lower use @nrwl/ instead of @nx/

Adding a Netlify Serverless Function

To add serverless support to the Deno project, run the setup-serverless generator. Pass --netlify to the platform argument to set it up for Netlify deployment.

nx g @nx/deno:setup-serverless --platform=netlify

Nx 15 and lower use @nrwl/ instead of @nx/

This will add a netlify.toml file and install the netlify-cli package. In addition it also creates a functions directory:

1└─ denoapp 2 ├─ ... 3 ├─ functions 4 │ └─ hello-geo.ts 5 ├─ src 6 │ ├─ ... 7 ├─ ... 8 ├─ netlify.toml 9 ├─ nx.json 10 ├─ project.json 11 └─ package.json 12

The generator updates the project.json of your Deno project and adds a new serve-functions target that delegates the local serving of the function to the Netlify CLI:

project.json
1{ 2 "targets": { 3 ... 4 "serve-functions": { 5 "command": "npx netlify dev" 6 } 7 } 8} 9

Just run nx serve-functions to start the local server.

Configure Your Netlify Deploy Settings

Make sure you have a site configured on Netlify (skip if you have already). You have mostly two options:

  • either go to app.netlify.com and create a new site
  • use the Netlify CLI and run npx netlify deploy which will walk you through the process

If you run npx netlify deploy in the workspace, the site ID will be automatically saved in the .netlify/state.json file. Alternatively adjust the deploy-functions in your project.json to include the --site flag:

project.json
1{ 2 "targets": { 3 ... 4 "deploy-functions": { 5 "executor": "nx:run-commands", 6 "options": { 7 "command": "npx netlify deploy" 8 }, 9 "configurations": { 10 "production": { 11 "command": "npx netlify deploy --prod" 12 } 13 } 14 }, 15 } 16} 17

Deploying to Netlify

To deploy them to Netlify, run:

nx deploy-functions

This creates a "draft deployment" to a temporary URL. If you want to do a production deployment, pass the --prod flag:

nx deploy-functions --prod

This invokes the "production" configuration of the deploy-functions target and passes the --prod flag to the Netlify CLI.

Configure your CI for automated deployments

Note that for a more stable and automated setup you might want to configure your CI to automatically deploy your functions.