Create a Node.js web app in Azure

Azure Web Apps provides a highly scalable, self-patching web hosting service. This quickstart shows how to deploy a Node.js app to Azure Web Apps. You create the web app using the Azure CLI, and you use Git to deploy sample Node.js code to the web app.

Sample app running in Azure

You can follow the steps below using a Mac, Windows, or Linux machine. Once the prerequisites are installed, it takes about five minutes to complete the steps.

Prerequisites

To complete this quickstart:

If you don't have an Azure subscription, create a free account before you begin.

Launch Azure Cloud Shell

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 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 steps in this topic:

Screenshot showing the Cloud Shell window in the portal

If you choose to install and use the CLI locally, this topic requires that you are running the Azure CLI version 2.0 or later. Run az --version to find the version. If you need to install or upgrade, see Install Azure CLI 2.0.

Download the sample

In a terminal window, run the following command to clone the sample app repository to your local machine.

git clone https://github.com/Azure-Samples/nodejs-docs-hello-world

You use this terminal window to run all the commands in this quickstart.

Change to the directory that contains the sample code.

cd nodejs-docs-hello-world

Run the app locally

Run the application locally by opening a terminal window and using the npm start script to launch the built in Node.js HTTP server.

npm start

Open a web browser, and navigate to the sample app at http://localhost:1337.

You see the Hello World message from the sample app displayed in the page.

Sample app running locally

In your terminal window, press Ctrl+C to exit the web server.

Log in to Azure

You'll use the Azure CLI to create the resources needed to host your app in Azure. If you run Azure CLI commands in the Cloud Shell, you're already logged in. To run Azure CLI commands locally, log in to your Azure subscription with the az login command and follow the on-screen directions.

az login

Create a deployment user

Create deployment credentials with the az webapp deployment user set command.

A deployment user is required for FTP and local Git deployment to a web app. The user name and password are account level. They are different from your Azure subscription credentials.

In the following command, replace <user-name> and <password> with a new user name and password. The user name must be unique. The password must be at least eight characters long, with two of the following three elements: letters, numbers, symbols.

az webapp deployment user set --user-name <username> --password <password>

If you get a 'Conflict'. Details: 409 error, change the username. If you get a 'Bad Request'. Details: 400 error, use a stronger password.

You create this deployment user only once; you can use it for all your Azure deployments.

Note

Record the user name and password. You need them to deploy the web app later.

Create a resource group

Create a resource group with the az group create command.

A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed.

The following example creates a resource group named myResourceGroup in the westeurope location.

az group create --name myResourceGroup --location westeurope

You generally create your resource group and the resources in a region near you. To see all supported locations for Azure Web Apps, run the az appservice list-locations command.

Create an Azure App Service plan

Create an App Service plan with the az appservice plan create command.

An App Service plan specifies the location, size, and features of the web server farm that hosts your app. You can save money when hosting multiple apps by configuring the web apps to share a single App Service plan.

App Service plans define:

  • Region (for example: North Europe, East US, or Southeast Asia)
  • Instance size (small, medium, or large)
  • Scale count (1 to 20 instances)
  • SKU (Free, Shared, Basic, Standard, or Premium)

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

When the App Service plan has been created, the Azure CLI shows information similar to the following example:

{ 
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "geoRegion": "West Europe",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "app",
  "location": "West Europe",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

Create a web app

Create a web app in the myAppServicePlan App Service plan with the az webapp create command.

The web app provides a hosting space for your code and provides a URL to view the deployed app.

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>.azurewebsites.net.

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

When the web app has been created, the Azure CLI shows information similar to the following example:

{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app_name>.azurewebsites.net",
  "enabled": true,
  "enabledHostNames": [
    "<app_name>.azurewebsites.net",
    "<app_name>.scm.azurewebsites.net"
  ],
  "gatewaySiteName": null,
  "hostNameSslStates": [
    {
      "hostType": "Standard",
      "name": "<app_name>.azurewebsites.net",
      "sslState": "Disabled",
      "thumbprint": null,
      "toUpdate": null,
      "virtualIp": null
    }
    < JSON data removed for brevity. >
}

Browse to the site to see your newly created web app.

http://<app_name>.azurewebsites.net

Empty web app page

You’ve created an empty new web app in Azure.

Configure local Git deployment

Configure local Git deployment to the web app with the az webapp deployment source config-local-git command.

App Service supports several ways to deploy content to a web app, such as FTP, local Git, GitHub, Visual Studio Team Services, and Bitbucket. For this quickstart, you deploy by using local Git. That means you deploy by using a Git command to push from a local repository to a repository in Azure.

In the following command, replace <app_name> with your web app's name.

az webapp deployment source config-local-git --name <app_name> --resource-group myResourceGroup --query url --output tsv

The output has the following format:

https://<username>@<app_name>.scm.azurewebsites.net:443/<app_name>.git

The <username> is the deployment user that you created in a previous step.

Copy the URI shown; you'll use it in the next step.

Push to Azure from Git

Add an Azure remote to your local Git repository.

git remote add azure <URI from previous step>

Push to the Azure remote to deploy your app. You are prompted for the password you created earlier when you created the deployment user. Make sure that you enter the password you created in Configure a deployment user, not the password you use to log in to the Azure portal.

git push azure master

The preceding command displays information similar to the following example:

Counting objects: 23, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (21/21), done.
Writing objects: 100% (23/23), 3.71 KiB | 0 bytes/s, done.
Total 23 (delta 8), reused 7 (delta 1)
remote: Updating branch 'master'.
remote: Updating submodules.
remote: Preparing deployment for commit id 'bf114df591'.
remote: Generating deployment script.
remote: Generating deployment script for node.js Web Site
remote: Generated deployment script files
remote: Running deployment command...
remote: Handling node.js deployment.
remote: Kudu sync from: '/home/site/repository' to: '/home/site/wwwroot'
remote: Copying file: '.gitignore'
remote: Copying file: 'LICENSE'
remote: Copying file: 'README.md'
remote: Copying file: 'index.js'
remote: Copying file: 'package.json'
remote: Copying file: 'process.json'
remote: Deleting file: 'hostingstart.html'
remote: Ignoring: .git
remote: Using start-up script index.js from package.json.
remote: Node.js versions available on the platform are: 4.4.7, 4.5.0, 6.2.2, 6.6.0, 6.9.1.
remote: Selected node.js version 6.9.1. Use package.json file to choose a different version.
remote: Selected npm version 3.10.8
remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Deployment successful.
To https://<app_name>.scm.azurewebsites.net:443/<app_name>.git
 * [new branch]      master -> master

Browse to the app

Browse to the deployed application using your web browser.

http://<app_name>.azurewebsites.net

The Node.js sample code is running in an Azure App Service web app.

Sample app running in Azure

Congratulations! You've deployed your first Node.js app to App Service.

Update and redeploy the code

Using a text editor, open the index.js file in the Node.js app, and make a small change to the text in the call to response.end:

response.end("Hello Azure!");

Commit your changes in Git, and then push the code changes to Azure.

git commit -am "updated output"
git push azure master

Once deployment has completed, switch back to the browser window that opened in the Browse to the app step, and hit refresh.

Updated sample app running in Azure

Manage your new Azure web app

Go to the Azure portal to manage the web app you created.

From the left menu, click App Services, and then click the name of your Azure web app.

Portal navigation to Azure web app

You see your web app's Overview page. Here, you can perform basic management tasks like browse, stop, start, restart, and delete.

App Service blade in Azure portal

The left menu provides different pages for configuring your app.

Clean up resources

To clean up your resources, run the following command:

az group delete --name myResourceGroup

Next steps