Implement a CI/CD process to build and deploy your Node.js app to Azure

Last Update: 6/30/2017

Visual Studio Team Services provides a highly customizable continuous integration (CI) and deployment (CD) automation system for your Node.js apps. This quickstart shows how to set up CI and CD to deploy a Node.js app to an Azure web app. You create the web app using Azure CLI, then set up CI/CD in Team Services. In the CI process, you use Gulp to run Mocha tests.

node.js web app

Get ready to go

Before you begin, make sure that you are:

  • A co-administrator of the Azure subscription. If you don't have an Azure subscription, you can create one for free.

  • An administrator of the Team Services account. If you don't yet have a Team Services account, you can create one for free.

  • Using the New Release Definition Editor that is currently in preview.

    preview features action in profile menu

    new release definition editor preview on

Create an Azure web app using the CLI

The Azure Cloud Shell is a free Bash shell that you can run directly within the Azure portal. It has the Azure CLI preinstalled and configured to use with your Azure account. Click the Cloud Shell button on the menu in the upper-right of the Azure portal.

Cloud Shell

The button launches an interactive shell that you can use to run all of the following steps:

Screenshot showing the Cloud Shell window in the portal

Create a resource group with the az group create command. The following example creates a resource group named myResourceGroup in the eastus location.

az group create --name myResourceGroup --location eastus

Create an App Service plan with the az appservice plan create command. The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE

Create a web app in the myAppServicePlan App Service plan with the az webapp create command. In the following command, replace <app_name> with a unique name (valid characters are a-z, 0-9, and -). If <app_name> is not unique, you get the error message "Website with given name already exists." The default URL of the web app is https://<app_name>

az webapp create --name <app_name> --resource-group myResourceGroup --plan myAppServicePlan

Import sample code into your Team Services Git repo

In the VSTS portal, navigate to Code hub for your new VSTS project. Select the option to Import repository.

Screenshot showing menu item to import a repository

In the Import a Git repository dialog, paste the following for Clone URL.

Click Import to copy the sample app code into your Team Services Git repository.

Set up continuous integration

On the Files tab of the Code hub, click Set up build.

Screenshot showing button to set up build for a repository

You are taken to the Build & Release hub in VSTS and asked to Choose a template.

In the right panel, search for node, select NodeJS with Gulp, and then click Apply.

apply node.js gulp template

You now see all the tasks that were automatically added to the build definition by the template. These are the steps that will automatically run every time check in code.

For the Default agent queue, select Hosted VS2017.

Select the Run gulp task from the tasks. On the right side, you see the parameters for the task. Under the section JUnit Test Results, select the option to Publish to TFS/Team Services.

Click the Triggers tab in the build definition. Enable the Continuous Integration trigger. This will ensure that the build process is automatically triggered every time you commit a change to your repository.

Select Save and queue to kick off your first build. On the Queue build dialog, select Queue.

A new build is started. You will see a link to the new build on the top of the page. Click the link to watch the new build as it happens. Wait for the build to complete and succeed before proceeding to the next section.

Set up continuous deployment

Once the build succeeds, click the Release action on the build summary page.

Screenshot showing update to code

On the Create release definition dialog box, click Yes.

In the Select a Template panel, click the Azure App Service Deployment template, and then click Apply.

apply azure app service deployment template

Click Tasks, and then the Deploy Azure App Service task.

Configure the inputs for the Deploy Azure App Service task in the release definition. First, select the name of the Azure subscription to which you would like to deploy the application. If there is an Authorize button next to the input, click on it to authorize VSTS to connect to your Azure subscription.

authorize azure subscription in new release definition


If you don't see the Azure subscription in the menu, make sure you are a co-administrator of the Azure subscription you want to use. You can create your own Azure subscription for free.

Next, select the name of the Azure web app you created for the App service name.

Select the artifact trigger and make sure the Continuous deployment trigger is enabled.

build artifact trigger in release definition

Click Save. In the Save dialog box, click OK.

To test the release definition, click Release and then Create Release.

create release

On the Create new release dialog box, click Queue.

You will notice a new release being created. Select the link to navigate to the release.

new release created message

You can watch the live logs for the deployment as it happens. Wait for the release to be deployed to the Azure web app.

Update to redeploy the code

Navigate to the Code hub in the VSTS portal. Navigate to server.js file. Make the following simple change to that file by selecting the edit action.

Screenshot showing update to code

Change the following line of text:

res.send('Hello World!');

to the following:

res.send('Demo of CI/CD!!');

Commit your changes in Git. This change triggers a CI build, and when the build completes, it triggers an automatic deployment to Azure web app.

Browse to the app

Once deployment has completed, open the browser and test your web app.


Congratulations! You've deployed changes to your application using CI/CD.

Clean up resources

When no longer needed, you can use the az group delete command to remove the resource group and all related resources.

az group delete --name myResourceGroup