Deploying a Yeoman-generated app dist folder using Git Subtree

Yeoman generated apps have a dist folder which contain the necessary files to run your web application.  When deploying to a server from Git, you do not need to pull an entire branch to it.  You just need to deploy the dist folder using the Git subtree command.  Here's how:

1.  Remove the dist folder from .gitignore.

2.  Add the dist directory to your repository.

git add dist && commit -m "Initial dist commit"

3.  Deploy the subtree to a different branch.  Specify a relative path to your dist folder with the --prefix

git subtree push --prefix dist origin distbranch

4. Develop normally, committing your entire repository to your default branch.

5. To deploy the dist folder, run the subtree push command from the root.

git subtree push --prefix dist origin distbranch

That's it!

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!  :)