Problem Running Yeoman with LiveReload?

Problem Running Yeoman With LiveReload


written by Jonah Bitautas on December 19, 2013
Sorry, there was an issue on our end. Please try again.

Thanks for signing up, please check your email.

Hey! Notification message here

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…

The Problem

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.

The Solution(s)

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).

Try Changing LiveReload port number in Gruntfile.js

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).

LiveReload and Yeoman still compete for the same port 35729

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.


Leave a comment

  • Nikos

    thanks!

    can you expand on what you mean by quit out of the LiveReload app?

    • Jonah Bitautas

      Yes, the problem lies in the fact that I have the OSX version of the LiveReload app installed. I usually have this application running all the time and it even starts with the login of my computer. So when I use Yeoman to scaffold a project, the grunt-contrib-livereload intefers with the LiveReload application, because they both share the same port number by default, 35729. So I just quit the OSX version of the LiveReload application, which in turns frees up the port for Yeoman to use. I hope that makes sense!

  • janesconference

    If you’re scaffolding with angularjs, you need to change the port also in the watch.js.options.livereload fields of your grunt config.
    If you change it only in one place, grunt serve won’t work like you described in this post. If you change it in both places, it will work.

  • Eric

    I still dont understand LiveReload app, please be more specific.
    I have the same problem and i’ve tried so many ways to fix this still dont work