# play-scala-angular-seed **Repository Path**: mirrors_playframework/play-scala-angular-seed ## Basic Information - **Project Name**: play-scala-angular-seed - **Description**: :four_leaf_clover: Scala Play 2.7.x + Angular 8 with Angular CLI seed project with full-fledged build process - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-04-14 - **Last Updated**: 2025-12-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README [![MIT License][license-badge]][LICENSE] # Scala 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. Read more @ http://bit.ly/2AStvhK [![Scala Play Angular Seed](https://github.com/yohangz/scala-play-angular-seed/blob/master/angular.png)](http://bit.ly/2AStvhK) ## Used Summary * [Play Framework: 2.8.0](https://www.playframework.com/documentation/2.8.x/Home) * [Angular: 8.x.x](https://angular.io/) * [Angular CLI: 8.3.9](https://cli.angular.io/) ## How to use it? ### Prerequisites * [Node.js](https://nodejs.org/) (version 10 or higher) * [JDK](http://www.oracle.com/technetwork/java/javase/downloads/index.html) (recommend version 1.8 or higher) * [scala](https://www.scala-lang.org/download/) ### Let's get started, * Fork or clone this repository. * Used any of the following [SBT](http://www.scala-sbt.org/) 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](https://www.playframework.com/documentation/2.8.x/ScalaTemplates). All the views and frontend associated routes are served via [Angular](https://angular.io/) 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](https://cli.angular.io/) generated package.json. * Check [UI README.md](./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 * [Java Play Angular Seed](https://github.com/yohangz/java-play-angular-seed) * [Scala Play React Seed](https://github.com/yohangz/scala-play-react-seed) * [Java Play React Seed](https://github.com/yohangz/java-play-react-seed) * [Scala Play Vuejs Seed](https://github.com/duncannevin/scala-play-vue-seed) by [Duncan Nevin](https://github.com/duncannevin) * [Java Play Vuejs Seed](https://github.com/duncannevin/java-play-vue-seed) by [Duncan Nevin](https://github.com/duncannevin) ## Contributors |[
Yohan Gomez][yohan-profile]| [
Lahiru Jayamanna][lahiru-profile]
| [
Gayan Attygalla](https://github.com/Arty26)| [
Anuradha Gunasekara][anuradha-profile]| | :---: | :---: | :---: | :---: | ## License This software is licensed under the MIT license [license-badge]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat [license]: https://github.com/yohangz/scala-play-angular-seed/blob/master/LICENSE [yohan-profile]: https://github.com/yohangz [lahiru-profile]: https://github.com/lahiruz [gayan-profile]: https://github.com/Arty26 [anuradha-profile]: https://github.com/sanuradhag