Web Dev Server : the second generation

Once upon a time, web development was about server development. So, it was normal to start a server environment on your computer to develop.
Today, frontend and backend are most of the time completely separated. It doesn’t make sense anymore to force a frontend developer to start a backend on his desktop.
In the case of big infrastructure servers like a JEE application server, even if you have one on your computer, you don’t want to deploy your files through the server for each test.

First generation : Yeoman

It was a little revolution for web developers when the Yeoman team developed some really cool grunt plugins which were able to watch your source files, launch a simple local HTTP server and reload automatically every time a file was changed.
A revolution because it split the frontend from the backend server for development. The frontend developer no longer required to have his own backend. Personally, it greatly impacted my development environment at the time. Since then, my frontend and backend servers have always been separated during the development phase.
On top of that, you’d get new features: no more F5 to reload the page and with two screens, no more alt-tab either. If you targeted mobile platforms, you were able to plug your device(s) on this dev server and all these devices were reloaded without touching them.
There were however some serious limitations. Firstly, the configuration was awful. Yeoman generated the perfect gruntfile to make it work, but you never dared to touch it yourself.
Secondly, you had to handle the cross domain configurations. Your frontend and backend servers were different so the XHR requests were cross domain and you’d have to configure your backend to accept CORS. At the end, your development environment and your production environment were really different.
Finally, when you had multiple devices, a modification on the source files reloaded the pages, OK, but any interactions with the page had to be done on each device and it became painful anew.

Second generation : BrowserSync

A new solution has appeared which I think represents a new important step and it’s called BrowserSync (http://browsersync.io/). It’s a web development server, like the one Yeoman firstly proposed, but it’s a packaged solution, not just a large amount of Grunt configurations. And it offers some new key features.
The BrowserSync’s main feature is to synchronize all your devices. If you target multiple platforms, you can plug all your devices together, and share not only a live reload on file changes, but also every interaction on your interface. It’s a great help to develop across multiple devices.
The second feature isn’t a central one, it’s also something that we could have thought long ago (and some people actually done it with grunt-connect-proxy for example). But I think it’s something that can really change the development workflow. It’s the Browser Sync server’s ability to act like a proxy of the backend. With this, all the problems we had with the cross domain requests disappear.
Sadly, BrowserSync doesn’t support natively the ability to both serve static files and proxying the backend. I however found a really simple way to perform that. The trick is to configure browser sync to serve files and manually inject a middleware to handle proxy requests. With Gulp, it looks like this:

 var browserSync = require('browser-sync');
 var httpProxy = require('http-proxy');
 var proxy = httpProxy.createProxyServer({
   target: 'http://server/context/'
 });
 var proxyMiddleware = function(req, res, next) {
   if (req.url.indexOf('api') != -1) {
     proxy.web(req, res);
   } else {
     next();
   }
 };
 gulp.task('browser-sync', 'watch', function() {
   browserSync.init(“my/files/to/watch/**/*”, {
     startPath: "/index.html”,
     server: {
       baseDir: "app",
       middleware: proxyMiddleware
     }
   });
 });

Gulp, Angular and BrowserSync

I will use this article as an opportunity to advertise one of my projects. I’m currently working on a Yeoman generator that scaffolds AngularJS applications built with Gulp.
As excited about BrowserSync as I am, I had no other choice than to replace the dev server inherited from the gulp-webapp generator. It will let you play out of the box with browser sync for syncing different browsers, proxying your server, serve your local files and enjoy the live reload if your sources are edited.
You can find the project here : https://github.com/Swiip/generator-gulp-angular
I hope you will find inspiration or directly use the generator. In any case, I’m open to all kinds of feedbacks on the project (and also open to GitHub stars if you read the article till the end :p)

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

%d blogueurs aiment cette page :