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
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:
❯
npm add -D @nx/deno
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
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
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
12The 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:
1{
2 "targets": {
3 ...
4 "serve-functions": {
5 "command": "npx netlify dev"
6 }
7 }
8}
9Just 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 deploywhich 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:
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}
17Deploying 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.
Note that for a more stable and automated setup you might want to configure your CI to automatically deploy your functions.