Level: Beginner to Intermediate.
Part 2 - Welcome to Express with Node.js and Azure
Part 2 – Welcome to Express with Node.js and Azure
Welcome to Part 2 of the Node.js Tutorial Series: A chatroom for all! In this part, I will show you how to start a new express-based node project and deploy it to Azure.
What is Express?
Express is a minimal, open source and flexible node.js web app framework designed to make developing websites, web apps and APIs much easier.
Why use Express?
Express helps you respond to requests with route support so that you may write responses to specific URLs. Express allows you to support multiple templating engines to simplify generating HTML.
You will want to make sure node.js is properly installed and ready, take a look at Part 1 – Introduction to node.js.
Let’s Get Started
Starting a new node.js project is fairly straight forward.
1. You want to boot Visual Studio and go to the File > New > Project menu item.
3. A popup will appear notifying you that dependencies defined in package.json need to be installed using NPM the package manager. Take a look at an explanation of NPM here.
4. A project will be generated that includes a file called app.js. We will start there.
Explanation of app.js
Lines 6 through 10
Lines 6 through 10 load various modules including express, http and path. What’s interesting is that we also load a module called routes (which will be explained later) and a module in the routes folder called user.
On this line, we called the function express() which will create our app this app will be used when we decide to create a HTTP Server and it will be the object containing all the properties of our web application as well as the mapping between the URL received in a request and the function handling its response.
Line 15 through 17
On these lines, we set various configuration parameters such as what port the server will run on (line 15) and in which directory the template html files will be found (line 16). On line 17, we specify the templating engine that we want to use, in this case Jade. Jade is a popular templating engine that makes writing HTML extremely easy and without the extraneous syntax requirements of angle brackets (<>). You can change the templating engine to simply return HTML as is and not do anything further by replacing Line 17 with the following code:
app.set('view engine', 'html');
Line 18 through 23
On these lines, we set various configuration parameters. You can find the meaning of each individual parameter by taking a look at the API documentation. The explanation of these configuration parameters is not required for this tutorial.
Line 24 and 25
Line 27 through 30
In these lines, we are specifying to express to handle errors if the environment is set as development and not production. You don’t have to worry about these lines.
Line 32, 33
In these lines, we are finally mapping a URL path in a HTTP request to a specific function to handling the response. We will get back to this shortly.
Line 35 through 38
In these lines, we create a HTTP server and specify the port, along with a callback on success to say the server has been started.
Routing and how to properly do routes is a controversial topic and there is no correct answer. There are plenty of modules implementing routing for Express and node.js, each with a different flavor and structure. We will stick to the routing engine packaged with Express. In app.js, we already specified the routing engine and we import the route modules from the route directory. We added the routes in line 32-33. In other words, we mapped the URL in the browser to the function on the server that will respond to that request. Those functions that will handle the requests are in the routes directory. Let’s take a look at index.js.
It’s just three lines but those three lines do a ton of work. Line 1 adds a function called index to the exports variable. The exports variable is created by Node.js every time a module is loaded to allow you to pass functions and variables to other modules, in this case, the app.js module.
The function index takes two parameters, req and res. If you recall from Part 1, the req parameter held the request received and the res parameter holds a variable to which you write your response. In this case, we are executing the render function in the response variable which takes two parameters. The first is the parameter that specifies the view to use (the view is a file in the views directory) and the extension of the file is not required so index will make to index.jade. The second parameter is an object containing data that can be inserted into the jade template.
The Index Template
The index.jade template is a whole different language that will not be explained in this tutorial. A knowledge of HTML is required for this entire tutorial series and in this case you will notice that the jade templating language maps almost always directly to HTML.
With the exception of the “block” and “extends” keywords, the other keywords are signify exactly the same thing as in HTML. This template will be converted by jade middleware we loaded into the following HTML.
You will notice that the H1 tag that was generated contains the value of title that we passed previously in the render function. You will also notice it was inserted into the p tag directly in line with the text. You will also undoubtedly notice that the entire HTML generated includes things not mapped in Jade. That is where the “extends” keyword comes in. In this case, we chose to extend the layout.jade file.
You’ll notice that the “block content” sreappears in both files, this is used by jade to specify that this block of HTML goes here (in the layout.jade file) and this is what it looks like (in the index.jade file).
In the layout.jade file, you will notice a link to a style.css file which seemingly does not exist in our initial project. This file is generated from the style.styl code using the Stylus middleware as we set it up in app.js
There you have it! How we go from app.js to a route defining the response and to finally the view declaring what that response looks like. If you choose to run the web app locally by clicking on the debug button (you can choose a different browser by clicking the dropdown button on the right).
When pressed, this will start a node.js server and open Internet Explorer to the root URL.
Publishing to Azure (for those using Visual Studio)
Now that we’ve got an express-based node.js app working, let’s deploy it to the cloud in a few clicks. You can deploy to any cloud that supports node.js among them Nodejitsu, Heroku, Engine Yard. I will be using Microsoft Azure as I can run a node.js website on there for free.
You can sign up for a free trial of Microsoft Azure here. You will get $220 to spend on all Azure services. For the service we are using, Azure Websites, you can actually run 10 websites without spending a dime.
1. Once you’ve got your Azure account setup, we will go back to the IDE and right click on the express project and select the Publish item from the menu.
2. The Publish menu item will open a wizard with a few options, you will want to select the target Microsoft Azure Websites.
3. You will be asked to sign in at this step, please use the same Microsoft Account here as you did on the Azure sign up.
4. You will want to press New to create a new Azure website or if you already have one created, you can simply select it from the dropdown.
5. You will want to fill up the fields in the wizard (just like below), make sure to choose a unique site name and press Create.
6. You will be faced with a pre-filled wizard with a Publish bottom at the button, press Publish
YOU ARE DONE! YOU ARE NOW PUBLISHED TO THE AZURE CLOUD!
Note: if you encounter errors publishing, be sure to place your project closer to the root of the drive to avoid temporary copying errors.
Stay tuned for Part 3 – Building a Chat System Backend. You can stay up to date by following my twitter account @ramisayar.