Browsersync and gulp.js on Cloud9

By Brady Dowling • 02 December 2015

The following is a guest post by Fabien Schiettecatte. Now that we've made an official announcement about Cloud9 having multiple ports and it's in the wild, it's time to really dig into what you can do with it. And it's only fitting that Fabien, the one who originally broke the news, be the one to lead out on this so we reached out to him about the idea and he jumped at the opportunity.

You can now run Browsersync on Cloud9!

Cloud9 opened up port 8081 and 8082. This means we can now easily get up and running with Browsersync in our online code editor. Perhaps you haven't heard of Browsersync or you're not sure how to set it up with these new ports open. Don't worry, I'll walk you through a very basic Cloud9 + Node.js + gulp + Browsersync setup to get you started.

Let's get acquainted with Browsersync and gulp first.

Introduction: Browsersync, time-saving synchronized browser testing

Browsersync is a tool that keeps your smartphone, iPad, desktop testing environments in sync and is also very good at listening for updates and efficiently injecting new CSS or reloading a page (on all devices).

When you click save and you have your test website open in, for example, 3 browsers, they will all update with your new code. If you click a link on one of the 3 browsers, the other browsers will also execute those actions. Perfect for saving time on refreshing pages and testing a website on multiple devices

Introduction: gulp.js, the streaming build system

gulp.js is a task runner, much like Grunt. It lets you automate a lot of the work you'll typically need to do when developing and when getting your code ready for production. Instead of minifying, concatenating, and so on. You'll just type 'gulp' in the command line and it will do all the heavy lifting for you.

It differs from Grunt in that it's more programming and less configuration. I personally prefer gulp.js, but it's a matter of taste and I'm sure you can get this up and running for Cloud9 on Grunt as well.

Technically you do not need gulp or Grunt to use Browsersync, but I highly recommend it. It just fits.

Walkthrough: gulp to Browsersync to syncing awesomeness

For this demo I'm assuming you are working in your /workspace directory and you are starting in an empty box.

Initializing our package.json and installing dependencies

First we need to initialize our package.json (you can accept all defaults).

$ npm init

Then we install gulp and Browsersync.

# install gulp globally so we can use it in the command line

$ npm i -g gulp

# install gulp locally as a development dependency

$ npm i -D gulp

# install browser-sync as a development dependency

$ npm i -D browser-sync

Getting our index.html and styles.css ready

Lets create the 2 files that will make up our website

$ touch index.html

$ touch styles.css

In our index.html we create a basic html template

<!doctype html>

<html>

<head>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<p>Hello World!</p>

</body>

</html>

In our styles.css we then add some awesome styles

p {

font-size: 16px;

color: #444444;

}

Defining our gulp tasks in gulpfile.js

gulp needs a gulpfile.js where you can define basic tasks, lets go ahead and create it.

$ touch gulpfile.js

Inside our gulpfile we need our 2 modules, gulp and browser-sync, so go ahead and assign them to a variable.

var gulp = require('gulp'),

browserSync = require('browser-sync');

Then we define a default task which will execute when you enter 'gulp' in the command line.

gulp.task('default', function() {

console.log('Hello Gulp');

});

You can test it like this, in your cloud9 terminal, to see if it is working.

$ gulp

If it worked you should see a 'Hello Gulp' message in the terminal.

Now we add the good bit, the task that will run Browsersync.

gulp.task('browser-sync', function() {

browserSync({

// You can use wildcards in here.

files: 'index.html, styles.css',

// We can pick port 8081 or 8082, if you are more of a 2's kind of guy, go for the 8082. Highly recommended.

port: 8082

});

});

Getting our server up and running

Finally, to test this setup, we need to run a server, you can use apache2, express.js or any other server. But we are going to use apache2 since it comes preinstalled on cloud9. If you use express, be sure to use port 8080.

$ service apache2 start

Now that our server is running we can open up our website in the browser. The url is in the form http://[workspace-name]-[username].c9.io/. Be sure to use http, since https can run into some authentication errors. I'm sure you can also get it running on https, and you should, but that is not in the scope of this article.

If your username is "bob" and your workspace name is "bobs place" your url would be http://bobs-place-bob.c9.io

Starting Browsersync and adding the Browsersync snippet

Finally, we have our workspace to the left and our live website to the right. The last thing we need to do is run our gulp browser-sync task.

$ gulp browser-sync

If all went well, you'll see a message in the terminal, indicating you need to add a little snippet of code to your index.html. This might be different for you, especially the port and the browser-sync-client version number. So copy-paste the code it shows in your terminal to your index.html, don't copy paste the following code; it is just for illustration.

<script type='text/javascript' id="__bs_script__">//<![CDATA[

document.write("<script async src='http://HOST:8082/browser-sync/browser-sync-client.2.8.2.js'><\/script>".replace("HOST", location.hostname));

//]]></script>

Now reload your website, if all went well you'll see a nice Connected to Browsersync message in the top right.

If you now change index.html or styles.css, your website will update in all active browsers.

Go have a cookie and some warm milk. You now have time for those pleasures in life since you saved yourself 2 to 10 seconds of time each time you changed your html/css/js/php ... and wanted to see how it executed/looked on your website and other devices.