Problem Running Yeoman With LiveReload
on December 19, 2013
Here at workFunc we’ve started integrating Yeoman into the front-end development process for all web projects moving forward. For those not familiar with Yeoman, it’s a wonderful command line tool built by a group of Google Developers (including Addy Osmani & Paul Irish) to assist in the development of web applications and websites. Yeoman does this by automating the process of scaffolding code setup, managing code dependencies within the project (Bower) and including a build/preview tool (Grunt.js). For all you front-end Developers on the cutting edge, these tools are a must-have.
We’ve already been using the also amazing LiveReload plug-in for quite some time now to add efficiencies to programming. This great plug-in auto updates your browser every time you save a file related to a project that LiveReload “watches”, so that you can see updates as you code. It also does some nice things like process LESS & SASS files included in your project.
But with all great things, there are problems. Small little issues that occur from the combination of using all of these great modern tools of web development. If you’re reading this article, that means you use both LiveReload and Yeoman and that you’ve most likely run into this error:
Fatal error: Port 35729 is already in use by another process.
If this is the case, read on…
What’s happening is that the LiveReload app uses the
port 35729 to connect and constantly monitor your browser. Meanwhile, Yeoman‘s
grunt-contrib-livereload package is also looking to use that same port (35729), thus causing the conflict, making Yeoman throw that fatal error.
If you google that error there are plenty of StackOverflow and Github links that pop-up with suggestions ranging from changing the port for LiveReload in
Gruntfile.js all the way to the extreme of editing the core of
Grunt.js (DON’T DO THIS… who knows what other bugs you’ll introduce?). Some people even went to the extent of uninstalling the LiveReload plugin from both their browser and SublimeText (NONONO).
I opted to try the most non-destructive solution praised by many to work; changing the port number used in Yeoman in
Gruntfile.js (as shown above), but after I did this I still received the same error. To verify that this was not working I looked up what was using that specific port through the command line:
lsof | grep 35729
The results of that still shown that for whatever reason, Yeoman was still trying to use
port 35729 regardless of the change that I made in
Gruntfile.js (as shown below).
So what was the fix that finally worked?
Simple, quit out of the LiveReload app! Yes, that was the ultimate fix that worked for me and what may work for you if the other solutions also didn’t work for you. I felt I needed to share this to prevent others from doing unnecessary things like uninstalling apps/plugins and changing core code files. Of course, things always work differently across machines, so my method might not work, in which case, give the other options a try. And if you continue have trouble or other fixes, let us know below.