Frontend for Node.js using Browserify
Today we’ll learn how to setup our development environment for frontend. If you are backend developer and want to do frontend too but keep Nodejs style (using require and npm) then you will love Browserify.
Let’s compare how a classic frontend code looks like vs Browserify. To make this article more interesting, I’ll show you an example using AngularJS.
Here we have classic frontend code (example was taken from w3schools)
[html]
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
[/html]
Now let’s see how this same code looks like with Browserify…
index.html:
[html]
<!DOCTYPE html>
<html>
<head>
<script src="js/bundle.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
</body>
</html>
[/html]
js/app.js
[js]
var angular = require("angular");
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
[/js]
Both examples work the same, but in second example we have code that is more familiar to Node.js developers. And that’s not the only advantage, you can also use a bunch of sweet packages from npm the same way you would use in your backend code.
Ok, now when you know what we will try to achieve and decided that this is pretty cool, let’s start.
First you will need to install Browserify.
npm install -g browserify
(you might need root privileges for -g flag, it will enable you to use Browserify command)
Next, edit your index.html file to include bundle.js (this file will be Browserify’s single file output from all your js code and packages). In this example I’m using folder named “js” and a main js file app.js
In case you want to use angular, install it from npm
npm install angular
Include angular in your main js file, and if you want to use the same example as me, copy/paste the code
[js]
var angular = require("angular");
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
[/js]
When you’re done, use command
browserify app.js > bundle.js
and open your index.html in browser. It should all work as expected.
Watchify
Now you probably don’t want to use this command over and over again when ever you make some change in your code. So let me introduce you to watchify.
Watchify will automatically create new bundle.js file whenever you make a change in your code, saving you some “alt+tab, up, enter” keyboard combos.
Install it the same way you installed browserify, like this:
npm install -g watchify
after installation, run command:
watchify app.js -o bundle.js
Try editing something in app.js and check your index.html if changes have been applied. I’ve changed john doe to johnny cash and it worked.
Now depending on your development environment setup, you might not like having watchify blocking your terminal (in case you use vps) but there is something very very awesome that will solve that problem and also make your development much more enjoyable. It’s called terminal multiplexer or tmux, if you’re not using it already on your vps, trust me, you won’t regret it.
Thanks for reading!
