Angular Fullstack, Codeship & Heroku

My name is Jamie Hayman, this is my first post on Medium so I hope I can provide some excellent tutorials and how-to’s that I encounter through my day-to-day development life.

Today I came across an issue with a start-up application I am trying to build using Angular Fullstack. I am using Codeship to manage my continuous intergration (CI) and decided to expand this into my continuous development (CD) tool to push to heroku.

I found a lack of information on getting Heroku to work with Codeship and Angular Fullstack. Here is a quick and dirty guide to getting this done (this is a work in progress).

To get a full CD environment with Angular Fullstack using only the dist folder you need to do the following:

1. Commit your /dist folder (and everything in it) to the github repo. Ideally this isn’t the best solution as we do not want to commit build folders and files to the repo. Edit your .gitignore and remove the ‘public’ and ‘dist’ from this file. Before committing to master you will need to now run ‘grunt build’ to build files ready for CD.
2. Add a Procfile to the root directory containing: ‘web: node dist/server/app.js’.
3. Within Codeship add a custom deployment script with the following in it: ‘rm -rf !(dist|Procfile)’. This will ensure no other files are added to your heroku server but what is required.
4. Add the Heroku deployment script within Codeship and set that up as per the instructions.

Note: As of today, I have been working to find a better solution to this issue. I am unhappy with commiting the /dist folder to github and would prefer to build and compile on the go. I have yet to find an alternative solution without pushing to the repo.