Created: 2014-05-19 11:53
Updated: 2014-05-20 19:16
License: other

Vert.x Angular Template

This is not released yet!!! It's work in progress I'll announce a release as soon as possible.

The goal of this project is to provide a template project for a modern hipster web application project based on a Vert.x backend and an AngularJS frontend. The backend will be built by gradle and the frontend project generated by Yeoman and built by Grunt. This requires a tight gradle/grunt integration.

It's just great to stand of the shoulder of giants. And to not re-invent the wheel, this template project is built based on existing working solutions:

In the future this project might result in a 'VHipster' Yeoman generator.


Setting up a template project requires two major steps:

  • Install the prequisites on your dev machine
  • Install required modules/plugins
  • Clone the template project

Required Native Software

Install these software packages on your dev machine. It's best to use the native software management of your OS.

  • Recent Java VM (Java 7 and up) installed and in the path (check with java -version)
  • Node.js installed and in the path (check with node --version and npm --version)
  • Ruby (check with ruby --version) - if using SASS
  • Git client (check with git --version)


Depending on your user's OS permissions you might need administrator rights (e.g. sudo) to install.

Compass (check with compass --version) - if using SASS

gem install compass

Yeoman (check with yo --version)

npm install -g yo

Grunt (check with grunt --version)

npm install grunt --save-dev

Bower (check with bower --version)

npm install -g bower


npm install grunt-connect-proxy --save-dev

Setup the project

Generate an AngularJS project with Yeoman

mkdir yo
cd yo
yo angular <your project's name>

Hit several times enter to confirm the defaults, except for the bootstrap SASS version if you don't use SASS.

Configure the Grunt Connect Proxy

Edit the generated Gruntfile.js and add jsut before grunt.initConfig


Change the development connect configuration to this:

// The actual grunt server settings
connect: {
  options: {
    port: 9000,
    // Change this to '' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  proxies: [{
    context: '/data-service-path', // the context of the data service
    host: 'localhost', // wherever the data service is running
    port: 8080 // the port that the data service is running on
  livereload: {
    options: {
      open: true,
      base: [
        '<%= %>'
      middleware: function (connect, options) {
        var middlewares = [];

        if (!Array.isArray(options.base)) {
          options.base = [options.base];

        // Setup the proxy

        // Serve static files
        options.base.forEach(function(base) {

        return middlewares;

Test if its running with grunt serve


Things I found on the net which might help me in successfully realize this project:


Steps I did:

  • Cloned the Vert.x Gradle template as decribed in the Vert.x docs
Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more