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 here 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.

Download the sample

Download the sample Node.js project from https://github.com/Azure-Samples/nodejs-docs-hello-world/archive/master.zip and extract the ZIP archive.

In a terminal window, navigate to the root directory of the sample Node.js project (the one that contains index.js).

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.

Create a project ZIP file

Create a ZIP archive of everything in your project. The following command uses the default tool in your terminal:

# Bash
zip -r myAppFiles.zip .

# PowerShell
Compress-Archive -Path * -DestinationPath myAppFiles.zip

Later, you upload this ZIP file to Azure and deploy it to App Service.

Launch Azure Cloud Shell

The Azure Cloud Shell is a free interactive shell that you can use to run the steps in this article. It has common Azure tools preinstalled and configured to use with your account. Just click the Copy to copy the code, paste it into the Cloud Shell, and then press enter to run it. There are two ways to launch the Cloud Shell:

Click Try It in the upper right corner of a code block. Cloud Shell in this article
Click the Cloud Shell button on the menu in the upper right of the Azure portal. Cloud Shell in the portal

Upload the ZIP file

In the Azure portal, click Resource groups > cloud-shell-storage-<your_region> > <storage_account_name>.

Find Cloud Shell storage account

In the Overview page of the storage account, select Files.

Select the automatically generated file share and select Upload. This file share is mounted in the Cloud Shell as clouddrive.

Find Upload button

Click the file selector and select your ZIP file, then click Upload.

In the Cloud Shell, use ls to verify that you can see the uploaded ZIP file in the default clouddrive share.

ls clouddrive

Create a resource group

In the Cloud Shell, 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 West Europe location. To see all supported locations for App Service, run the az appservice list-locations command.

az group create --name myResourceGroup --location "West Europe"

You generally create your resource group and the resources in a region near you.

Create an Azure App Service plan

In the Cloud Shell, 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

In the Cloud Shell, create a web app in the myAppServicePlan App Service plan with the az webapp create command.

In the following example, replace <app_name> with a globally unique app name (valid characters are a-z, 0-9, and -). The runtime is set to NODE|6.9. To see all supported runtimes, run az webapp list-runtimes.

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app_name> --runtime "NODE|6.9"

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

{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app_name>.azurewebsites.net",
  "enabled": true,
  < JSON data removed for brevity. >
}

Browse to your newly created web app. Replace <app name> with a unique app name.

http://<app name>.azurewebsites.net

Empty web app page

Deploy uploaded ZIP file

In the Cloud Shell, deploy the uploaded ZIP file to your web app by using the az webapp deployment source config-zip command. Be sure to replace <app_name> with the name of your web app.

az webapp deployment source config-zip --resource-group myResouceGroup --name <app_name> --src clouddrive/myAppFiles.zip

This command deploys the files and directories from the ZIP file to your default App Service application folder (\home\site\wwwroot) and restarts the app. If any additional custom build process is configured, it is run as well.

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!");

In the local terminal window, navigate to your application's root directory, create a new ZIP file for your updated project.

# Bash
zip -r myUpdatedAppFiles.zip .

# PowerShell
Compress-Archive -Path * -DestinationPath myUpdatedAppFiles.zip

Upload this new ZIP file to the Cloud Shell, using the same steps in Upload the ZIP file.

Then, in the Cloud Shell, deploy your uploaded ZIP file again.

az webapp deployment source config-zip --resource-group myResouceGroup --name <app_name> --src clouddrive/myUpdatedAppFiles.zip

Switch back to the browser window that opened in the Browse to the app step, and refresh the page.

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 page in Azure portal

The left menu provides different pages for configuring your app.

Clean up resources

In the preceding steps, you created Azure resources in a resource group. If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myResourceGroup

This command may take a minute to run.

Next steps