A little trick to reloading an Angular.JS view using a hyperlink

Angular.JS routing can be tricky especially if you deal with hyperlinks.  Let's say you are currently on a view named '/contacts' and you have a hyperlink that points to '/contacts'.  The first thought is that clicking on this hyperlink would reload the view.  Instead nothing happens.  A little neat trick would be to add a forward slash to the URL like this '/contacts/'.  Doing this will force Angular to look at its route configuration and load the view.

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!

Installing new version of Node.js on Ubuntu

Recently i added a new Ubuntu server on AWS with an old version of node.  To add the newer Node.js version, do the following:

sudo apt-get update
sudo apt-get install software-properties-common python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

Editing the hosts file on a Mac

Sometime you need to test your application with URLs other than localhost.  In my case i needed to test  a Twitter oauth authentication callback and wanted to debug it on my localhost.  On Twitter i set my callback URL to http://test.mydomain.com.

On my mac, i had to change my hosts file to let my mac pretend it was test.mydomain.com.

Type this on the terminal:

sudo nano /private/etc/hosts

Add this line:

127.0.0.1   test.mydomain.com

That's it!

Git Pull from a different branch on Git

When you create a repository on Github, you check code in and out of the Master branch by default.  Usually, when deploying to production server, the application is built from the master branch and you don't wan't anyone to mess with production code.  So creating a separate branch on the same repository would be the way to go if you want to check in code without affecting the master branch.

To create a new branch on Github do the following steps:

1.  On the branch drop down, type a name for the new branch to create.  Try the name "dev".

2.  On the terminal, type 'sudo git pull'.  This will inform you that a new branch "dev" is available.

3.  Type 'sudo git checkout dev'

4.  Now you can do a 'sudo git pull' to get get code from the dev branch.

It's that easy!

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