How to combine play framework and angular2?

Question

My question is about how to organize the front and the back together in the project. As far as I know, there are two ways to do such thing

Group the front and the back in one project using web-jars dependencies and sbt plugins. So sbt will run all the necessary operations like uglify, concat, compilation (typescript to javascript)...

Separate the front and the back and deploy them separately. In this case, the back end must add the header Access-Control-Allow-Origin. This way the front and the back can be deployed in 2 different hosts. And the tool to be used will be npm and gulp/grunt

A mix of 1 and 2. Still, use the same repository for the front and the back but the front is built and generated by external tools like npm, bower and gulp/grunt

For the moment, there is not a lot of docs for option 2 and 3. Also, the typescript plugin is not yet ready.

Which way is better for scale play + angular2 development?

Answer 1

For all the scenarios, our backend and frontend apps were separate in terms of code and were communicating only via REST interfaces.

There are 3 options which we have tried they are

Option 1

Webjars look like a miracle and several sbt or maven plugins can help you out with the minification, compilation, linting, etc. of your frontend project. This might go well for some.

Some plugins were missing or their configuration was difficult. Webjars are not always up to date. It will work but that is not up to the mark

Option 2

We have tried separate servers, but for most actions, still, need both frontend and backend servers. Developing backend or frontend separately was faster this way, but in my opinion, if you are to supply both - your development process should help you with it.

Option 3

 We are using this with a sbtWeb plugin that allows you to set playRunHooks to whatever actions you would like to run with your project. The idea is to run a javaScript tool which will do all necessary front end job

For example:

playRunHooks += {

  Process(Seq("npm", "install"), file(portal)).lines.foreach(println)

  RunSubProcess(portal, "npm", "run", "watch")

}

you let Play Server to serve your static content but ignore its changes. There is plenty of JavaScript build tools, plugins, and templates to help you out.

Hope this scenario helps you to come with a way to combine play-framework and angular.