/scala-play-angular-seed

Scala Play 2.6.x + Angular 5 with Angular CLI seed project with full-fledged build process

Primary LanguageShellMIT LicenseMIT

MIT License

scala-play-angular-seed

scala-play-angular-seed project illustrates how Play Framework can be used to develop backend/services along with Angular to develop the front-end/ui.

Read more @ http://bit.ly/2AStvhK

Used Versions

How to use it?

Let's get started,

  • Clone the application and open application as a sbt project.

  • This application is not using any of the scala play views and all the views are served by the Angular code base which is inside the ui folder.

  • Used any of the sbt commands listed in the below according to the requirement which are working fine with this application.(To see more details of sbt)

    sbt clean           # Clear existing build files
    
    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
    
    sbt test            # Run both backend and frontend unit tests

Complete Directory Layout

├── /app/                           # The backend (scala) application sources (controllers, models, views, assets)
├── /conf/                          # Configurations files and other non-compiled resources (on classpath)
│     ├── application.conf          # Builds the project from source to output(lib and bower) folder
│     ├── logback.xml               # Logging configuration
│     └── routes                    # Routes definition
├── /logs/                          # Logs folder
│     └── application.log           # Default log file
├── /project/                       # Sbt configuration files
│     ├── FrontendCommands.scala    # Frontend build commands
│     ├── FrontendRunHook.scala     # Frontend build play run hook
│     ├── build.properties          # Marker for sbt project
│     └── plugins.sbt               # Sbt plugins declaration
├── /public/                        # Public assets
│     └── /ui/                      # Frontend build assests
├── /target/                        # Generated stuff
│     ├── /universal/               # Application packaging
│     └── /web/                     # Compiled web assets
├── /test/                          # Contains unit tests for scala play sources
├── /ui/                            # Angular front end sources
│     ├── /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
│     ├── .angular-cli.json         # Builds the project from source to output(lib and bower) folder
│     ├── .editorconfig             # Define and maintain consistent coding styles between different editors and IDEs
│     ├── .gitignore                # Contains ui files to be ignored when pushing to git
│     ├── karma.conf.js             # Karma configuration file
│     ├── package.json              # Holds various metadata configuration relevant to the ui
│     ├── protractor.conf.js        # Protractor configuration file
│     ├── proxy.conf.json           # UI proxy 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 build script
├── LICENSE                         # Contains License Agreement file
├── README.md                       # Contains all user guide details for the application
└── ui-build.sbt                    # UI build scripts

What is new in here?

FrontendCommands.scala

  • Represents available frontend build commands.
    ├── /project/
    │     ├── FrontendCommands.scala

FrontendRunHook.scala

  • Represents PlayRunHook scala implementation to trigger angular serve with sbt run command.
    ├── /project/
    │     ├── FrontendRunHook.scala

ui-build.sbt

  • ui-build.sbt file to represent UI builds scrips implementations to run along with the available sbt commands.
  • This file is located in the root level of the project to work smoothly with the build.sbt file.

npm run commands

  • Added several new npm run commands in the scripts section of the package.json file in order to work smoothly with the sbt commands.
  • Check UI README.md to see the available front end build tasks.
├── /ui/
│     ├── package.json

proxy.conf.json

  • Contains proxy configurations required to run application in watch mode along with both Scala and Angular builds.
├── /ui/
│     ├── proxy.conf.json

Routes

├── /conf/      
│     ├── routes
  • The following route configuration allows to map front end index.html to index route. This should be placed as the first route in this file.
GET        /             controllers.Assets.at(path="/public/ui", file="index.html")

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

Contributors


Yohan Gomez
Lahiru Jayamanna
Gayan Attygalla
Anuradha Gunasekara

License

This software is licensed under the MIT license