/scala-play-angular-seed

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

Primary LanguageTypeScriptMIT 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  # 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/                     # Generated stuff
│     ├── /universal/            # Application packaging
│     └── /web/                  # Compiled web assets
├── /test/                       # Contains unit tests for java 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                 # Associated frontend build scripts with sbt

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