Deploy Express.js to Azure App Service using Visual Studio Code

Deploy your Express.js app to Azure with the Visual Studio Code extension for Azure App Service extension. To accomplish this goal:

  • Create Express.js app
  • Create a web app resource to host app
  • Deploy app to resource
  • View remote logs locally

1. Set up your development environment

2. Sign in to Azure

If you already use the Azure service extensions, you should already be logged in and can skip this step.

Once you've installed an extension in Visual Studio Code, you need to sign into your Azure account.

  1. In Visual Studio Code, select the Azure explorer icon, then select Sign in to Azure, and follow the prompts.

    Sign in to Azure through VS Code

  2. After signing in, verify that the email address of your Azure account appears in the Status Bar and your subscription(s) appears in the Azure explorer:

    VS Code Azure explorer showing subscriptions

3. Create a local Express.js app

Create and run an Express.js app by cloning an Azure sample repository.

  1. At a terminal command prompt, go to the location where you want to create the app folder.

  2. Use the following base command with git to clone the repository, change into the repository folder named myexpressapp, then install the npm dependencies, and open the project in Visual Studio Code from the terminal.

    git clone https://github.com/Azure-Samples/js-e2e-express-server.git myexpressapp && \
        cd myexpressapp && \
        npm install && \
        code .
    

4. Run your local Express.js app

  1. Start the server:

    npm start
    
  2. Test the app by opening a browser to http://localhost:3000. The site should appear as follows:

    Running Express Application

  3. Press Ctrl+C in the terminal to stop the server.

5. Create App service resource in Visual Studio Code

  1. Use Ctrl+Shift+P to open the command palette.

  2. Enter create web then select Azure App Service: Create New Web App...Advanced.

    You use the advanced command to have full control over the deployment including resource group, App Service Plan, and operating system rather than use Linux defaults.

  3. Respond to the prompts as follows:

    • Select your Subscription account.
    • For Enter a globally unique name, enter a name that's unique across all of Azure. Use only alphanumeric characters ('A-Z', 'a-z', and '0-9') and hyphens ('-')
    • Select Create new resource group and provide a name like AppServiceTutorial-rg.
    • Select the Linux operating system.
    • Select Create a new App Service plan, provide a name like AppServiceTutorial-plan, and select the F1 Free pricing tier.
    • Select Skip for now for the Application Insights resource.
    • Select a location near you.
  4. After a short time, VS Code notifies you that creation is complete. Close the notification with the X button:

    Notification on completion of web app creation

  5. With the web app in place, you next instruct VS Code to deploy your code from the local Git repo. Select the Azure icon to open the Azure App Service explorer, expand your subscription node, right-click the name of the web app you just created, and select Configure Deployment Source.

    Configure deployment source command on a web app

  6. When prompted, select LocalGit.

  7. Select the deployment (up arrow) icon to deploy your code to Azure:

    Deploy to Web App icon

  8. At the prompts, select the myexpressapp folder, select your subscription account again and then select the name of the web app created earlier.

    When this deployment is complete, it is listed in the Azure Explorer, under your web app's Deployments Git node.

  9. When prompted with Always deploy the workspace to (app name)", select Yes. This tells VS Code to automatically target the same App Service web app with subsequent deployments.

  10. Once deployment is complete, select Browse Website in the prompt to view your freshly deployed web app. The browser should display "Hello World!"

7. Stream remote service logs in Visual Studio Code

View (tail) any output that the running app generates through calls to console.log. This output appears in the Output window in Visual Studio Code.

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

    View Streaming Logs

  2. Refresh the web page a few times in the browser to see additional log output.

8. Make changes and redeploy

  1. Make a small change to the app. In ./public/client.html, change Welcome to Express to Welcome to Express with Visual Studio Code.

  2. Right-click your app service from the list of App services in the App service extension, then select Deploy to Web App....

    Deploy or redeploy to App service with Visual Studio Code

9. Clean up resources

When you want to clean up the resources, right-click on the App service in the Visual Studio Code's App Service extension, then select Delete.

When you want to clean up the resources, right-click on the App service in the Visual Studio Code's App Service extension, then select **Delete**.

Troubleshooting

When trying to sign in to Azure, if you see the error "Cannot find subscription with name [subscription ID]", this may be because you are behind a proxy and unable to reach the Azure API. Configure HTTP_PROXY and HTTPS_PROXY environment variables with your proxy information in your terminal:

export HTTPS_PROXY=https://username:password@proxy:8080
export HTTP_PROXY=http://username:password@proxy:8080

Next steps

Congratulations, you've successfully completed this walkthrough! You're ready to check out the other Azure extensions.

You can install all the Azure extensions together by installing the Node for Azure extension pack.

To learn more about working with Azure using Node.js, visit the resources below: