Read Node.js part one here: Introduction to Node.js: Part 1
In my first Node.js introduction, we discovered Node.js and how to set it up. Once we had it up and running, we looked briefly at how we could serve up simple web pages.
In this tutorial, we will look at a Node.js package that simplifies the creation of a Node.js web server and an html templating package. We will create a simple web application to familiarize ourselves with these tools.
Getting Started
In order to get started, we will need to install two Node.js packages. These packages are Express and Jade. To begin, create a new folder where you will keep this applications project files. Inside this folder, create two folders that will be used to keep our html templates, css, and javascript files.
<p> CODE: https://gist.github.com/thec2group-blog/23dda9e2c898fbc165117b1afd9238ac.js</p>
The view directory will keep our website template files and the public directory will be for static files (css/javascript). We will not be using the public directory as part of this tutorial.
Next, we will install the two node packages we will use to build our sample application. This is done by issuing the following command: npm install <package name>.
<p> CODE: https://gist.github.com/thec2group-blog/bec44aaefa789654cee75838272495fe.js</p>
Creating the server
Express (Express.js) is the Node.js package. Complete documentation can be found at the Express.js website. Express.js is a lightweight web application framework. Using Express we can quickly stand up a web server and start serving web applications, RESTful web services, or most anything else you can dream up on the web.
The main file that will run the webserver will be called app.js. Here it is in its entirety:
<p> CODE: https://gist.github.com/thec2group-blog/cdee9a9c7f27ea0c5ae432dcd9ef65dd.js</p>
We create the Express application, configure it, create the first route, and then start the server. In order to run the server you would issue the following command in your command prompt:
<p> CODE: https://gist.github.com/thec2group-blog/dcd21c78ec8c222a79bf6922ba29c223.js</p>
You should now be able to use your web browser of choice and browse to http://localhost:8080/. Right now nothing will be returned because there is no index.jade file.
Creating Your First Template
We are using the Jade templating engine to render the application. Jade looks very similar to html except it allows us to use more advanced features. Defining variables and control structures will allow for more advanced control over the layout of the page. We will look further at Jade features in our next tutorial, part 3. For now, the important thing to know is the file is structured. Each block of your Jade file must be indented. You also cannot mix spaces and tabs in a single file.
In the views directory create a file named index.jade. Here is this file in its entirety:
<p> CODE: https://gist.github.com/thec2group-blog/7e355c964d03ef21b80af9344b11e1c2.js</p>
Restart your app.js node application and then navigate to http://localhost:8080/. You should now see the phrase Hello Jade in your browser.
Have questions about Node.js? Post your questions or comments for Jon Price below.