Yeoman is a scaffolding tool for modern web apps and it is amazing. I have been using the angular-fullstack, it has been fantastic to work with and has taught me a ton about the MEAN stack. Travis-CI is a continuous integration tool that is ridiculously easy to use, and is awesome. Heroku is a cloud application platform that makes running modern web apps super simple.
One would think that three great tools like these would be easy to use together. That was not the case for me, so I am going to show you what I did and hopefully it will be easier for you.
I am writing this with the assumption that you know the basics of all three tools.
Yeoman scaffolds out the web app and includes a grunt build system. This system is great. After the app is built you want to only deploy what is in the dist folder. This becomes tricky when using Travis-CI.
Travis provides heroku deploy commands, but the entire git repo will be published, this ends up not working.
So we need to find a way to commit to Github, have Travis-CI run tests, build the app, and then deploy the dist folder to Heroku.
Yo angular-fullstack
The angular-fullstack generator includes grunt-buildcontrol. We need to point this to our Heroku git repo.
Change line 373 to:
remote: 'git@heroku.com:YOUR_HEROKU_APP_NAME'The commands below will set up git, install the heroku cli tool, setup the tool, build the app using grunt build, and then deploy the app via grunt buildcontrol.
Add the following to .travis.yml
after_success: - git config --global user.email "YOUR_EMAIL" - git config --global user.name "YOUR_NAME" - echo "Host heroku.com" >> ~/.ssh/config - echo " StrictHostKeyChecking no" >> ~/.ssh/config - echo " CheckHostIP no" >> ~/.ssh/config; - echo " UserKnownHostsFile=/dev/null" >> ~/.ssh/config; - if [[ $TRAVIS_PULL_REQUEST == "false" && $TRAVIS_BRANCH == "master" ]]; then gem install heroku; fi - if [[ $TRAVIS_PULL_REQUEST == "false" && $TRAVIS_BRANCH == "master" ]]; then heroku keys:clear; fi - if [[ $TRAVIS_PULL_REQUEST == "false" && $TRAVIS_BRANCH == "master" ]]; then yes | heroku keys:add; fi - if [[ $TRAVIS_PULL_REQUEST == "false" && $TRAVIS_BRANCH == "master" ]]; then grunt build; fi - if [[ $TRAVIS_PULL_REQUEST == "false" && $TRAVIS_BRANCH == "master" ]]; then yes | grunt buildcontrol:heroku; fi - if [[ $TRAVIS_PULL_REQUEST == "false" && $TRAVIS_BRANCH == "master" ]]; then heroku keys:clear; fiHeroku -> Account Settings
This will be used to authenticate from travis.
NODE_ENV = production
Add Heroku API Key to Travis-CI
Travis-Ci -> repo -> Settings -> Environment Variables
Add HEROKU_API_KEY
Thats it. Now your build will be deployed to heroku on successful commits.
Here is a sample repo that I used for this article. https://github.com/caseyg1204/yeoman
Please drop me an email or leave a comment if you have any questions.
Originally published at www.parsed.io.