Create, debug, and deploy a serverless API with VS Code

Serverless offers a powerful turn to developer experience. We can prototype and build production-grade software quickly without relying on delivery processes. This means we can iterate faster, get feedback quicker, and so on.

Another reason serverless is exciting on platforms like Microsoft Azure is that you can write your code from the Azure dashboard and deploy it right away. It shows how few layers there are between dev and production. The only price to pay is that writing, testing, and deploying this way means you leave the comfort of your editor, which you probably have been using for years.

In this article, I’ll show you how you can set up Visual Studio Code to write, test, debug, and deploy a serverless API with Azure Functions.

Prefer to watch instead of read? You can follow along with the video I've created below.

Note: This is a beginner-level guide. For a deep dive into the use of Azure Functions, check out the ACG course Serverless Computing with Azure Functions or the Microsoft Learn modules around Creating Serverless Applications.

To follow along with this article, you will need the following:

1. An Azure account: It’s free and you don’t need to pay for serverless stuff unless you are building a large scale API
2. VS Code: Always and forever free
3. Node: Open source JS that runs on computers
4. npm: Package manager for Node — this comes installed with Node

Azure Function Tools interprets your serverless code and builds it. VS Code will look for it when you try to run or debug your serverless code. Run the following install command to install it.

Mac:

brew tap azure/functions
brew install azure-functions-core-tools@3

Windows, Linux, and Mac:

npm i -g azure-functions-core-tools@3 --unsafe-perm true

With the core tools installed, you can now install the VS Code extension that does all the serverless heavy-lifting for you. This extension will build, run, and even start your serverless app. It can also scaffold a new serverless function project for you using varieties of templates.

To install it, click Install from the Extension page.

The extension will need access to your Azure account before it can deploy your serverless code. To set it up, click the Azure logo that appears on the Activity Bar after installing the extension, then click Sign in to Azure:

VS Code will open your default browser and redirect to Azure’s auth page, where you can login and confirm. You can only do this if you have an Azure account.

We are done with all the chores, and we can start creating a serverless function project.

1. Click on Azure from the Activity Bar and click the Create New Project icon:

2. Choose a folder where you want this project to be created.

3. VS Code will prompt you to choose a language you plan to write your function in. In this article, I will be showing all the examples in JavaScript so you can pick JavaScript too.

4. I mentioned earlier that this VS Code extension allows you to create serverless functions using different templates. After you choose a language, the extension will prompt you to pick the starter template you want. Our example is going to be a simple HTTP API so choose the HTTP trigger template.

5. Next, enter a name for the function.

6. Lastly, choose whether you want the function to be protected or public. Choosing Anonymous makes it public and we can go with that since we are not building a secure API.

VS Code will create the function project and ask you if you want to open it in the current VS Code window or in a new window. Choose whichever works for you.

The extension created a folder and few files.

. # Function project
 ├── hello_serverless # Single function. You can add more of this
 │   ├── function.json # Settings for only the hello_serverless function
 │   ├── index.js # Function logic
 ├── host.json # Global settings for all functions in this function project
 ├── local.settings.json # Environmental variables go here
 ├── package.json # Node dependencies and config go here
 └── proxies.json

At the root is the hello_serverless folder which contains the function we created. The index.js file in this folder is your serverless function logic and you can edit it to behave however you want. It’s worth noting that this is a Node land so installing dependencies and all that good stuff is allowed.

To run the function, click the Debug button from the Activity bar and click the Play button.

After a few seconds you should see the following message in your terminal confirming that the run was successful and that your Serverless API is now running at port 7071.

Click the URL in green to preview the API. You can add the name query to the URL if you want a custom message: http://localhost:7071/api/hello_serverless?name=Chris

Open the index.js file and add a breakpoint anywhere you would like the debugger to pause the execution:

Now run the function again by clicking the Play button. Open the link in the browser and once the execution gets to that breakpoint, the browser will freeze and you can head back to VS Code to see the paused execution.

Deploying, just like creating and debugging, can also be done form VS Code. To deploy the function project we’ve created follow these steps:

1. Click the Azure button from the Activity bar and click the Deploy to function app button:

1. The extension will list all your Azure account subscriptions and ask you to pick one. If it’s a new account, you should get the default subscription. Regardless, just pick the subscription you have access to deploy to

1. Choose + Create New Function App in Azure:

4. Give the function a name. This name has to be globally unique which means that no other Azure customer has taken the name.

5. Choose Node 14 as the runtime.

1. Select the location closest to you.

VS Code will take a minute or two to set up the new function on Azure and deploy it. You will get status updated on the bottom right corner of your VS Code window while the deployment is ongoing.

Once the deployment is done, click the View output button to open the deployment log.

The log has the details about your deployment and also contains the production URL where you can preview your function. Click the URL to preview.

You can also add a name query to the URL to get a customized greeting https://acloud-fn-demo.azurewebsites.net/api/hello_serverless?name=Chris

You can add more functions to your Function project by clicking Azure icon from the Activity bar and clicking the Create function icon.

You will be asked to pick a function template and repeat the steps we covered in Create a New Function Project henceforth.

When you have created the function, you can redeploy using the steps covered in Deploying to Azure. The only difference is that instead of choosing + Create New Function App in Azure when prompted to to select a function, choose the previous function you deployed.

Try adding a Node dependency using npm install and importing that dependency in your index.js to see that it’s possible. This doc on VS Code Debugger will show how to achieve this.

Christian Nwamba is a Software Developer and Senior Developer Advocate at Microsoft. He codes, writes, teaches, speaks, and organizes developer events.