Awesome

Java Play Angular Seed

Use play framework to develop the web application backend/services and frontend using Angular CLI, all in a totally integrated workflow and single unified console. This approach will deliver perfect development experience without CORS hassle.

Used Versions

How to use it?

Prerequisites

Node.js (version 10 or higher)
JDK (recommend version 1.8 or higher)

Let's get started,

Fork or clone this repository.
Used any of the following SBT commands which will intern trigger frontend associated npm scripts.

    sbt clean           # Clean existing build artifacts

    sbt stage           # Build your application from your project’s source directory

    sbt run             # Run both backend and frontend builds in watch mode

    sbt dist            # Build both backend and frontend sources into a single distribution artifact

    sbt test            # Run both backend and frontend unit tests

This seed is not using scala play views. All the views and frontend associated routes are served via Angular code base under ui directory.

Complete Directory Layout

├── /app/                                 # The backend source (controllers, models, services)
│     └── /controllers/                   # Backend controllers
│           └── FrontendController.scala  # Asset controller wrapper serving frontend assets and artifacts
├── /conf/                                # Configurations files and other non-compiled resources (on classpath)
│     ├── application.conf                # Play application configuratiion file.
│     ├── logback.xml                     # Logging configuration
│     └── routes                          # Routes definition file
├── /logs/                                # Log directory
│     └── application.log                 # Application log file
├── /project/                             # Contains project build configuration and plugins
│     ├── FrontendCommands.scala          # Frontend build command mapping configuration
│     ├── FrontendRunHook.scala           # Forntend build PlayRunHook (trigger frontend serve on sbt run)
│     ├── build.properties                # Marker for sbt project
│     └── plugins.sbt                     # SBT plugins declaration
├── /public/                              # Frontend build artifacts will be copied to this directory
├── /target/                              # Play project build artifact directory
│     ├── /universal/                     # Application packaging
│     └── /web/                           # Compiled web assets
├── /test/                                # Contains unit tests of backend sources
├── /ui/                                  # React frontend source (based on Create React App)
│     ├── /e2e/                           # End to end tests folder
│     ├── /node_modules/                  # 3rd-party frontend libraries and utilities
│     ├── /src/                           # The frontend source code (modules, componensts, models, directives, services etc.) of the application
│     │     ├── karma.conf.js             # Karma configuration file
│     │     └── proxy.conf.json           # UI proxy configuration      
│     ├── .angular.json                   # Angular CLI configuration
│     ├── .editorconfig                   # Define and maintain consistent coding styles between different editors and IDEs
│     ├── .gitignore                      # Contains ui files to be ignored when pushing to git
│     ├── package.json                    # NPM package configuration.
│     ├── README.md                       # Contains all user guide details for the ui
│     ├── tsconfig.json                   # Contains typescript compiler options
│     └── tslint.json                     # Lint rules for the ui
├── .gitignore                            # Contains files to be ignored when pushing to git
├── build.sbt                             # Play application SBT configuration
├── LICENSE                               # License Agreement file
├── README.md                             # Application user guide
└── ui-build.sbt                          # SBT command hooks associated with frontend npm scripts

What is new in here?

FrontendCommands.scala

Frontend build command mapping configuration.

    ├── /project/
    │     ├── FrontendCommands.scala

FrontendRunHook.scala

PlayRunHook implementation to trigger npm run start on sbt run.

    ├── /project/
    │     ├── FrontendRunHook.scala

FrontendController.scala

Asset controller wrapper serving frontend assets and artifacts.

    ├── /app/                                 
    │     └── /controllers/                   
    │           └── FrontendController.scala

ui-build.sbt

This file contains the build task hooks to trigger frontend npm scripts on sbt command execution.

npm scripts

New and modified npm scripts of Angular CLI generated package.json.
Check UI README.md to see all available frontend build tasks.

├── /ui/                       
│     ├── package.json

proxy.conf.json

Used to proxy play backend API when running the project on watch mode.

├── /ui/                       
│     ├── proxy.conf.json

Routes

├── /conf/      
│     ├── routes

The following route configuration map index.html to entry route (root). This should be placed as the initial route.

GET        /             controllers.FrontendController.index()

All API routes should be prefixed with API prefix defined under application.conf (Default prefix apiPrefix = "api")

Example API route:

GET        /api/summary  controllers.HomeController.appSummary

The following route is being used to serve frontend associated build artifacts (css, js) and static assets (images, etc.). This should be placed as the final route.

GET        /*file        controllers.FrontendController.assetOrDefault(file)

Note: On production build all the front end Angular build artifacts will be copied to the public/ui folder.

Can be used to implement any front end/ui build!

Simply replace the ui directory with the build of your choice
Make output directory ROOT/public/
Implement a proxy to localhost:9000

Looking for some other frontend framework or language choice

Contributors

<img src="https://avatars2.githubusercontent.com/u/5279079?s=400&v=4" width="100px;"/><br /><sub>Yohan Gomez</sub>	<img src="https://avatars2.githubusercontent.com/u/6312524?s=400&u=efc9267c6f903c379fafaaf7b3b0d9a939474c01&v=4" width="100px;"/><br /><sub>Lahiru Jayamanna</sub><br />	<img src="https://avatars0.githubusercontent.com/u/3881403?s=400&v=4" width="100px;"/><br /><sub>Gayan Attygalla</sub>	<img src="https://avatars0.githubusercontent.com/u/24251976?s=400&v=4" width="100px;"/><br /><sub>Anuradha Gunasekara</sub>

License

This software is licensed under the MIT license