Change - Know that nothing stays the same

Deploy a JS project - Part III

June 26, 2015

angularjs
bower
npm
grunt

Im using NPM and Bower to handle my libraries. As I’ve said before, I’m using Angular Fullstack Generator, this generator uses Grunt and it uses grunt-contrib-copy in order to prepare the files we are going to need our app.

This can be found in /dist folder with a structure like this:

/dist     
/public (our AngularJS Application)     
/server (our NodeJS server)   
/bower_components     
package.json

I have some observations about this:

If we have our bower components in our /dist folder it should be only if we want to run our application directly from that directory, for example, if we point our webserver to this folder and the application needs to look in a specific place where to find those components.

The problem with the previous point its when you want to deploy this compiled version of your application. In you maintain this folders and files as the original generator you will have more problems than solutions:Every time you want to upload you /dist folder to your server, its going to take more time to upload /bower_components folder too.

You’ll need to run “npm install” in order to get any package defined in package.json

In order to fix this points, I’ve changed my original configuration of this copy plugin to:

Original version

dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.client %>',
      dest: '<%= yeoman.dist %>/public',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        'downloads/**/*',
        'bower_components/**/*',
        'assets/images/**/*', //images/{,*/}*.{webp}',
        'assets/fonts/**/*',
        'index.html'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/public/assets/images',
      src: ['generated/*']
    }, {
      expand: true,
      dest: '<%= yeoman.dist %>',
      src: [
        'package.json',
        'server/**/*'
      ]
    }]
  },

New version

dist: {
  files: [{
    expand: true,
    dot: true,
    cwd: '<%= yeoman.client %>',
    dest: '<%= yeoman.dist %>/public',
    src: [
      '*.{ico,png,txt}',
      '.htaccess',
      'assets/images/{,*/}*.{webp}',
      'assets/fonts/**/*',
      'index.html'
    ]
  }, {
    expand: true,
    cwd: '.tmp/images',
    dest: '<%= yeoman.dist %>/public/assets/images',
    src: ['generated/*']
  }, {
    expand: true,
    dest: '<%= yeoman.dist %>',
    src: [
      'bower.json',
      'package.json',
      'server/**/*'
    ]
  }]
}

I don’t copy bower_components folder, downloads folder, and I copy bower.json file.

With my /dist folder ready to upload to my server I need to prepare some other things.

One tool I was using before to do my deploys is Capistrano and a good thing I remember about how Capistrano works it that you have a “shared” folder with any file or folder you want to share between differents releases.

We are going to share our bowercomponents and our nodemodules folders, if we do this our deploy time it should be better after our initial deploy, this initial deploy its the only one who needs to do the “npm install” and “bower install” from scratch.How we are going to do that is going to be in Part XI.


Agustin Vinao
Agustin Vinao.

Paradox: Life is a mystery. Don't waste time trying to figure it out.
Humor: Keep a sense of humor, especially about yourself. It is a strength beyond all measure.
Change: Know that nothing stays the same.