About This Template

This is a sample blueprint for React frontend that use Play Framework for the backend tasks. Many similar projects put frontend code into a separate subdirectory that utilizes typical React environment including reac-scripts helper etc. This is not the case here. This template contains single build environment where all the source code resides in app folder.

Benefits

There are various benefits when using such a layout:

• Allows full-stack developers to implement functionality in a modular basis where every subfolder inside the app directory houses both code for the backend server and corresponding user interface.
• Provides modular approach that limits functional behavior with a single subfolder in a build tree.
• All maintainer and helper scripts are at in the root folder of the build tree. Other similar projects put NodeJS and React related scripts to the subfolder creating a scattered build environment.
• Play Framework hooks and SBT build scripts are used to invoke webpack and make it watch the changes in user interface files.
• Fully integrated with the SBT build system.
• Output is a single set of files with frontend scripts packed in a separate JAR-file.
• User interface files are served as static assets straight from Netty server bundled to Play framework. No additional servers or configurations are needed.

Drawbacks

• Frontend and backend is tightly coupled. It is not an easy work to convert them to separate projects.
• Single server instance handles all the load; first serving user interface files, then accepting API requests initiated by the user interface.
• Using load balancing is complicating, the easiest way would be spawn another instance of the server. It might be possible to configure some instances to support only API or user interface download requests.

Components

• Play Framework
• Webjars
• SBT build environment (required by Play)
• React
• React Router
• Typescript
• Webpack
• Node-SASS

Although NodeJS package manager NPM is used for managing all JavaScript dependencies, NodeJS itself is not required as development is done using a Play Framework server instance for both backend and user interface.

TODO

• Add support for triggering refresh in browser when user interface code changes. Most probably requires websocket connection and some helper scripts (to be investigated).
• Add preliminary packaging support (Dockerfile, Debian archive).

License

All code in this repository is published under Apache 2.0 license.

Credits

External work used in this project:

• Webpack.scala by nouhoum to hook Webpack commands with Play Framework.