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.
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.
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.
The button launches an interactive shell that you can use to run all of the following steps:
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
<app_name> is not unique, you get the error message "Website with given 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.
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.
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.
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.
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.
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.
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.
Click Save. In the Save dialog box, click OK.
To test the release definition, click Release and then 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.
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.
Change the following line of text:
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