Creating an Express Web Server Using Node.js
The best way to use Node.js as the web server for your AngularJS development is to utilize the Express module. Node.js is a very modular platform, meaning that Node.js itself provides a very efficient and extensible framework and external modules are utilized for much of the needed functionality. Consequently, Node.js provides a very nice interface to add and manage these external modules.
Express is one of these modules. The Express module provides a simple-to-implement web server with a robust feature set, such as static files, routes, cookies, request parsing, and error handling.
The simplest way to explain Node.js modules and Express is to simply have you build your own web server using Node.js and Eclipse. In the following exercise you will build a Node.js/Express web server and use it to serve static HTML, CSS, and image files. This should familiarize you with the basics necessary for you to complete the rest of the examples throughout this book.
Note
The images and code files for this and all the examples throughout this book can be downloaded from the code archive on Github.
Use the following steps to build and test a Node.js/Express web server capable of supporting static files and server-side scripting:
1. Create a project folder that you will be using for the examples in this book.
2. From a console prompt, navigate to that project folder and execute the following command. This command will install the Express module version 4.6.1 for Node.js into a subfolder named node_modules:
npm install [email protected]
3. Now execute the following command to install the body-parser module for Node.js. This module makes it possible to parse the query parameters and body from HTTP GET and POST requests. This command will install the boyd-parser module version 1.6.5 for Node.js into a subfolder named node_modules:
npm install [email protected]
4. Create a file named server.js in the root of your project directory, place the contents from Listing 1.1 inside of it, and save it.
5. Create an HTML file named ch01/welcome.html in the project area, place the contents from Listing 1.2 inside it, and then save the file.
6. Create a file named ch01/css/welcome.css in your project area, place the contents of Listing 1.3 inside it, and save the file.
7. Copy the welcome.png file from the /images folder in this book’s code archive to the location images/welcome.png in your project area or substitute your own file named welcome.png.
8. From a console prompt in the project folder, start the Node.js/Express server using the following command:
node server.js
9. Hit the server from a web browser at the following address. The resulting web page is shown in Figure 1.1.
localhost/ch01/welcome.html
Listing 1.1 server.js: Creating a Basic Node.js/Express Web Server
01 var express = require('express'),
02 var app = express();
03 app.use('/', express.static('./'));
04 app.listen(80);
Listing 1.2 welcome.html: Implementing a Welcome Web Page to Test the Node.js/Express Web Server
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>Welcome</title>
05 <link rel="stylesheet" type="text/css" href="css/welcome.css">
06 </head>
07 <body>
08 <img src="images/welcome.png">
09 <p>Welcome to Learning AngularJS. Over the course of
10 of this book you will get a chance to delve into
11 the basics of building AngularJS applications. Enjoy!</p>
12 </body>
13 </html>
Listing 1.3 welcome.css: Adding a Static CSS File for the Welcome Web Page
01 p {
02 color: red;
03 border: 3px ridge blue;
04 padding: 10px;
05 width: 600px; }
06 img {
07 width: 600px; }
So far you have implemented a basic Node.js/Express web server, created static content, and then loaded the static content from a browser. That is the majority of the necessary capability needed to develop and test your AngularJS applications. There is much, much more to Node.js and Express, and there are capabilities that are not covered in this book because they really fall outside the intended scope of the book. If you are interested learning more about Node.js and Express, I’d suggest looking at the Node.js, MongoDB and AngularJS Web Development book.
At this point you have two options. If you are a JavaScript guru, you can skip the rest of this chapter because it only goes over some of the basics of the JavaScript language. If you are not familiar with JavaScript, keep reading and welcome to JavaScript.