Tag Archives: debug

Build a NodeJS powered Chatroom Web App Part 6: Debugging Remotely


Build a Node.js-powered Chatroom Web App: Debugging Remotely
// Kogonuso

sshot-10593.png
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.
The tutorial will use the optional Visual Studio and the Node.js Tools for Visual Studio plug-in as a development environment. I have provided links to free downloads of both tools. This is a beginner to intermediate-level article—you’re expected to know HTML5 and JavaScript.

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 6 – The Finale and Debugging Remote Node Apps

Welcome to Part 6 of the hands-on Node.js tutorial series: Build a Node.js-powered chatroom web app.
In this final installment, I will show you how to do a final deployment of your chatroom and how to perform remote debugging.

Deploying to Azure

Now that we’ve got our Node.js-powered anonymous chatroom app working, let’s deploy it to the cloud in a few clicks. You can deploy to any cloud that supports Node.js. 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 trial credits 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 have your Azure account set up, go back to the IDE, right click on the project and click Publish.
    1428560674NodeJS-Article-6-01-06-Publishing-Via-Azure.png
  2. Clicking Publish will open a wizard with a few options, 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. Click New to create a new Azure website or, if you already have one created, you can select it from the dropdown.
    1428560708NodeJS-Article-6-02-Publishing-New-Azure-Website.jpg
  5. You will want to complete the fields in the wizard (just like below). Make sure to choose a unique site name, and then click Create.
    1428560703NodeJS-Article-6-03-Completing-the-Wizard.png
  6. You will be presented with a pre-filled wizard. Click Publish.
    1428560697NodeJS-Article-6-04-Publishing-Final-Step.png

We’ve deployed to the cloud but the work is not over yet!

Enabling WebSockets in Azure Websites

There are a few things you need to do to ensure that WebSockets are enabled for your website. If you want more detailed steps or FAQ, be sure to visit this page.
First, you will need to enable WebSockets from the Azure command-line or the Configuration tab, like so:
1428560692NodeJS-Article-6-05-Enabling-Web-Sockets.png
Second, you will want to modify your web.config file and the following line to the system.webServer XML element.

<webSocket enabled="false" />

It may seem counterintuitive, but this disables the IIS WebSockets module, which includes its own implementation of WebSockets and conflicts with Node.js specific WebSockets modules such as Socket.IO.

Debugging Remote Node.js Apps

Node Tools for Visual Studio comes with several advanced debugging features such as conditional breakpoints, “hit count” breakpoints, tracepoints and remote debugging support for Windows, Linux and OS X. Read more here.

Connecting to Remote Node.js Instances

NTVS has support for remote debugging code running on Azure Web Sites. Unlike regular remote debugging, the target machine is not directly accessible over TCP. NTVS comes with a WebSocket proxy for the debugging protocol that exposes the debugger protocol via HTTP. When you create a new Windows Azure project, the proxy is fully configured for you in Web.Debug.config, and will be enabled on the Azure WebSite if you publish your project in the Debug configuration by following the next couple of steps.

  1. Right click on the project and select Publish.
    1428560674NodeJS-Article-6-01-06-Publishing-Via-Azure.png
  2. Select the Settings tab on the left and be sure to choose the Debug configuration from the dropdown.
    1428560687NodeJS-Article-6-07-Publishing-to-the-Web-in-Debug-Mode.jpg
  3. Click Publish.

Once your project is properly deployed and WebSockets are enabled, you can attach to the web site from Server Explorer. If you do not have the Server Explorer window open, you can open it via View → Server Explorer. Then, locate your web site under Windows Azure → Web Sites, and right-click on it. If it is running, and your project has been deployed to it using the Debug configuration, you should see the Attach Debugger (Node.js) command in the context menu.
1428560683NodeJS-Article-6-08-Attach-Node.js-Debugger.png

Reading Logs and Streaming Logs

If you want to stream the latest logs, it’s quite easy! All you have to do is right click on your website in the Server Explorer and choose View Stream Logs.
1428560678NodeJS-Article-6-09-Streaming-Logs.png

Conclusion

Voila! There you have it! You now have an anonymous, real-time chatroom in the cloud! Throughout this series, we learned how to set up Node.js, develop a web front-end with Express, deploy our app to the cloud, how to use Socket.IO to add a real-time layer, and then how to deploy it all together!
1428562937barney.gif
Be sure to reread the different parts on my blog as I may occasionally add updates to this tutorial. You can stay up-to-date on this and other articles by following my Twitter account
P.S. If you want more success GIFs, go here.

More learning for Node.js on Azure

For more in-depth learning on node, my course is available here on Microsoft Virtual Academy.
Or some shorter-format videos on similar node subjects:

This article is part of the web dev tech series from Microsoft. We’re excited to share Project Spartan and its new rendering engine with you. Get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device at modern.IE.

Rami Sayar is a technical evangelist at Microsoft Canada focusing on web development (JavaScript, AngularJS, Node.js, HTML5, CSS3, D3.js, Backbone.js, Babylon.js), open data and open source technologies (Python, PHP, Java, Android, Linux, etc.) Read his blog or follow him on Twitter.

Build a NodeJS powered Chatroom Web App Part 4: Chatroom UI with Bootstrap


Build a Node.js-powered Chatroom Web App: Chatroom UI with Bootstrap
// Kogonuso

sshot-10599.png
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.
The tutorial will use the optional Visual Studio and the Node.js Tools for Visual Studio plug-in as a development environment. I have provided links to free downloads of both tools. This is a beginner to intermediate-level article—you’re expected to know HTML5 and JavaScript.

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 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.
In this installment, I will show you how to add a Twitter Bootstrap-styled frontend to the chatroom backend you built in Part 2 and Part 3.

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 css, js, and fonts to the public folder in your project.
You will notice a few inconsistencies with the existing folder structure. We will unify the stylesheets and JavaScript folders. I prefer the Bootstrap nomenclature of css for stylesheets and js for javascript as that is shared with other third-party libraries. Copy the files in stylesheets into css and delete the javascript folder as it should be empty. Next go to layout.jade and change the following line:

link(rel='stylesheet' href='/stylesheets/style.css')

to:

link(rel='stylesheet' href='/css/style.css')

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 style.css link.

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

Next, we want to add the JavaScript file that Bootstrap needs for its components and plugins. Add the following line to the end of layout.jade:

script(type=’text/javascript’ src=’/js/bootstrap.min.js’)

Completed layout.jade

doctype html
html
head
title= title
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')
link(rel='stylesheet' href='/css/style.css')
body
block content
script(type='text/javascript' src='/js/bootstrap.min.js')

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

. 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.

.wrap
.container-fluid
h1 Welcome to the Node Chatroom
#messages
.push

Next, we are going to develop the message editing area. We want to capture the textbox and send button within a div called footer and a div called container-fluid. The footer div will have the same indentation as the wrap div.
Next, I will use the Bootstrap grid system (read about it here) to split the message editing area into two. One of the columns will take the majority of the space and will contain the textbox for writing the message, the second column will contain a block-level button for sending the message. Note how Jade lets us specify the attributes of an element using the paragraph notation. The code will look like this:

.footer
.container-fluid
.row
.col-xs-8.col-sm-9
input(type="text" id="message-box" class="form-control input-lg" placeholder="Write a message here..." rows="3")
.col-xs-4.col-sm-3
button#send-message-btn.btn.btn-primary.btn-lg.btn-block Send Message

Completed index.jade

extends layout
block content
.wrap
.container-fluid
h1 Welcome to the Node Chatroom
#messages
.push
.footer
.container-fluid
.row
.col-xs-8.col-sm-9
input(type="text" id="message-box" class="form-control input-lg" placeholder="Write a message here..." rows="3")
.col-xs-4.col-sm-3
button#send-message-btn.btn.btn-primary.btn-lg.btn-block Send Message

Adding CSS to Force the Message Editing Area to the Bottom of Viewport

We want to force the message editing area to the bottom of the viewport, we will want to add a few custom CSS rules in the public/css/style.styl page. This file uses the Stylus CSS preprocessor but you can also paste verbatim CSS that will be recopied into the generated CSS file.
First, we will want to ensure the whole page takes up 100% of the height.

html, body
height: 100%

Second, we want to ensure the wrap area takes up the maximum height it can but leaves a 60px margin at the bottom for our footer and message editing area.

.wrap
min-height: 100%
height: auto !important
height: 100%
margin: 0 auto -60px

Third, we want to ensure that this space for the editing area is respected and to assign it to the footer.

.push, .footer
height: 60px

Finally, for stylistic reasons, let’s add a subtle background color to the footer.

.footer
background-color: **#f5f5f5**

Completed style.styl

html, body
height: 100%
.wrap
min-height: 100%
height: auto !important
height: 100%
margin: 0 auto -60px
.push, .footer
height: 60px
.footer
background-color: #f5f5f5

Screenshot

If you did everything correctly, you should end up with a UI that looks like this:
1428455963Final-Screenshot-for-Node-UI.png

Conclusion

Voila! We have used Bootstrap and the Jade/Stylus preprocessors to add a nice UI layout for our chatroom that is served by Node.js. In the next installment, I will show you how to connect the UI and the Node.js backend via WebSockets.

Stay Tuned for Part 5!

Part 5 — Connecting the Chatroom with WebSockets is here. You can stay up-to-date on this and other articles by following my Twitter account

More Node.js Learning on Azure

For more in-depth learning on Node.js, my course is available here on Microsoft Virtual Academy.
Or some shorter-format videos on similar Node.js subjects:

This article is part of the web dev tech series from Microsoft. We’re excited to share Project Spartan and its new rendering engine with you. Get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device at modern.IE.

Rami Sayar is a technical evangelist at Microsoft Canada focusing on web development (JavaScript, AngularJS, Node.js, HTML5, CSS3, D3.js, Backbone.js, Babylon.js), open data and open source technologies (Python, PHP, Java, Android, Linux, etc.) Read his blog or follow him on Twitter.

Video: JVM Debugging Under the Hood


Interview with Martin Skarsaune on his decentipede project for JVM Debugging.

Video: Visual Studio Tools for Apache Cordova


In this episode, Robert is joined by Ryan Salva, who shows us what’s new in the Visual Studio Tools for Apache Cordova. These enable developers to use their HTML, CSS and JavaScript (or TypeScript) skills to write and debug Windows, iOS and Android apps. Ryan focuses on the most recent additions to the tools, including changes to the project system and support for the latest in modern Web technologies.

Debugging in Visual Studio Code


via Debugging in Visual Studio Code.

One of the key features of Visual Studio Code is its great debugging support. VS Code’s built-in debugger helps accelerate your edit, compile and debug loop.

Debugging Android Apps with Facebook’s Stetho


via Debugging Android Apps with Facebook’s Stetho – Tuts+ Code Tutorial.

Stetho is an open source debugging platform, developed by Facebook, that offers a rich and highly interactive debugging experience to Android developers. With Stetho, debugging native Android apps becomes as simple as debugging a web page, because it allows you to use Google Chrome’s developer tools to perform various debugging activities, such as view hierarchy inspection, network inspection, SQLite database management, and more.

In this tutorial, you are going to learn how to add Stetho to an Android project and use both Google Chrome’s developer tools and Stetho’s command line utility,dumpapp, to debug it.

Debugging JavaScript in MyEclipse


via Debugging JavaScript in MyEclipse.

This tutorial introduces the basics of debugging your web applications in MyEclipse.  You can debug JavaScript, (X)HTML, JSP and Node.js files. In this tutorial, you will learn how to:

  • Start the JavaScript debugger
  • Use breakpoints in the debugger
  • Use Variables and Expressions in the debugger
  • Control the debugger execution
  • Use the Loaded JavaScript view