Warning: connect.static is not a function Use --force to continue

Question

I am using YO lessapp project, "grunt-contrib-connect" helps me to start a node js server on 9000 port. Whenever I run grunt serve (start the server) the service is aborted due to the below warning.

Running "connect:livereload" (connect) task
Warning: connect.static is not a function Use --force to continue.

The exact error took place in the below function in Gruntfile.js

 livereload: {
        options: {
          middleware: function(connect) {
            return [
              connect.static('.tmp'),
              connect().use('/bower_components', connect.static('./bower_components')),
              connect.static(config.app)
            ];
          }
        }
      }, 

I have installed npm install grunt-contrib-connect --save-dev, npm install serve-static --save-dev

I came across few post, some suggest to turn off the firewall but no luck.

I know there is something to do with my machine or npm/node/connect version conflicts, because I tried to run the same app from other machine and it works fine.

System configuration :

• Windows 7 Professional
• Node -v4.1.2
• npm -v2.14.4
• connect@3.4.0

I have installed connect and serve-static based upon the post nodejs connect cannot find static, but still the same

Any help? Thanks in Advance

Answer 1

You have to install connect and serve-static:

npm install --save-dev grunt-contrib-connect serve-static 

And then you have to import serve-static in Gruntfile.js:

module.exports = function (grunt) {
  ...
  var serveStatic = require('serve-static');

  grunt.initConfig({
  ...
    connect: {
    ...
      livereload: {
        options: {
          middleware: function(connect) {
            return [
              serveStatic('.tmp'),
              connect().use('/bower_components', serveStatic('./bower_components')),
              serveStatic(config.app)
            ];
          }
        }
      }

Answer 2

From version 0.11.x, the new grunt-contrib-connect does not support connect.static and connect.directory.
You should install serve-static(for serve static files) and serve-index (for Serves pages that contain directory listings for a given path).

like this:
var serveStatic = require('serve-static');
var serveIndex = require('serve-index');

Use serveStatic instead connect.static
and
serveIndex instead connect.directory

grunt.initConfig({
    connect: {
        options: {
            test: {
               directory: 'somePath',
               middleware: function(connect, options){
                    var _staticPath = path.resolve(options.directory);
                    return [serveStatic(_staticPath), serveIndex(_staticPath)]
               }
            }
        }
    }
})