AngularJS Continuous Deployment Tools

Question

I tried Codeship and Heroku to continuously deploy the AngularJS application that I am writing. The application was created using Yeoman and uses conversation and grunts. Initially, I thought this seemed like a really good setup, since Codeship was free to use, and I was able to quickly set it up to create my AngularJS project, and he offered the opportunity to add a deployment step after build. There were even many PaaS providers to choose from (Heroku, S3, Google App Engine, etc.). However, it seems that I am a little stuck in the fact that the application was running on Heroku.

The problem arose because in all the documentation it was suggested to remove the /dist path from my .gitignore so that this directory would be published in the Heroku post-build. This was mainly from the documentation that spoke of publishing to Heroku from a local machine, but I suppose that's all Codeship does under the hood. I did not want to do this, because I do not think that I should check the output of the assembly in the original control. The /dist folder has been added to .gitignore for a good reason. In addition, this view is astonishing at the idea of ​​having a CI server, since I could just click on the latest build from my machine.

After some additional digging, I found out that I can add the postinstall step to my package.json file, for example bower install && grunt build , which re-started the build on Heroku and therefore remembered all the dependencies on the baure (something else that they wanted I need to check the source control!) and the dist directory.

The attempt showed that I needed to add bower and grunt as dependencies in packages.json , which means moving them from devDependencies , where they should belong!

So now I'm stuck. All I want to do is publish the artifacts of the assembly ( /dist ) dependencies ( /bower_components ) and the server.js file that will run the site. Does anyone know how to achieve this with the help of Heroku and Codesy? In addition, someone was successful with this using various tools. I am looking for something free, and I agree that it will not be stable in production (it will not scale to several servers, etc.), but now it’s normal, because all I want to do is constantly Deploy an application for internal testing and the ability to share results with non-technical members of my team so that we can discuss the features we would like to prioritize, etc.

Any advice would be greatly appreciated.

thanks

Answer 1

I found two ways to make this work.

Heroku Node Custom Buildpack

Use the mbuchetics assembly of Heroku. This works mainly by rebuilding the application when it was ported to Heroku.

There were several tricks that I had to use to do this job. In Gruntfile.js , two new tasks had to be set up: heroku:production and heroku:development . This is what buildpack does to build the application. At first, I just overlaid the main build task, but found that either buildpack or Heroku had a problem launching jshint , so in the end I copied the build task and got the parts that I don’t need.

Also in packages.json I had to add this:

 "scripts": { "postinstall": "bower cache clean && bower install" } 

This made bower_components available in Heroku.

Pros

This allowed me to save the .gitignore file tactfully so that the “binaries” in the dist directory and the dependencies in the bower_components directory bower_components not transferred to the original control.

Against

This is basically a rebuild of the application when it is on Heroku, and I usually prefer to use the same “binaries” throughout the assembly and deployment pipeline. Thus, I know that the same code that was built is the same code that was tested and the same code that was deployed.

It also slows down the deployment, as you have to wait until the application is created twice.

Implement CodeShip Script

Not satisfied that I was building my application twice, I tried to use the Script pipeline in CodeShip instead of the existing Heroku. Script basically modified the .gitignore file to allow the creation of a dist folder, and then clicked on the Heroku remote (which leaves the code on the origin remote unaffected by the change).

I ended up with a bash script:

 #!/bin/bash gitRemoteName="heroku_$APP_NAME" gitRemoteUrl=" [e-mail] :$APP_NAME.git" # Configure git remote git config --global user.email " [e-mail] " git config --global user.name "Build" git remote add $gitRemoteName $gitRemoteUrl # Allow dist to be pushed to heroku remote repo echo '!dist' >> .gitignore # Also make sure any other exclusions dont apply to that directory echo '!dist/*' >> .gitignore # Commit build output git add -A . herokuCommitMessage="Build $CI_BUILD_NUMBER for branch $CI_BRANCH. Commited by $CI_COMMITTER_NAME. Commit hash $CI_COMMIT_ID" echo $herokuCommitMessage git commit -m "$herokuCommitMessage" # Must merge the last build in Heroku remote, but always chose new files in merge git fetch $gitRemoteName git merge "$gitRemoteName/master" -X ours -m "Merge last build and overwrite with new build" # Branch is in detached mode so must reference the commit hash to push git push $gitRemoteName $(git rev-parse HEAD):refs/heads/master 

Pros

This requires only one build of the application and deployment of the same binaries that were tested during the testing phase.

Against

I have used this Script quite a few times and it seems relatively stable. However, one of the problems that I know about is that when creating a new pipeline there will be no code on the master branch, so this Script fails when it tries to merge with the remote Heroku pool. Right now, I will get around this by doing the initial push of the master branch in Heroku before starting the build, but I think there might be a better Git command that I could execute line by line; "only merge this branch if it already exists."

Answer 2

Ahoy, Marco from the Codex team. Have you already sent us a message about this in the application? I am sure that we can get your application on Codeship and successfully switch to Heroku.

As a very short answer, the easiest way to achieve this would be to add both bower and grunt to your dependencies in package.json. Another possibility is to look for a custom buildpack with tools already installed.

And finally, you can also run the tools on Codeship, add the newly installed files to the repository, commit the changes and push this new commit on Heroku. If you want to use this, you probably need to force push changes.

Feel free to contact me through an intermediary in the application (in the lower right corner of the site), and I would be happy to help you with this!