Using Yeoman with a Custom Development Server

Yeoman is a collection of tools introducing a modern workflow for building web applications (scaffolding, package management, and build tools).

It's bundled with a basic static server for development, but you may want to use you favorite webserver (Flask for me).

Yeoman use Grunt as a task runner to automate tasks, so to be able to use our custom webserver, we'll need to tweak the Gruntfile.

In the Gruntfile.js, let's create a new flask task to spawn our flask server, and add it to the server task.

First we create a new task, using the child_process node module, you can see that my server is started using python, adapt it to your own webserver.

// New task for flask server
grunt.registerTask('flask', 'Run flask server.', function() {
   var spawn = require('child_process').spawn;
   grunt.log.writeln('Starting Flask development server.');
   // stdio: 'inherit' let us see flask output in grunt
   var PIPE = {stdio: 'inherit'};
   spawn('python', [''], PIPE);

And also, you don't have to worry about async, the process will shutdown nicely and you'll see the output along with the watch debug informations.

Then we can replace the connect:livereload (despite its name, it won't disable the live reload) by flask:

grunt.registerTask('server', function (target) {
    if (target === 'dist') {
        return['build', 'open', 'connect:dist:keepalive']);

Now you can start grunt server as usual.

$ grunt server

And it will be shutdown on CTRL+C.

Server side

While developing, your webserver should serve both the app directory and the .tmp directory (used for js templates, et compass). If the file is not present in app, you must check in the .tmp directory as fallback.

In production, the server should serve the dist directory only.

I'm working on a Flask blueprint for Yeoman, so if you're interested, I wrote a follow-up: Using Yeoman with Flask.

Live reloading support

To keep the live reloading working even with a custom webserver, you need to add this snippet manually in your index.html (the default node webserver insert it automatically).

<!-- livereload script -->
<script>document.write('<script src="http://'
 + ( || 'localhost').split(':')[0]
 + ':35729/livereload.js?snipver=1" type="text/javascript"><\/script>')

Your feedback

Please don't hesitate if you have any feedback/question/suggestion !

You should follow me on Twitter

Share this article

Tip with Bitcoin

Tip me with Bitcoin and vote for this post!


Leave a comment

© Thomas Sileo. Powered by Pelican and hosted by DigitalOcean.