Create a Tabbed Browser Using Node-Webkit and AngularJS

This article was peer reviewed by Edwin Reynoso, Tim Severien and Divy Tolia. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

In the past, cross-platform software development often meant writing the same application in different languages for different operating systems. As you can imagine, this was a difficult situation for project managers, developers and customers alike.

Then, in 2011, Roger Wang introduced something called Node-Webkit. Node-Webkit (which has since been renamed to NW.js) is a combination of Node.js and an embedded WebKit browser which allows developers to use web technologies (i.e. HTML, CSS and JavaScript) to develop native apps. Yes, that’s right! We get to write native apps, using all the goodies that are supported in our modern browsers. For example, CSS3 animations, WebGL, WebRTC, video, audio, and plenty more can all be incorporated into a native application.

In this tutorial, I am going to demonstrate how to harness the power of NW.js to make a tabbed browser, which can be deployed on all major operating systems. As ever, the code for this tutorial can be found on our GitHub repo.

Initial Setup

[author_more]

As the name suggests, NW.js is based on Node, so you’ll need to have that installed on your operating system. We’ll also be making use of npm (the Node Package Manager). If you need help getting either of these things set up, then check out our tutorial: A Beginner’s Guide to npm.

Next we’ll need a folder for our project:

mkdir sitepoint-browser && cd sitepoint-browser

We’ll also need some dependencies that should be installed globally (namely, Yeoman, Grunt and Bower):

npm install -g yo grunt bower

Of these, Yeoman (AKA Yo) is a tool to scaffold everyday projects dynamically, thereby avoiding the hurdles of always having to create reusable project structures manually. Grunt is a task runner which Yeoman uses. It also uses npm and Bower to install required dependencies.

Next, we’ll install Yo’s generator-wean. You can either do this globally or locally. Here I’ll do it globally:

npm install -g generator-wean

NW.js itself has a handful of generators but generator-wean (authored by me) comes bundled with ExpressJS and AngularJS which eases the stress of installing and configuring them. WEAN stands for Webkit, Express, Angular and Node just like the popular MEAN.

Now our skeleton app can be generated with one command:

yo wean

Yo is an interactive guy and the generator will ask you some questions in order to assist in making a project that best suits what you want. Here you can just accept the defaults.

Folder Structure

The folder structure will look like so:

.
├── app
│   ├── app.js
│   ├── index.html
│   ├── public
│   │   ├── css
│   │   │   └── app.css
│   │   ├── js
│   │   │   └── app.js
│   │   ├── libs
│   │   │   ├── angular
│   │   │   ├── bootstrap
│   │   │   └── jquery
│   │   └── partials
│   │       └── header.html
│   ├── routes
│   │   └── index.js
│   └── views
│       └── index.ejs
├── node_modules
├── bower.json
├── Gruntfile.js
├── package.json
└── README.md

For this project, we are interested primarily in the contents of the public directory. The generator will have filled these files with a bunch of boilerplate (a very simple Angular app), but we will be addressing that as we go.

We can now run the skeleton app using:

grunt run or just grunt

This command can be used at any point in the app development to preview changes. It executes the NW.js project which in turns uses Express for routing just as you would when making a web application. This is a good example of how we can use Node modules in NW.js by injecting them in the app/index.html after initializing.

NW.js also has developer tools and toolbars where we can find controls to refresh, debug, inspect, log, etc just as we do when building a web application in Chrome. You can access these by clicking the hamburger icon in the skeleton app.

Dealing With the UI

The most important aspect of this tutorial is to be able to surf the internet from our native application. The webview and iframe tags are perfect candidates for our plan. The webview tag is effective but quite new to the game as it was only recently added to NW.js. The iframe tag, however has been around since HTML 4 and has wide support. We will use it because it is well-known to most developers.

Bootstrap will serve as the base for our UI. We will use a custom bootstrap theme named Slate from Bootswatch. Download Slate and place it in app/public/css/bootstrap.css.

For our icons, we will make use of Font Awesome. From the project root run:

bower install --save fontawesome

This will download Font Awesome to our libs folder just like other bower dependencies. This is because we specify the following line in the .bowerrc file in our project root (the default is otherwise bower_components).

{
  "directory" : "app/public/libs"
}

Fortunately, Bootstrap will handle most of the UI tasks but we need to tweak some of the components and contents to actually make a browser that looks good. To achieve this, we will write some simple and short CSS and place it in app/public/css/app.css:

html,
.tab-content,
.tab-pane,
body > div {
  height: 100%;
}

iframe {
  background: white;
}

.controls {
  position: fixed;
  top: 10px;
  right: 8px;
}

.controls > i {
  padding: 0 3px;
}

.controls > i:last-child {
  color: red;
}

.controls > i:hover {
  color: white;
  cursor: pointer;
}

.close-tab:hover {
  color: red;
  cursor: pointer;
}

The html, body, tab-content and tab-pane height are set to 100% to ensure that regardless of the size of our browser app, the content should fill up the height of the window. By default, width is 100% so there is no need to explicitly specify it. We also give a minimal style to our browser controls which we will be seeing in a while.

Continue reading %Create a Tabbed Browser Using Node-Webkit and AngularJS%

by Christian Nwamba via SitePoint