Using gulp and wiredep, socket.io is not added to index.html (even though it is in bower.json)

Question

I have angular, angular-ui-router and socket-io in my bower.json file.

When I run my gulp file (using wiredep), the two angular scripts are successfully added to my index.html file but the socket.io script is not - and I cannot figure out why. Thanks for any help

//command line

[21:56:06] Using gulpfile ~/dev/projects/ecommerceVidChat/gulpfile.js
[21:56:06] Starting 'default'...
[21:56:06] Starting 'bower-dependencies'...
[21:56:06] Finished 'bower-dependencies' after 6.24 ms
[21:56:06] Finished 'default' after 7.24 ms

//bower.json

  "dependencies": {
    "angular": "~1.3.13",
    "socket.io": "~1.3.4",
    "angular-ui-router": "~0.2.13"
  }

// gulpfile.js

var gulp = require('gulp'),
    wiredep = require('wiredep').stream;

gulp.task('default', function() {
  gulp.start('bower-dependencies')
});

gulp.task('bower-dependencies', function () {  
  gulp.src('./build/index.html') 
    .pipe(wiredep({
      directory: './build/bower_components',
      bowerJson: require('./bower.json'),
    }))
    .pipe(gulp.dest('./build/'));
});

//index.html

<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower -->

//package.json

"devDependencies": {
    "gulp": "^3.8.11"
  }

Answer 1

Socket.io itself does not have bower support, remember that it's the server, and not the client.

You can serve the client script with the socket server by setting its serveClient option to true, and insert it in your index directly with:

 <script src="socket.io/socket.io.js"></script>

Or install the client script that is referenced in bower but with another name:

bower install -save socket.io-client

If this package does not have a main property, you will have to override it in your main bower.json:

"overrides": {
  "socket.io-client": {
    "main": "socket.io.js"
  }
}

This way, wiredep will automatically inject it in your index.html.