Ratpack: hello world with AngularJS

Johan Tuitel

  • 12/05/2017
  • 3 minuten leestijd
Johan Tuitel

Ratpack: hello world with AngularJS

AngularJS is a really hot javascript framework, which we will combine with ratpack. This is really simple, but yet so powerfull


Why combine ratpack and angularjs? I want to have a lightweight server to run my AngularJS application, because AngularJS doesn't really need a server. It is a Javascript Framework, but we need to expose it on the network/internet. Otherwise it would not be very handy anyways.

  1. create a simple java-maven project
mvn archetype:generate -DgroupId=nl.com.devnl -DartifactId=HelloWorld -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false
  1. Itegrate ratpack with our project open the pom.xml of our project and add ratpack properties

after that, we need to add the dependency.

        <!-- https://mvnrepository.com/artifact/io.ratpack/ratpack-core -->
  1. add build plugin
  1. create the ratpack-server in our generated project, we have an App.java. Open this file and replace the main by
    public static void main(String[] args) throws Exception {
        RatpackServer.start(server -> server
                .handlers(chain -> chain
                    .files(f -> f.dir("public").indexFiles("index.html"))
  1. add sources navigate to C:\projects\HelloWorld\src\main and add a resources folder.

open dos-prompt and navigate to the resource older.

C:\>cd C:\projects\HelloWorld\src\main\resources

create .ratpack file(this file is used for reference) by

type nul > .ratpack

create a public folder where we add an index.html file with our AngularJS application.

<!DOCTYPE html>
        <title>AngularJS Ratpack</title>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="app.js"></script>

    <!-- apply our angular app to our site -->
    <body ng-app="helloApp">
        <div id="content" ng-controller="HelloController">

create a app.js file with

var app = angular.module('helloApp', []);

        function ($scope) {
            $scope.message = "Hello AngularJS from the Ratpack-server";
  1. now we run our application simple by executing App.java en open http://localhost:1000 in a browser.
    AngularJS running on Ratpack

check for extra information about ratpack or angularjs

Ratpack Github
Ratpack Twitter