playframework / play-scala-angular-seed Goto Github PK

View Code? Open in Web Editor NEW

83.0 18.0 40.0 2.13 MB

:four_leaf_clover: Scala Play 2.7.x + Angular 8 with Angular CLI seed project with full-fledged build process

Home Page: http://bit.ly/2AStvhK

License: MIT License

Scala 22.01% HTML 3.39% Shell 31.89% Batchfile 3.69% TypeScript 33.04% JavaScript 5.64% CSS 0.33%

play-framework angular scala sbt seed-project

play-scala-angular-seed's Introduction

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.

Used Summary

How to use it?

Prerequisites

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

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

_{Yohan Gomez}	_{Lahiru Jayamanna}	_{Gayan Attygalla}	_{Anuradha Gunasekara}

License

This software is licensed under the MIT license

play-scala-angular-seed's People

Stargazers

Watchers

Forkers

arty26 azatprog lgadawski jibostore augustinas deviantcode zdoonio goseign jmacht16 schonbachler sjl421 thulebona hariramesh9a aravindakr95 jabyte teotoplak gandalfu fgfernandez0321 cesarcadavidceiba hossameldeen janzwiegers tkirahvi adibro500 periklas blackxman marcopinheiro bjoernhaeuser debd440 aileenzeng hanishi dk8996 deabreu bjk95 codefink2020 munkel scala-steward isabella232 saravana0707 capesepias

play-scala-angular-seed's Issues

Regarding other framework

Hi,

First of all thanks for wonderful project set up. I love it. It really help to get started.

I wanted to use http4s instead of play so I changed app folder to use http4s code. I have also change the build.sbt file to get http4s instead of play.

But now everything seems to be broken for IDE. Project is very much working from command prompt. But Intellij is not picking it up as scala project. This is giving issue while writing code.

I am totally new to Scala thingy so don't know much about environment set up. Filling a issue here just to ask question that it was working with Play but not working working http4s. Do I need to do anything else to set things up?

As it is not related to this project, you can close this issue if you like. It would be great if you can point me to right direction to ask this kind of questions

Use of Redirect HTTPS Filter

Hi,

I'd like to force the use of HTTPS by redirecting all HTTP requests to HTTPS automatically with PlayFramework RedirectHttpsFilter

Unfortunately when adding this filter, all request fail with error ERR_TOO_MANY_REDIRECTS

Can you give me a way to do this ?

deploy to heroku and/or create docker image

Hi,

Since this application consist of 2 parts [backend/localhost:9000] and [frontend/localhost:4200] any idea how to deploy to heroku?

I tried deploying through git push, it is detected as play scala app, but npm is not recognized
I then try deploying using sbt-heroku plugin, but I get H10 error when I try to hit the app with my browser (HTTP: 503)

I am thinking to dockerize the app and push it through docker, but I am not sure how as there is now 2 endpoint..

Thanks for your input! Anyway, it is a great starting point app! I am new to angular and js here but your sample get me started real fast!

[Question] How to run backend tests only?

Use-case: TDD on the backend, using sbt ~test. The frontend tests add too much noise.

A workaround: I know I can do it by commenting this line test := ((test in Test) dependsOn ui-test).value. But is there a command for it without changing the source code?

A generalization: How to run any command (e.g., run) for the backend only?

Thanks in advance! :-) (and in all cases, if there's no solution for that at the moment :) )

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Windows 10 ng server stucks

Hi,
I am trying to run the seed UI in Intellij but the UI is not running. So I tried to run ng serve in the UI folder.
The nodejs server starts and the RAM memory that it is occupied grows constantly but the server doesn't run in the end. I have waited for some time with no luck for it.
Do you know why ng serve would take so much time and why it wouldn't work?
I have latest version of nodejs (v8.9.1) and npm(5.5.1).
Thank you!

Play 2.8 should be Scala 2.13?

Isn't Play 2.8 supposed to compile/run against 2.13.x? In build.sbt it is 2.12.8. I can't get it to compile when changing it to 2.13.1.

Compile error, method afterStarted overrides nothing

Hi
I downloaded the scala-play-angular-seed then run the "sbt clean" command in the root directory for the project and get the compile error. I have SBT 1.2.8 installed on Ubuntu 18.04.

[error] Note: the super classes of object UIBuildHook contain the following, non final members named afterStarted:
[error] def afterStarted(): Unit
[error] override def afterStarted(addr: InetSocketAddress): Unit = {
[error] ^
[error] one error found
[error] (Compile / compileIncremental) Compilation failed
Project loading failed: (r)etry, (q)uit, (l)ast, or (i)gnore?

ADD EXAMPLE FOR POST REQUEST

You could add an example for POST request as I was having hard time adding a POST request to my app. It was mainly due to CSRF filter in the play app. I could make a POST request only after adding the following entry to the application.conf file.
disabled += play.filters.csrf.CSRFFilter
I think it's a bad way to remove such security features that are built-in to the app. So it would be better if you add an example POST request from the Angular app in the right way.

A thanks, not an issue

Happiness is opening a template project and finding a commit 16 hours ago "Update to latest version".

Haven't tried it yet, but seems like an awesome project! (Y)

Sorry about the noise, read somewhere that it's good to thank maintainers :-)

No action needed, can be closed.

How to run on frontend mode i.e. without NodeJs

@yohangz Thanks for the really cool seed project! I have read your article, great work! I still can't find a way to run it without NodeJs or how you mentioned it:

To summarize [frontend/localhost:4200] is only used for development purposes to run the application on watch mode with sbt run command. On run mode frontend can access all [backend/localhost:9000] services via a reverse proxy within Angular CLI.

I have tried doing the following but I get an error:

bravegag@Zeus:~/code/scala-play-angular-seed$ sbt "project frontend" run
[info] Loading global plugins from /home/bravegag/.sbt/1.0/plugins
[info] Loading settings for project scala-play-angular-seed-build from plugins.sbt ...
[info] Loading project definition from /home/bravegag/code/scala-play-angular-seed/project
[info] Loading settings for project root from ui-build.sbt,build.sbt ...
[info] Set current project to scala-play-angular-seed (in build file:/home/bravegag/code/scala-play-angular-seed/)
[error] Not a valid project ID: frontend (similar: root)
[error] project frontend
[error]                 ^

How to run it without NodeJs only using the Play backend 0.0.0.0:9000?

It would be great if you could help with this one too:
https://stackoverflow.com/questions/56505853/scala-play-how-to-integrate-and-trigger-angular-7-components-from-view