Grunt connect (grunt-contrib-connect) livereload: Fatal error: Port 8000 is already in use by another process

Question

I'm setting grunt-contrib-watch, and grunt-contrib-connect to live reload, like this:

watch: {
  options: {
    livereload: true,
  },
  files: ['src/**/*'],
  tasks: ['serve']
},
connect: {
  server: {
    options: {
      port: 8000,
      base: './dist',
      hostname: '0.0.0.0',
      protocol: 'http',
      livereload: true,
      open: true,
    }
  }
},

But I'm getting this error when connect tries to reload:

Running "connect:server" (connect) task
Fatal error: Port 8000 is already in use by another process.

I tried a few different ports, but had the same problem.

I don't get how grunt-contrib-connect server can have a conflict with it's own port.

How can I get this to work?

Answer 1

It turns out, the serve task was where I was starting the server, so it was trying to start another server every time it reloaded. I switched it to a dev task where the site was recompiled, but doesn't start a server.

Answer 2

A couple requirements:

Make sure you're not already starting up localhost 8000 somewhere else. If you have two local servers running on the same port it won't work. (Check your other tabs in terminal)

Make sure the following is in your html(at the bottom with the other js)

<script src="//localhost:35729/livereload.js"></script>

and then try something like this:

connect: {
        server: {
            options: {
              port: 8000,
              hostname: 'localhost',
              livereload: 35729,
              open:{
                target: "http://localhost:8000"
              }
            }
        }
    },       
    watch: {
        options: {
          livereload: true,
        },          
        css: {
            files: ['src/**/*'],
            options: {
                spawn: false,
            },
        },
        html: {    
            files: ["**/*.html"]
        }                
    },

Then you can setup a task if you haven't like so:

grunt.registerTask("server", ["connect", "watch"]); // Type grunt server -- Creates a server and checks for any changes in the html/css

Answer 3

Probably a different case but I had exactly the same error message no matter which port number I set in my gruntfile. Turned out that the problem was due to the fact that I had the port number defined as a string not a number.