Angular 8 with Play Framework 2.7.x

What the heck is play framework?

Why Play Framework with Angular? Scala views are already available out of the box with play ;)

What are the approaches available to combine Play backend with Angular

  • Frontend and backend concerns are separated out to different projects.
  • Frontend can be deployed in a CDN.
  • Isolated deployment steps are required for both backend and frontend.
  • Need to enable CORS to directly access services exposed from other origins or same origin different ports.
  • All the API’s are exposed to the external parties with cross origin accessibility.
  • Development experience is bad (one command run project is not available).
  • Play activator associated commands (run, build, publish, etc..) to triggers frontend tasks associated (no need to worry how things get wired up).
  • No more CORS hassle, secure out of the box.
  • Easy CI/CD integration.
  • Have to manage frontend code in multiple places (index html within scala views and rest of the code in frontend sub directory).
  • Development time experience is bad (Hard to get watch task working properly).
  • AoT build and other optimization implementation is hard.
  • No clear separation between frontend and backend code.
  • Frontend cannot be deployed in a CDN directly (It is technically feasible using a reverse proxy).
  • Play activator associated commands (run, build, publish, etc..) to triggers frontend tasks associated (no need to worry how things get wired up).
  • Painless development experience (with play run hooks). Watch task with live reload and what not.
  • No more CORS hassle, secure out of the box.
  • Clear separation between frontend and backend code.
  • Frontend code is served via the same server instance which is serving the backend.
  • Easy CI/CD integration.
  • Need to write proxy API’s to access micro services to ensure security (which is not a bad thing anyway).
  • Frontend cannot be deployed in a CDN directly (It is technically feasible using a reverse proxy).

Shall we get started?

  • Generate a play project via activator or download starter project via play framework official site.
  • Clean all the contents within public directory, remove all default controllers view and services, etc..
  • Create a /ui directory within root directory of the project.
  • Use Angular CLI to generate the frontend code base within /ui directory.
  • Modify the /ui/package.json file within Angular code base. Introduce following npm scripts: (You can customize either of these tasks depending on your requirements)
  • Include FrontendCommands.scala file under /project directory. Why? This object contains all the frontend build associated commands. Change the task names accordingly if you wish to change them in /ui/package.json file or change the package manager to yarn.
  • Include FrontendBuild.scala file under /project directory. Why? This is a play run hook implementation to trigger frontend associated watch (serve or start) task command on play activator run.
  • Introduce ui-build.sbt file under project root directory. This file contain the play sbt task mapping to frontend build tasks associated and bind the previously created play run hook.
  • Include FrontendController.scala under controllers directory. This file contains the asset controller wrapper serving frontend assets and artifacts. Additionally include apiPrefix configuration key in application.confwhich is referred by this controller.
  • Include following routes in route file under conf. Note: Use the exact order of routes.
  • Expose all backend associated routes via play codebase which can be consumed in frontend directly.

Other solutions out there

Conclusion

Who made this happen

Credits

References

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Tricky Concepts of Functional JavaScript

My initial thoughts on using Flutter and Dart for App development

Getting Started with ViteJS, Ionic Framework Beta v6 And VueJS

Cloning Project header styling

Using Common RxJS Operators

Never again be confused when implementing ControlValueAccessor in Angular forms

Anatomy of a React Component — Lifecycle Methods 🌳

Create a React App from Scratch in 2021

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yohan Gomez

Yohan Gomez

More from Medium

OpenId Connect (OIDC) with Angular

How to enable HTTPS in Springboot java and angular Application

Implementing Google ReCaptcha in Angular and Java Spring boot.

Creating a Singleton service in Angular