Deploying a Node.js Docker container to Heroku

In the last post titled Developing Node.js applications in Docker, we have seen how we can work with Docker as our development environment.

In this post, we are going to take the app that we have built named docker-node-app and deploy it to Heroku as a Docker container.

The sample code used in this post can be found here: docker-node-app.

So, let’s get started.

Setup Heroku

The first thing we need to do is download and install Heroku tool belt on our local machine.

Download Toolbelt

You can follow the instructions given here: Install Heroku Toolbelt to install Heroku tool belt for your Operating System.

Setup Account

If you do not have a Heroku account, you can signup here.

Login

Now that we have Heroku installed, we will login. Open a new command prompt/terminal and run

Next, we need to login to the container registry. Run

Once we have successfully logged in to Heroku & Heroku container registry, let’s work with Docker.

Setup Docker

The first thing we are going to do is download Docker for our Operating System.

Download

To Install Docker on our machine, navigate to here & download the software for your OS.

Test Download

Once Installed, you can open up a command prompt/terminal and run  docker ps and you should see something like

At this point, we have both Docker as well as Heroku installed on our machine.

Next, we are going to containerize our app and deploy it to Heroku.

Setup docker-node-app

If you have not already done, please go through Developing Node.js applications in Docker, where we see how to develop Node.js applications using Docker. We are going to begin at the ending of that post.

Clone docker-node-app

Now, we are going to clone docker-node-app from https://github.com/arvindr21/docker-node-app. From anywhere on your machine, run

And then  cd docker-node-app .

Fix Port

We need to make a change to the Dockerfile  to fix the port. While deploying to Heroku, port would be assigned by Heroku.

Open Dockerfile  and update it as shown below

That is it, we are all set to deploy our awesome container app to Heroku.

Deploy to Heroku

Now, we are going to deploy to Heroku. We are going to follow the below steps

  1. Heroku create new app (one time)
  2. Heroku container push – Create and push the container to Heroku Container Registry
  3. Heroku container release – Release/run the container app
  4. Heroku open – Launch the app

From inside  docker-node-app run

This will create a new Heroku app.

Next, we will push the container

Now, we will run the container

And finally open the deployed app run

And we should see

Voila! Our Node.js that we have containerized while development is now deployed to Heroku with ease.

Development & Deployment simplified!

PS: I am shutting down the above Heroku app, as it does not have any thing specific to showcase.

Hope you got an idea as to how we can deploy Node.js containerized application to Heroku.


Thanks for reading! Do comment.
@arvindr21

Node-Webkit, WebRTC and Angularjs – A Video Chat Client

Couple of days ago Saurav Panda requested a tutorial on building a video chat application using Node-webkit and WebRTC. So, here it goes.

Smooth and easy right!

As mentioned in the video, this client is built using Node-webkit, WebRTC and Peerjs. We will leverage the power of Peer.js & WebRTC to enable the connection between 2 node webkit clients. We will host our own peer-server on Heroku (with one click deploy) and use this server for creating the initial connection.

We will be using Angularjs via Lumx (an Angularjs Material Design implementation) as our client side framework.

First we will understand how the application is designed and then we will build the node-webkit client from scratch.

You can find the completed code here.

So, lets get started?

Application Design

The application we are building leverages Peerjs to implement WebRTC.

nwk-webrtcAs you can see from the above diagram, the client 1 & client 2 are our node-webkit clients. When the client is launched for the first time, it would establish a connection with the peer server. Then the peer server would provide a random ID or a unique ID for that client. And when the second client is launched, it acquires its own unique ID.

Now, when the two clients want to talk to each other, we will use the Peer API to establish the initial connection between the two clients and then using WebRTC, they continue talking to each other without the server.

Since we are using Angular.js, we will be building our own custom directive for managing the client and interacting with the Peer API. We would create a new tag called  nwk-video-chat and this tag will take care managing the chat UI for us.

If you are new to WebRTC, refer What Is WebRTC and How Does It Work?

Setup Project

Now that we have an understanding of the application design, we will get started with the development.

Create a new folder named nwk-videochat. Open a new terminal/prompt here. We will be using a slush generator, named slush-wean to quickly scaffold a node-Webkit, Express, Angular and Node application. The scaffolded project has everything you need to develop a node webkit app as well as distribute it.

First let us install bower, gulp, slush and slush-wean globally.

npm install -g bower gulp slush slush-wean

This will take a couple of minutes. Once that is done, we will scaffold a new WEAN app. Run

slush wean

It would prompt you for a project name. You can call it anything or use nwk-videochat. Then it would take a couple of minutes to scaffold the project and setup dependencies.

The project structure would look like

The app folder consists of the HTML, CSS and JS to develop the app. And the assets outside are used for project management.

Now, let us launch the app and test it out. You can do it in 2 ways

  1. using  gulp run
  2. using sublime text node-webkit plugin

I would recommend the second approach for saving some time, but either of them would do.

Once you launch the application, you should see a sample splash screen and then see this

Screen Shot 2015-02-23 at 11.19.13

For development purposes, we will enable the toolbar, so you can debug using the developer tools. For that, open package.json and set toolbar property value to true. Then launch the app again and you should see a URL bar and a settings icon next to it.

When you click on the settings icon, you should see

Screen Shot 2015-02-23 at 11.22.54

You can use this to debug your applications as you would do with any browser based app. The updated package.json would be

Begin Development

We will modify the splash screen first. Open app/index.html and updated it as

Next, we will install Lumx. This would be our UI Framework. Run

bower install lumx --save

Now, we will wire up the dependencies. Open app/views/index.ejs and update it as below

We have referred all the required assets in the head section and in the body, we have added a custom directive/tag named  nwk-video-chat.

Next, open app/public/js/app.js and update it as below

On line 3, we add lumx as a dependency to our module. On line 11, we set a window menu for the app. Without this, text selections, copy & paste would not work in the node-webkit app.

Next, we will fix the header for the app. Open app/public/partials/head.html and update it as below

I would highly recommend going through all the Lumx components and then building your app. The above head.html consists of a stripped down version of the toolbar component.

Finally we will be focusing on the  nwk-video-chat directive. We will create a template for this directive to work with the UI. For that, create a new file named nwk-videochat.directive.html inside the app/public/partials folder. Open this file in your favorite editor and update it as

Refer to Lumx for the CSS classes and the components used above.

User Interface Flow

So, this is what would happen when you launch the client

  1. We establish a new connection with our Peer server (which we will get to at the end)
  2. Once we are connected, the server would send an ID. we will present that ID to the end user to share with his “Peers”.
  3. Once User A enters the peer id for User B, we establish a connection between them via the server
  4. Next, we would invoke a call between the 2 clients using the Peerjs API
  5. Finally they are connected and video streaming initiates between them.

Simple right? We are going to put the same logic in our directive.

Create a new file named nwk-videochat.directive.js inside the client/app/public/js folder and update it as below

Things to notice : (This is the app’s business logic)

  • Line 3 : We create a new directive named nwkVideoChat and add LxDialogServiceLxNotificationService and $sce as dependencies.
  • Line 5 : We restrict the directive to a element
  • Line 6 : We point the template URL to the template we have created in the partials folder
  • Line 8-12 : We set the initial state of the application
  • Line 14 : We show a modal to the user while the client is connecting to the server
  • Line 20 : We get the webkitGetUserMedia and assign it to getUserMedia
  • Line 23 : We create a new instance of peerjs by passing in our custom server details. When we setup our own peer server on Heroku, you can update the same here.
  • Line 30 : The peer is connected to the client, we show a couple of status messages and update close the modal we open on app load
  • Line 43 : The event  call would be fired when a peer initiates a call to this client. As you can see from the comments, I wanted to show a answer or reject call modal and then if the user answers it, we show the video else we reject it. But this approach, for some reason, is not displaying the video for the call initiator. Not sure why!
  • Line 85 : Before we connects the two clients, we need to get the video of the current client. Here, we request the stream. And once that is done, we will invoke the callback on line 92.
  • Line 53 : Once we get the current user’s video stream, we will answer the call and invoke a  handleCall().
  • Line 98 : We cancel out all in progress calls. And then we stream the video from the peer to the current client.
  • Line 71 : If the current client wants to connect to another client, we invoke the peer.call()  and pass the call object to the  handleCall() on line 75.
  • Line 80 : End the active call

That is it! With this we complete our app.

Setup Server

We are going to setup our own peer server on Heroku with their one click deploy. All you need to do is naviagate to the below URL in your browser

https://www.heroku.com/deploy/?template=https://github.com/peers/peerjs-server

And if you are logged in to Heroku, you should see

Screen Shot 2015-02-23 at 12.17.19And when you enter your app name and click on Deploy for free, your peer-server will be available on Heroku! To test the server you can go to

https://<<your-app-name>>.herokuapp.com

For instance my server would be  https://nwk-peer-server.herokuapp.com/ and you should see

Screen Shot 2015-02-23 at 12.21.39That is it, your peer-server is ready to go!

Update line 24 in app/public/js/nwk-videochat.directive.js and then launch the client. You should see the Peer ID generated for your client.

Build and Distribute the app

To build and distribute the app, run

gulp build

or

gulp build --win

or

gulp build --mac

or

gulp build --linux32

or

gulp build --linux64

or

gulp build --all

And you should get that environment specific/all installers. And you can distribute that app & get chatting!.

Hope this post gave you an idea on how to work with video chats on node-webkit with WebRTC,


Thanks for reading! Do comment.
@arvindr21

M.E.A.N. Stack Development with Vagrant

If you are new to MEAN, I would recommend checking out my MEAN Workshop.

Also checkout my tutorial MEAN stack – A Hands on Tutorial

Recently I started using Vagrant for one of my clients. The requirement was to have a unified working environment for all the developers, so that they can focus more on code and less on the onboarding and setup. So, I built a Vagrant box that is ready to be used for M.E.A.N. Stack development.

If you are new to Vagrant take a look at

In this post, I will show how to consume the mean-box I have created as is and get started with M.E.A.N. development. Later in the post, I will also show how you can build a customized version of your own Vagrant box and then share it with your team.

So, let us get started.

Continue reading

Maintaining a Private NPM registry for your Organization with Sinopia

Maintaining a Private NPM registry with Sinopia

In this post, we will take a quick dig at setting up our own private Node Package Registry with Sinopia.

sinopia is a private/caching npm repository server

Maintaining a private NPM for your organization/team is very helpful when you would like to share the code only with them and not the entire universe. You can develop and maintain all your organization specific projects and their components as node packages that can be reused.

If there are multiple teams working, each of them can upload their own reusable node modules to the private NPM and other teams can use them. For example a File upload component or an organization specific HTML5 boilerplate and so on. This way, when you need something all you have to do is run npm install my-h5bp , which will download the boilerplate for you.

So, let us get started.

Continue reading

Deploying Node Applications to Heroku

Deploying Node Application to Heroku

This is a quick & minimalistic tutorial on how to move your local Node app to a public hosting service like Heroku.

Prerequisites

Before we start off deploying, you need to be aware of Git and how to go about it. You can find a tutorial here. (I am assuming you have Node installed)

If you are deploying an app for the first time ever, I highly recommend creating a dummy Node project & playing around with it.

Continue reading