Over a million developers have joined DZone.

Build and Deploy a Node.js Website to Windows Azure

· Cloud Zone

Download the Essential Cloud Buyer’s Guide to learn important factors to consider before selecting a provider as well as buying criteria to help you make the best decision for your infrastructure needs, brought to you in partnership with Internap.

Curator's note: This tutorial originally appeared on WindowsAzure.com.

This tutorial shows you how to create a Node application and deploy it to a Windows Azure Web Site using Git. The instructions in this tutorial can be followed on any operating system that is capable of running Node.

A screenshot of the completed application is below:

A browser displaying the 'Hello World' message.

Create a Windows Azure Web Site and enable Git publishing

Follow these steps to create a Windows Azure Web Site, and then enable Git publishing for the web site.

Note

To complete this tutorial, you need a Windows Azure account that has the Windows Azure Web Sites feature enabled.

  1. Login to the Windows Azure Management Portal.

  2. Click the + NEW icon on the bottom left of the portal

    The Windows Azure Portal with the +NEW link highlighted.

  3. Click WEB SITE, then QUICK CREATE. Enter a value for URL and select the datacenter for your web site in the REGION dropdown. Click the checkmark at the bottom of the dialog.

    The Quick Create dialog

  4. Once the web site status changes to Running, click on the name of the web site to access the Dashboard

    Open website dashboard

  5. At the bottom right of the Dashboard, select Set up Git Publishing.

    Set up Git publishing

  6. To enable Git publishing, you must provide a user name and password. If you have previously enabled publishing for a Windows Azure Web Site, you will not be prompted for the user name or password. Instead, a Git repository will be created using the user name and password you previously specified. Make a note of the user name and password, as they will be used for Git publishing to all Windows Azure Web Sites you create.

    The dialog prompting for user name and password.

  7. Once the Git repository is ready, you will be presented with instructions on the Git commands to use in order to setup a local repository and then push the files to Windows Azure.

    Git deployment instructions returned after creating a repository for the website.

Build and test your application locally

In this section, you will create a server.js file containing the 'hello world' example from nodejs.org. This example has been modified from the original example by adding process.env.port as the port to listen on when running in a Windows Azure Web Site.

  1. Using a text editor, create a new file named server.js in the helloworld directory. If the helloworld directory does not exist, create it.
  2. Add the following as the contents of the server.js file, and then save it:

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

3. Open the command-line, and use the following command to start the web page locally:

node server.js
4. Open your web browser and navigate to http://localhost:1337. A web page displaying "Hello World" will appear as shown in the screenshot below:

A browser displaying the 'Hello World' message.

Publish your application

1. From the command-line, change directories to the helloworld directory and enter the following commands to initialize a local Git repository.

git init

2. Use the following commands to add files to the repository:

git add .
git commit -m "initial commit"

3. Add a Git remote for pushing updates to the Windows Azure Web Site you created previously, using the following command:

git remote add azure [URL for remote repository]

4. Push your changes to Windows Azure using the following command:

git push azure master
  1. You will be prompted for the password you created earlier and will see the following output:

    Git command line output

    If you navigate to the deployments tab of your Windows Azure Web Site within the management portal, you will see your first deployment in the deployment history:

    Git deployment status on the portal

  2. Browse to your site using the Browse button on your Windows Azure Web Site page within the management portal.

Publish changes to your application

  1. Open the server.js file in a text editor, and change 'Hello World\n' to 'Hello Azure\n'. Save the file.
  2. From the command-line, change directories to the helloworld directory and run the following commands:

git add .
git commit -m "changing to hello azure"
git push azure master
  1. You will be prompted for the password you created earlier. If you navigate to the deployments tab of your Windows Azure Web Site within the management portal, you will see your updated deployment history:

    Git deployment status updated on the portal

  2. Browse to your site by using the Browse button and note that the updates have been applied.

    A web page displaying 'Hello Azure'

  3. You can revert to the previous deployment by selecting it in the "Deployments" tab of your Windows Azure Web Site within the management portal and using the Redeploy button.

Next steps

While the steps in this article use the Windows Azure Portal to create a web site, you can also use the Windows Azure Command-Line Tools for Mac and Linux to perform the same operations.

 

The Cloud Zone is brought to you in partnership with Internap. Read Bare-Metal Cloud 101 to learn about bare-metal cloud and how it has emerged as a way to complement virtualized services.

Topics:

Published at DZone with permission of Eric Gregory. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}