From zero to deploying an AngularJS 1.x App on Github Pages and Heroku with Grunt

macOS, Yeoman, AngularJS 1.x, Grunt, Github, Heroku

The full tutorial is here on my Github here.

Link to my Sample Angular Project on Github Pages.

Link to my Dev Bootcamp final project (UpLift) on Github Pages.

Link to my Dev Bootcamp final project (UpLift) on Heroku.

Purpose: The purpose for writing this post is to share what I have learned over the past week about using Grunt. This took a few days for me; however, I hope that it’ll get you up and running within the hour. I will also be editing to this article as I learn more from the community and documentations.

Context: My team and I had seven days to learn enough about a new framework to build our final project at Dev Bootcamp, a coding bootcamp. We decided to use an AngularJS front-end that connected to our Rails API back-end. While it was easy to deploy our Rails API to Heroku, we were unsuccessful at deploying our front-end. Since we used Yeoman to scaffold our Angular template, the Yeoman system included Grunt. Grunt is essentially a task runner that automates tasks that you would do repeatedly. Since we had little time to learn about how Grunt worked, we did not successfully deploy our Web App to Heroku at the time. Since then, our Web App, UpLift, has been deployed to both Github pages and Heroku. The lesson that we learned is to deploy early and often. I’ve compiled a README tutorial of that project since then. Think of this as building and deploying an Angular template Web App from scratch.

Goal: