Yeoman is one amazing toolkit that makes kick-start and application development management workflow a breeze. It integrates a "preview" server based on Connect middleware but primarily concentrates on "client-side" workflow. While there is some experimental support for Express and Yeoman guys have integration with various back-ends on their roadmap, I needed a full-stack workflow solution right away that will not only serve my "SPA" client application but also be the "API" server. So, after tinkering for a couple of hours, here I'm, blogging about it :).
The process is quite simple and involves generating an application using Yeoman Angular generator in the usual manner and then a little modification of Gruntfile.js. Here are the steps -
- Create an Angular application using Yeoman Angular generator in usual way.
- Install express, grunt-contrib-watch and grunt-express-server using npm install and use the save flags as shown below so that the package.json file is updated automatically.
npm install express --save
npm install grunt-contrib-watch --save-dev
npm install grunt-express-server --save-dev
- Uninstall grunt-contrib-livereload, grunt-regarde and grunt-contrib-connect using npm uninstall. These are not needed anymore and the plugins installed in previous step will provide the necessary functionality.
npm uninstall grunt-contrib-livereload --save-dev
npm uninstall grunt-regarde --save-dev
npm uninstall grunt-contrib-connect --save-dev
- Now comes the modification of Gruntfile.js file. You'll need to remove configuration related to the plugins mentioned in the previous step and add configuration for plugins added in step 1. You can find the exact changes in the embedded gist by doing a diff between revisions.
- Add an Express server at the root of the directory. You can take server.js from the gist and build upon it.
Here a few points worth noting -
- Gruntfile.js Line 20 - Note there are only dev and prod express servers configured. The original configuration had a connect-based test server too. But Karma doesn't need a server for running Angular unit as well as e2e tests. So I think even the original configuration is redundant.
- Gruntfile.js Line 54, 55 - I have added server.js file and server directory that will hold the server code in the app root directory. These have been added to watch configuration so that if server code is updated, application is reloaded and changes are reflected immediately.
- Gruntfile.js Line 271 - Express dev server has been added to the grunt server task.
- server.js Line 22 and 24 - The Express server serves the "client" files from app directory in dev mode and from dist directory in production mode, thereby providing nice integration with Yeoman build cycle.
- Live reloading of HTML in the browser - I tried client as well as server approach mentioned in the grunt-contrib-watch documentation to enable live reloading of HTML but nothing worked. So, finally I installed Chrome extension mentioned on the same page and it's working beautifully. With the watch configuration mentioned in earlier point, any code change, be it a server-side or client-side, is immediately reflected and browser is automatically refreshed making development experience a pleasure.
There you have it. A full stack Yeoman workflow with Express and livereloading.
Here is the gist. Feel free to use the code in any manner you want.