Gulp, AngularJS and html5Mode

To make your AngularJS app feel a little nicer you've probably enabled html5Mode to remove the annoying hashbang from your URIs. However, this can present some issues when trying to test the site locally.

And, unless you've been living under a rock for the past year you've no doubt heard of gulp — that new task runner that the cool kids ditched Grunt for. We can use it (along with another package) to serve our AngularJS app and get around the issues of testing locally.

How?

I'm going to assume you already have gulp installed, but if you don't take a look at their getting started guide. I'll also assume you've already enabled html5Mode in AngularJS as that's just a single line in your module's config method.

To serve our app we're going to be using a package called gulp-connect. It'll give us a nice little webserver complete with LiveReload. This means when we make a change to our files the changes will be reflected on every device we have the site open on.

You can grab the gulp-connect package and save it to your project's dev dependencies with the following:

npm install gulp-connect --save-dev

Including it in your gulpfile.js is the standard affair. Just plonk the following somewhere near the top of the file.

var connect = require('gulp-connect');

Getting your server up and running at its most basic is very very simple and is just a case of calling a single method inside a gulp task.

gulp.task('serve', function() {
  connect.server();
});

However, there are a number of options you may wish to configure. By default gulp-connect will serve from the directory your gulpfile is stored in. If this isn't the desired root directory then you can easily change it.

gulp.task('serve', function() {
    connect.server({
      root: 'public'
    });
});

Another couple of options you may wish to considering tweaking are the host and the port. Out of the box, your app will be served at localhost:8000 but again this can be changed by setting the forementioned options.

gulp.task('serve', function() {
    connect.server({
      root: 'public',
      port: 3000,
      host: '192.168.1.101'
    });
});

By running gulp serve on your command line you'll now be able to view your application at the URL set in your configuration (in the above example it would be 192.168.1.101:3000).

Things may not work as expected and if you pop open the console you'll probably be presented with the following error:

$location in HTML5 mode requires a tag to be present!

To fix this we just need to pop the requested tag in our main HTML file's <head>.

<base href="http://192.168.1.101:3000">

Things should now work but you'll notice that if you refresh on any page other than the root you'll get shown a 404 error. That's because we haven't yet told gulp-connect we'd like all requests to be funnelled through a single file.

This can be done with the fallback option.

gulp.task('serve', function() {
    connect.server({
      root: 'public',
      port: 3000,
      host: '192.168.1.101',
      fallback: 'index.html'
    });
});

Now you'll be able to refresh on any page you wish and gulp-connect will rewrite all traffic through the index.html file we've referenced in the fallback option.

LiveReload

LiveReload really is a massive time-saver and gulp-connect comes with it baked right in. To enable it, just activate the option.

gulp.task('serve', function() {
    connect.server({
      root: 'public',
      port: 3000,
      host: '192.168.1.101',
      fallback: 'index.html',
      livereload: true
    });
});

Now when changes to your CSS are made they'll automatically be reflected on any device our app is open on.

The package also gives us a way of manually reloading the page should another file be changed. For example, you may wish to reload the page once you've made changes to your HTML file.

gulp.src('./app/*.html').pipe(connect.reload());

Hooking this up to a watch command can make it an extremely powerful tool, giving you complete flexibilty over what forces a page reload automatically.

Want to learn more AngularJS? My book Learning Web Development with AngularJS and Bootstrap is now available from Packt or Amazon

About Stephen Radford

Software Engineer. I take a few photos when I'm not stuck behind a keyboard too.

Leicester, UK http://stephenradford.co.uk

Comments