Originally published at: http://www.sitepoint.com/build-node-js-powered-chatroom-web-app-chatroom-ui-bootstrap/
This article is part of a web dev tech series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
This Node.js tutorial series will help you build a Node.js-powered real-time chatroom web app fully deployed in the cloud. In this series, you will learn how to setup Node.js on your Windows machine (or just learn the concepts if you’re on Mac), how to develop a web frontend with Express, how to deploy a Node.js Express app to Azure, how to use Socket.IO to add a real-time layer, and how to deploy it all together.
Part 1 – Introduction to Node.js Part 2 – Welcome to Express with Node.js and Azure Part 3 – Building a Backend with Node.js, Mongo and Socket.IO Part 4 – Building a Chatroom UI with Bootstrap Part 5 – Connecting the Chatroom with WebSockets Part 6 – The Finale and Debugging Remote Node.js Apps
Part 4 – Building a Chatroom UI with Bootstrap
Welcome to Part 4 of the hands-on Node.js tutorial series: Build a Node.js-powered chatroom web app.
What is Bootstrap?
Bootstrap is a wildly popular HTML and CSS framework for building websites and web applications. It is the number one project on GitHub. Bootstrap supports responsive web design, allowing the layout of your page to adapt to the device (desktop, tablet, mobile).
Adding Bootstrap to Our Project
To add Bootstrap to our project, we have to download the minified CSS and JS files for Bootstrap. You can download Bootstrap from this link. After you have downloaded Bootstrap, unzip the file and copy over the folders
fonts to the
public folder in your project.
css and delete the
layout.jade and change the following line:
Next, we want to add the Bootstrap CSS file links to the header and the appropriate meta tags for HTML5 apps in the
layout.jade file. You have to add the following lines right before the line containing the
meta(charset="utf-8") meta(http-equiv="X-UA-Compatible" content="IE=edge") link(rel='stylesheet' href='/css/bootstrap.min.css') link(rel='stylesheet' href='/css/bootstrap-theme.min.css')
Creating the Chat UI Layout
It is time to develop the chat user interface layout. First, you might want to read about Bootstrap and take a look at this long tutorial. All chat engines have an area for the recently received messages and an area for a user to write and send a message. Historically, the layout was to have the editing area attached to the bottom and the messages at the top.
It is not easy to fix elements on an HTML page to the bottom of the viewport without a bit of work. I will be following this sample to fix a footer to the bottom. We want to modify the
index.jade file, and remove all the lines of code under the content block.
First, we add the area of the page that will contain messages received. Let’s start by adding a div with the class
wrap. In Jade, all you need to write is
.wrap to generate a
<div class="wrap"></div>. By using the indentation, we can signal to the Jade templating engine that more indented elements will go within the less indented elements. Take a look at this Jade tutorial if you missed it in the other tutorials.
Next, we want to add another div with the class
container-fluid to add a fluid width to the page. Inside, I will create an
h1 element that says “Welcome to the Node Chatroom” and a div with an id
messages and a final div with the class
push that we will use to push down the message editing area of the chatroom to the bottom of the viewport.