Lightbend Activator

Play Framework Akka Cluster Frontend with AngularJS and RequireJS

Activator will be EOL-ed on May 24, 2017.

We’re making it easier and simpler for developers to get started with Lightbend technologies. This unfortunately means that future releases of Play, Akka and Scala will no longer include Activator support, and Lightbend’s Activator server will be decommissioned by the end of 2017. Instead of supporting Activator to create and set up development projects, we'll be supporting standard Giter8 templates for sbt users and Maven archetypes for Maven users. So going forward,

To create new Lightbend projects

Instead of using the Activator command, make sure you have sbt 0.13.13 (or higher), and use the “sbt new” command, providing the name of the template. For example, “$ sbt new akka/hello-akka.g8”. You can find a list of templates here.

Also, as a convenience, the Lightbend Project Starter allows you to quickly create a variety of example projects that you just unzip and run.

To create new templates

If you want to create new templates, you can now do that in Giter8.

To migrate templates from Activator to Giter8

If you created Activator templates in the past, please consider migrating them to Giter8 with this simple process.

Play Framework Akka Cluster Frontend with AngularJS and RequireJS

December 29, 2015
playframework angularjs scala akka cluster requirejs

Small Frontend for an Akka Cluster to start jobs and see the cluster state

How to get "Play Framework Akka Cluster Frontend with AngularJS and RequireJS" on your computer

There are several ways to get this template.

Option 1: Choose play-akka-cluster-sample in the Lightbend Activator UI.

Already have Lightbend Activator (get it here)? Launch the UI then search for play-akka-cluster-sample in the list of templates.

Option 2: Download the play-akka-cluster-sample project as a zip archive

If you haven't installed Activator, you can get the code by downloading the template bundle for play-akka-cluster-sample.

  1. Download the Template Bundle for "Play Framework Akka Cluster Frontend with AngularJS and RequireJS"
  2. Extract the downloaded zip file to your system
  3. The bundle includes a small bootstrap script that can start Activator. To start Lightbend Activator's UI:

    In your File Explorer, navigate into the directory that the template was extracted to, right-click on the file named "activator.bat", then select "Open", and if prompted with a warning, click to continue:

    Or from a command line:

     C:\Users\typesafe\play-akka-cluster-sample> activator ui 
    This will start Lightbend Activator and open this template in your browser.

Option 3: Create a play-akka-cluster-sample project from the command line

If you have Lightbend Activator, use its command line mode to create a new project from this template. Type activator new PROJECTNAME play-akka-cluster-sample on the command line.

Option 4: View the template source

The creator of this template maintains it at

Option 5: Preview the tutorial below

We've included the text of this template's tutorial below, but it may work better if you view it inside Activator on your computer. Activator tutorials are often designed to be interactive.

Preview the tutorial

Akka Cluster Play Frontend

This is a small akka cluster application with a play frontend to show

  • The current cluster state
  • Start jobs in the cluster
It is based on two other amazing activator templates. For the play part I used the "play angular require seed" by Marius Soutier and for the backend part I used parts of the "akka sample cluster in scala" template. Check these out if the docs on this one are sufficient enough.

The tutorial is strucuture in the following way

  • Getting Started
  • Application Architecture
  • Cluster State Frontend
  • Factorial Frontend

Getting Started

Open three terminals at the project root and run in each of them one line of the following commands:

sbt "project backend" "run 2551"
sbt "project backend" "run 2552"
sbt "project frontend" run
The first two lines boot the cluster seed nodes. The last one starts the frontend, which needs at least one seed node to be up and running to join the cluster.

Now go to localhost:9000 and enjoy the frontend. Every page is backed by a websocket, so you do not need to releoad any page, every!

If you want to fire up more cluster nodes, run this in a new terminal:

sbt "project backend" run

Application Architecture

The application is split up in three subprojects.

  • api: contains all messages which can be send by the frontend to the backend
  • frontend: playframework frontend. Depends on and aggregates the api project
  • backend: the akka cluster node. Implements actors which can handle the messages defined in api

Cluster State Frontend

At localhost:9000/#/dashboard you find a minimal dashboard, which shows the current nodes available in the cluster. Open a new terminal and run:

sbt "project backend" run
After a short time you will see a new backend node appearing. If you kill that console, the nodes state will change to unreachable and will then be removed.

This dashboard also includes some stats about the cluster, like memory consumption of each node. These information are more accurate if you put the native sigar library on your classpath, which is only available for the backend cluster.
Take a look at the akka-sample-cluster-scala activator to see how you can achieve this. The graph is rendered via d3js in a defined angularjs directive (in frontend/assets/js/dashboard/directives).

Behind the scenes there are two websockets which update the data. The MonitorActor is responsible for the cluster state changes and the MetricsActor for the cluster metric changes. You could put them in one actor aswell, which listens for all the events.

Factorial Frontend

This example demonstrates how to submit tasks to the cluster. At localhost:9000/#/services/factorial you can submit a factorial calculation n times to the cluster. On the right you see how many factorials are already computed and how long it took.

The backend implements the actual computation within the factorial.Service.scala. The WorkerActor does the job and the FactorialBackend is just for creating the backend actor, which is called by the frontend.

The instantiation of the worker actors is done by the frontend. The piece of configuration in the application.conf looks like this: {
  /factorialService/factorialWorkerRouter = {
    router = adaptive-group

    metrics-selector = mix
    nr-of-instances = 100
    routees.paths = ["/user/factorialBackend"]
    cluster {
      enabled = on
      use-role = backend
      allow-local-routees = off
The factorialService actor is register at startup time via the Global.scala.


Special thanks to Martynas Mickevičius for giving advice on the implementation of this. Also special thanks to the other activator template, which is based this template on, for the great work and helpful explanations.