How to create a simple Node.js application and deploy it to a web app in Azure App Service by using Visual Studio Online

This tutorial shows how to create a simple Node.js application and deploy it to a web app in Azure App Service by using Visual Studio Online. The instructions in this tutorial can be followed on any operating system that is capable of running Node.js.

You’ll learn:

  • How to create a web app in Azure App Service by using the Azure preview portal.
  • How to deploy a Node.js application to the web app using Visual Studio Online.

The completed application writes a short “hello world” string to the browser.

A browser displaying the 'Hello World' message.

The overall picture will look like the following diagram.

The overall picture.

Create a web app and enable Git publishing

Follow these steps to create a web app in Azure App Service and enable Git publishing.

  1. Sign in to the Azure preview portal.
  2. Click + New icon on the top left of the portal.
  3. Click Web + Mobile, and then click Web App.
  4. Enter a name for the web app in the Web app box.
    This name must be unique in the azurewebsites.net domain because the URL of the web app will be {name}.azurewebsites.net. If the name you enter isn’t unique, a red exclamation mark appears in the text box.
  5. Select a Subscription.
  6. Select a Resource Group or create a new one.
    For more information about resource groups, see Using the Azure Preview Portal to manage your Azure resources.
  7. Select an App Service plan/Location or create a new one.
    For more information about App Service plans, see Azure App Service plans in-depth overview
  8. Click Create.
    Create a web app
    In a short time, typically less than a minute, Azure finishes creating the new web app.
  9. Click Web Apps > {your new web app}.
    Enable Git publishing 1
  10. Click Continuous Deployment, and then click Choose Source.
  11. Click Local Git Repository, and then click OK.
    Enable Git publishing 2
  12. Click Deployment credentials.
  13. Set up deployment credentials if you haven’t already done so.
    Create a user name and password, and then click Save.
    Enable Git publishing 3
  14. Click Web Apps > {your new web app}.
    To publish, you’ll push to a remote Git repository. The URL for the repository is listed under Git clone url. You’ll use this URL later in the tutorial.
    Enable Git publishing 4
  15. Click URL.
    A webpage that displays “This web app has been successfully created” appears, as shown in the following screenshot.
    Enable Git publishing 5

Create a simple Node.js application

In this section, you’ll create a server.js file that contains a slightly modified version of the ‘Hello World’ example from nodejs.org. The code adds process.env.PORT as the port to listen on when running in an Azure App Service.

  1. Create a directory named helloworld.
  2. Use a text editor to create a new file named server.js in the helloworld directory.
  3. Copy the following code into the server.js file, and then save the file:
    var http = require(‘http’);
    var port = process.env.PORT || 1337;
    http.createServer(function (req, res) {
    res.writeHead(200, {‘Content-Type’: ‘text/plain’});
    res.end(‘Hello World\n’);
    }).listen(port);
  4. Open the command line, and use the following command to start the web app locally.
    $ node server.js
  5. Open your web browser and navigate to http://localhost:1337.
    A webpage that displays “Hello World” appears, as shown in the following screenshot.
    Create a simple Node.js application

Create a team project on Visual Studio Online and create a Build Definition

  1. Sign in to Visual Studio Online.
  2. Click New.
  3. Enter a name for the project in the Project name box.
    Select a Process template.
    Select Git from the Version control drop-down menu, and then Click Create project.
    Create a team project on Visual Studio Online 1
    In a short time, typically less than a minute, Visual Studio Online finishes creating the new team project.
  4. Click Navigate to project.
    Create a team project on Visual Studio Online 2
  5. Click BUILD.
    Create a Build Definition 1
  6. Click +, and then click Empty to start with an empty definition, click OK.
    Create a Build Definition 2
  7. Click + Add build step…, and then click Utility.
  8. Click Command Line’s Add twice, and then click Close.
    Create a Build Definition 3
  9. Click 1st Command Line.
  10. Enter git in the Tool box.
    Enter remote add azure https://{user name}:{password}@{your new web app}.scm.azurewebsites.net:443/{your new web app}.git in the Arguments box.
    Create a Build Definition 4
  11. Click 2nd Command Line.
  12. Enter git in the Tool box.
    Enter push azure master in the Arguments box.
  13. Click Triggers.
    Create a Build Definition 5
  14. Check the Continuous integration (CI), and then click Save.
    Create a Build Definition 6
  15. Enter a name for the build definition in the Name box, and then click OK.
    Create a Build Definition 7

Publish your application

  1. Install Git if you haven’t already done so.
    For installation instructions for your platform, see the Git download page.
  2. From the command line, change directories to the helloworld directory and enter the following command to initialize a local Git repository.
    $ git init
  3. Use the following commands to add files to the repository:
    $ git add .
    $ git commit -m “Initial commit”
  4. Add a Git remote for pushing updates to the Visual Studio Online that you created previously, by using the following command:
    $ git remote add azure https://{your_account}.visualstudio.com/DefaultCollection/_git/{your_team_project}
  5. Push your changes to Azure by using the following command:
    $ git push azure master
  6. Open your team project in your web browser.
  7. Click BUILD.
    Publish your application 1
  8. Click Queued.
    Publish your application 2
  9. After a successful build, click Completed.
    Publish your application 3
  10. Check your site: http://{your new web app}.azurewebsites.net
    Publish your application 4

Publish changes to your application

  1. Open the server.js file in a text editor, and change ‘Hello World\n’ to ‘Hello Azure\n’.
  2. Save the file.
  3. From the command line, change directories to the helloworld directory and run the following commands:
    $ git add .
    $ git commit -m “Modify Hello World -> Hello Azure”
    $ git push azure master
  4. Refresh the browser window that you navigated to the web app’s URL. A browser displaying the ‘Hello Azure’ message.