Play Framework 2.5 and Vue sample CRUD single page application

In my previous post I shared a link to a sample application I had built using the Play framework. That application works and is fine but the one thing I wanted to change was to have a Javascript template framework on the front-end so that I can easily update portions of the webpage with AJAX request and response calls to and from the server. There are many different approaches to accomplish this; you can do it all with Javascript but there are frameworks and libraries available that make this sort of thing a lot easier and cleaner to do. I have used Javascript template engines like Handlebars or DustJs in the past and they have worked quite nicely. There are even more modern frameworks available now that go the extra mile and make things even simpler and more powerful. AngularJS comes to mind. I spent some time learning and seeing how I can use AngularJS for my Play application but in the end I opted to use Vue.js instead. Vue was a lot easier to learn and to get up and running with than AngularJS was and it works amazingly well.

I started by creating a default Play application and reused most of the business-side logic I had used in the previous version of the app. I then created a folder in the root of my project called 'vue' and I put all my Vue related files in there. I am using Play as a RESTful service and Vue as a client-side rendering framework. The only Play Scala template I have is the index.scala.html page which references the bundled javascript file and defines the root element for the Vue application. The only reason I have this index file within Play is to do with the Javascript routing provided by Play. Having said that I think in the long run I will move the index file into the Vue project in order to make use of Vue's hot-reload feature.

If you are interested in this sample application I have built you can clone / downloaded it from here.

Introduction

This application is used to showcase the Play framework as well as Vue.js while learning basic Spanish phrases. This application makes use of the following:

• Playframework 2.5
• Javascript Routing
• JSON Automated Mapping
• Scala Forms
• Vue.js
• Vue Router
• Vue Resource
• Node.js
• Webpack
• Bootstrap
• Slick

Installing

• Download Play 2.5.x (activator)
• Install Play
• Download Node.js
• Install Node.js
• Open a command prompt
• Run `npm install`
• Download / clone the sample application
• https://github.com/rossma/pizarra-alpha.git

Running

• Open a command terminal and change into the sample application root directory
• Run activator:
• activator run
• Run webpack: 
• webpack --watch
• Open the following link in a browser:
• http://localhost:9000

Screenshots