Create a Node.js web app in Azure

In this quickstart, you'll learn how to create and deploy your first Node.js (Express) web app to Azure App Service. App Service supports various versions of Node.js on both Linux and Windows.

This quickstart configures an App Service app in the Free tier and incurs no cost for your Azure subscription.

Set up your initial environment

  • Have an Azure account with an active subscription. Create an account for free.
  • Install Node.js and npm. Run the command node --version to verify that Node.js is installed.
  • Install Azure CLI, with which you run commands in any shell to provision and configure Azure resources.

Create your Node.js application

In this step, you create a starter Node.js application and make sure it runs on your computer.

Tip

If you have already completed the Node.js tutorial, you can skip ahead to Deploy to Azure.

  1. Create a simple Node.js application using the Express Generator, which is installed by default with Node.js and NPM.

    npx express-generator myExpressApp --view pug
    
  2. Change to the application's directory and install the NPM packages.

    cd myExpressApp
    npm install
    
  3. Start the development server.

    npm start
    
  4. In a browser, navigate to http://localhost:3000. You should see something like this:

    Running Express Application

Deploy to Azure

Before you continue, ensure that you have all the prerequisites installed and configured.

Note

For your Node.js application to run in Azure, it needs to listen on the port provided by the PORT environment variable. In your generated Express app, this environment variable is already used in the startup script bin/www (search for process.env.PORT).

Sign in to Azure

  1. In the terminal, make sure you're in the myExpressApp directory, then start Visual Studio Code with the following command:

    code .
    
  2. In Visual Studio Code, in the Activity Bar, select the Azure logo.

  3. In the App Service explorer, select Sign in to Azure... and follow the instructions.

    In Visual Studio Code, you should see your Azure email address in the Status Bar and your subscription in the AZURE APP SERVICE explorer.

    sign in to Azure

Configure the App Service app and deploy code

  1. In the App Service explorer, select the Deploy to Web App icon.

    Screenshot of the Azure App service in Visual Studio Code showing the blue arrow icon selected.

  2. Choose the myExpressApp folder.

  1. Choose Create new Web App. A Linux container is used by default.

  2. Type a globally unique name for your web app and press Enter. The name must be unique across all of Azure and use only alphanumeric characters ('A-Z', 'a-z', and '0-9') and hyphens ('-').

  3. In Select a runtime stack, select the Node.js version you want. An LTS version is recommended.

  4. In Select a pricing tier, select Free (F1) and wait for the the resources to be provisioned in Azure.

  5. In the popup Always deploy the workspace "myExpressApp" to <app-name>", select Yes. This way, as long as you're in the same workspace, Visual Studio Code deploys to the same App Service app each time.

    While Visual Studio Code provisions the Azure resources and deploys the code, it shows progress notifications.

  6. Once deployment completes, select Browse Website in the notification popup. The browser should display the Express default page.

In the terminal, make sure you're in the myExpressApp directory, and deploy the code in your local folder (myExpressApp) using the az webapp up command:

az webapp up --sku F1 --name <app-name>
  • If the az command isn't recognized, be sure you have the Azure CLI installed as described in Set up your initial environment.
  • Replace <app_name> with a name that's unique across all of Azure (valid characters are a-z, 0-9, and -). A good pattern is to use a combination of your company name and an app identifier.
  • The --sku F1 argument creates the web app on the Free pricing tier, which incurs a no cost.
  • You can optionally include the argument --location <location-name> where <location_name> is an available Azure region. You can retrieve a list of allowable regions for your Azure account by running the az account list-locations command.
  • The command creates a Linux app for Node.js by default. To create a Windows app instead, use the --os-type argument.
  • If you see the error, "Could not auto-detect the runtime stack of your app," make sure you're running the command in the myExpressApp directory (See Troubleshooting auto-detect issues with az webapp up).

The command may take a few minutes to complete. While running, it provides messages about creating the resource group, the App Service plan, and the app resource, configuring logging, and doing ZIP deployment. It then gives the message, "You can launch the app at http://<app-name>.azurewebsites.net", which is the app's URL on Azure.

The webapp '<app-name>' doesn't exist
Creating Resource group '<group-name>' ...
Resource group creation complete
Creating AppServicePlan '<app-service-plan-name>' ...
Creating webapp '<app-name>' ...
Configuring default logging for the app, if not already enabled
Creating zip with contents of dir /home/cephas/myExpressApp ...
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
You can launch the app at http://<app-name>.azurewebsites.net
{
  "URL": "http://<app-name>.azurewebsites.net",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|10.14",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "//home//cephas//myExpressApp"
}

Note

The az webapp up command does the following actions:

  • Create a default resource group.

  • Create a default App Service plan.

  • Create an app with the specified name.

  • Zip deploy all files from the current working directory, with build automation enabled.

  • Cache the parameters locally in the .azure/config file so that you don't need to specify them again when deploying later with az webapp up or other Azure CLI commands. The cached values are used automatically by default.

Sign in to Azure portal

Sign in to the Azure portal at https://portal.azure.com.

Create Azure resources

  1. Type app services in the search. Under Services, select App Services.

    Screenshot of portal search

  2. In the App Services page, select Create.

  3. In the Basics tab, under Project details, make sure the correct subscription is selected and then choose to Create new resource group. Type myResourceGroup for the name.

    Screenshot of the Project details section showing where you select the Azure subscription and the resource group for the web app

  4. Under Instance details, type a globally unique name for your web app and select Code. Choose Node 14 LTS Runtime stack, an Operating System, and a Region you want to serve your app from.

    Screenshot of the Instance details section where you provide a name for the virtual machine and select its region, image and size

  5. Under App Service Plan, choose to Create new App Service Plan. Type myAppServicePlan for the name. To change to the Free tier, click Change size, select Dev/Test tab, select F1, and select the Apply button at the bottom of the page.

    Screenshot of the Administrator account section where you provide the administrator username and password

  6. Select the Review + create button at the bottom of the page.

    Screenshot showing the Review and create button at the bottom of the page

  7. After validation runs, select the Create button at the bottom of the page.

  8. After deployment is complete, select Go to resource.

    Screenshot showing the next step of going to the resource

Get FTP credentials

Azure App Service supports two types of credentials for FTP/S deployment. These credentials are not the same as your Azure subscription credentials. In this section, you get the application-scope credentials to use with FileZilla.

  1. From the App Service app page, click Deployment Center in the left-hand menu and select FTPS credentials tab.

    FTPS deployment credentials

  2. Open FileZilla and create a new site.

  3. From the FTPS credentials tab, copy FTPS endpoint, Username, and Password into FileZilla.

    FTPS connection details

  4. Click Connect in FileZilla.

Deploy files with FTP

  1. Copy all files and directories files to the /site/wwwroot directory in Azure.

    FileZilla deploy files

  2. Browse to your app's URL to verify the app is running properly.

Redeploy updates

You can deploy changes to this app by making edits in Visual Studio Code, saving your files, and then redeploy to your Azure app. For example:

  1. From the sample project, open views/index.pug and change

    p Welcome to #{title}
    

    to

    p Welcome to Azure!
    
  1. In the App Service explorer, select the Deploy to Web App icon again, confirm by clicking Deploy again.

  2. Wait for deployment to complete, then select Browse Website in the notification popup. You should see that the Welcome to Express message has been changed to Welcome to Azure!.

  1. Save your changes, then redeploy the app using the az webapp up command again with no arguments:

    az webapp up
    

    This command uses values that are cached locally in the .azure/config file, such as the app name, resource group, and App Service plan.

  2. Once deployment is complete, refresh the webpage http://<app-name>.azurewebsites.net. You should see that the Welcome to Express message has been changed to Welcome to Azure!.

  1. Save your changes, then redeploy the app using your FTP client again.

  2. Once deployment is complete, refresh the webpage http://<app-name>.azurewebsites.net. You should see that the Welcome to Express message has been changed to Welcome to Azure!.

Stream Logs

You can stream log output (calls to console.log()) from the Azure app directly in the Visual Studio Code output window.

  1. In the App Service explorer, right-click the app node and choose Start Streaming Logs.

    Start Streaming Logs

  2. If asked to restart the app, click Yes. Once the app is restarted, the Visual Studio Code output window opens with a connection to the log stream.

  3. After a few seconds, the output window shows a message indicating that you're connected to the log-streaming service. You can generate more output activity by refreshing the page in the browser.

     Connecting to log stream...
     2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
     Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
     

You can access the console logs generated from inside the app and the container in which it runs. Logs include any output generated by calls to console.log().

To stream logs, run the az webapp log tail command:

az webapp log tail

The command uses the resource group name cached in the .azure/config file.

You can also include the --logs parameter with then az webapp up command to automatically open the log stream on deployment.

Refresh the app in the browser to generate console logs, which include messages describing HTTP requests to the app. If no output appears immediately, try again in 30 seconds.

To stop log streaming at any time, press Ctrl+C in the terminal.

You can access the console logs generated from inside the app and the container in which it runs. You can stream log output (calls to console.log()) from the Node.js app directly in the Azure portal.

  1. In the same App Service page for your app, use the left menu to scroll to the Monitoring section and click Log stream.

    Screenshot of Log stream in Azure App service.

  2. After a few seconds, the output window shows a message indicating that you're connected to the log-streaming service. You can generate more output activity by refreshing the page in the browser.

     Connecting...
     2021-10-26T21:04:14  Welcome, you are now connected to log-streaming service.
     Starting Log Tail -n 10 of existing logs ----
     /appsvctmp/volatile/logs/runtime/81b1b83b27ea1c3d598a1cdec28c71c4074ce66c735d0be57f15a8d07cb3178e.log
     2021-10-26T21:04:08.614384810Z: [INFO]
     2021-10-26T21:04:08.614393710Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
     2021-10-26T21:04:08.614399010Z: [INFO]  cd "/home/site/wwwroot"
     2021-10-26T21:04:08.614403210Z: [INFO]
     2021-10-26T21:04:08.614407110Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
     2021-10-26T21:04:08.614411210Z: [INFO]  if [ -z "$PORT" ]; then
     2021-10-26T21:04:08.614415310Z: [INFO]  		export PORT=8080
     2021-10-26T21:04:08.614419610Z: [INFO]  fi
     2021-10-26T21:04:08.614423411Z: [INFO]
     2021-10-26T21:04:08.614427211Z: [INFO]  node /opt/startup/default-static-site.js
     Ending Log Tail of existing logs ---
     

Clean up resources

In the preceding steps, you created Azure resources in a resource group. The create steps in this quickstart put all the resources in this resource group. To clean up, you just need to remove the resource group.

  1. In the Azure extension of Visual Studio, expand the Resource Groups explorer.

  2. Expand the subscription, right-click the resource group you created earlier, and select Delete.

    Screenshot of the Visual Studio Code navigation to delete a resource that contains App Service resources.

  3. When prompted, confirm your deletion by entering the name of the resource group you're deleting. Once you confirm, the resource group is deleted, and you see a notification when it's done.

In the preceding steps, you created Azure resources in a resource group. The resource group has a name like "appsvc_rg_Linux_CentralUS" depending on your location.

If you don't expect to need these resources in the future, delete the resource group by running the following command:

az group delete --no-wait

The command uses the resource group name cached in the .azure/config file.

The --no-wait argument allows the command to return before the operation is complete.

When no longer needed, you can delete the resource group, App service, and all related resources.

  1. From your App Service overview page, click the resource group you created in the Create Azure resources step.

    Resource group in App Service overview page

  2. From the resource group page, select Delete resource group. Confirm the name of the resource group to finish deleting the resources.

    Delete resource group

Next steps

Congratulations, you've successfully completed this quickstart!

Check out the other Azure extensions.

Or get them all by installing the Node Pack for Azure extension pack.