Monday, January 13, 2014

Developing first-class web applications (Part II)

OK, so now that we have realised that separating our front- and back-end code bases is the way to go then how do we do build the projects in practice?

First, we are going to need a build server and for this example I used the Jenkins service that Cloudbees provides.

As you see in the screenshot, I have two different projects, one for the front-end part and another for the back-end part. I have used 2 super-amazing MVC-ish frameworks: AngularJS for the front-end and Grails for the server-side.

Here is the front-end project configuration in Jenkins:

First we install Node, PhantomJS and Lineman and then we build the project using that. As explained in Lineman's excellent documentation, the spec-ci target will compile the app and run our tests using PhantomJS. The resulting assets are zipped and stored in the project workspace.

And now the back-end configuration:

As shown by the screenshot we copy the latest front-end assets into the current (back-end) project and then we unzip them to the web app directory before Grails builds the WAR file that will be deployed to the container by the build server.

Every time we build the client app, we trigger the back-end build project, effectively deploying our application in the cloud. We have now setup a basic deployment pipeline.

And that's it! A cloud-based continuous integration project that uses Jenkins and Lineman to build a rich client web application that is developed and built completely separate of the backend.

Links to the Git projects

No comments:

Post a Comment