angular-fullstack generator not renaming images from vendor css

Here's how to deal with angular-fullstack generator image files from vendors such as Bootstrap, datatables, etc.

First of all, Grunt doesn't move images from bower_components/datatables/media/images/* to your dist/public/images folder automatically.  So I had to manually copy image files from their folder to my /public/images folder.  This is where Grunt will pick image files up to copy to the dist/public/images folder.

The next issue was that my datatable images were not showing up on the page after doing a grunt serve:dist.  While troubleshooting, i noticed that the datatable css didn't have renamed image files.  They were pointing to the original names such as '../images/back.png' and not '../images/fc3423.back.png'.

The problem lies with default Grunt usemin configuration not including relative image paths such as '../images/back.png'.  Usemin would only update css to revved images in this path '/images/back.png' which it couldn't find.

    usemin: {
      html: ['<%= yeoman.dist %>/views/{,*/}*.html',
             '<%= yeoman.dist %>/views/{,*/}*.jade'],
      css: ['<%= yeoman.dist %>/public/styles/{,*/}*.css'],
      options: {
        assetsDirs: ['<%= yeoman.dist %>/public']
      }
    },

Thanks to this link below, I was able to fix the issue after googling so many possible solutions:
http://stackoverflow.com/questions/21791727/grunt-usemin-failing-to-insert-revd-image-paths-into-jade-partials


Just change the assetDirs to this new value and everything works like a charm:

        usemin: {
            html: ['<%= yeoman.dist %>/views/{,*/}*.html',
                '<%= yeoman.dist %>/views/{,*/}*.jade'],
            css: ['<%= yeoman.dist %>/public/styles/{,*/}*.css'],
            options: {
                assetsDirs: ['<%= yeoman.dist %>/public/**/']
            }
        },

A checklist for using Angular Fullstack Generator on Node.JS

When architecting a single-page web application, you have to ensure that you choose a platform that is stable, scalable, maintainable, and easy to deploy.  As a Node.js front-end developer, I have spent a lot of time trying different combinations of front-end technologies that would work well with Node and Express.  A co-worker of mine introduced me to Yeoman, which is a scaffolding tool for modern web apps.  Yeoman basically is composed of 3 very important components for creating web applications:

1.  Yo - the scaffolding component (generators).
2.  Bower - the package manager (something like Nuget).
3.  Grunt - the build and deployment tools.

To get started with Yeoman, just run this on the command line:

npm install -g yo

This automatically installs Yo, Bower and Grunt for you.

I experimented with different Yeoman generators and ended up with one that I like, the Angular Fullstack generator. Of course, it really depends on what kind of web app you want to create.  My goal was to create a single-page app using Node.Js, Express and Angular.  I knew that this was challenging because Express had its own routing mechanism and so does Angular.  For now, here is a checklist to get you started with Angular Fullstack:

1.  Install the angular-fullstack generator on your system.

$ npm install -g generator-angular-fullstack

2. Create your app using the generator.

$ yo angular-fullstack mySinglePageApp

This will ask if you want to install additional components like Bootstrap, Saas, and other Angular modules.

3.   Install the node and bower components.

$ bower install
$ npm install

If you run into permission problems like the error below:

Error: EACCES, permission denied '/Users/gmisa/.config/configstore/update-notifier-yo.yml'

You need to change /Users/gmisa/.config/configstore/update-notifier-yo.yml owner to your user name:
sudo chown yourusername:yourusername /Users/gmisa/.config/configstore/update-notifier-yo.yml

4.  Test out the website

$ grunt serve

This should open the Yeoman test page on port 3000.

Enjoy!  :)