How to serve assets from the project directory

[venkateshzifo]

We are in the process of migration from Play 2.5 to 2.6->we have followed the given instructions(https://github.com/mmizutani/sbt-play-gulp) with the sample project but it couldn't serve the assets like images, javascript etc(It has not been loaded to browser itself ).

Please help us on this.

[mmizutani]

Which versions of scala and node.js are you using? What are the error message?
Can you build the frontend project alone by cd'ing to the SPA project root and running gulp build?

[venkateshzifo]

We are using Scala : 2.12.4 and Node.js : 8.11.2

We are able to see the home page when we run gulp serve inside the UI folder, but not able to load the home page, when we run sbt run inside project folder.

I guess, Play application not able to serve the assets. Please find the below screenshot.

[mmizutani]

What kind of error messages are shown in the Command Prompt?
Is your frontend project served from <frontend-project-root>/dist directory?

[venkateshzifo]

No error in the command prompt.

[mmizutani]

Do the compiled frontend files exist under /<Play project root>/ui/dist directory? Otherwise those html and other frontend assets won't be served.

[venkateshzifo]

Yes. In production mode home page gets loaded. Only the images are not loading properly. In Dev mode home page itself not getting loaded.

Please find below error in prod mode.

[mmizutani]

http://fountain.io has been down for a while, so those images linked to files hosted on the web site will not be shown.

[venkateshzifo]

ok. Then what will be problem in dev mode ? The page itself not loading.

[mmizutani]

The issues are three fold:

1. gulp.devDirs setting key
   In development mode, sbt-play-gulp assumes the front-end assets are placed in either ui/.tmp/serve, ui/src or ui directory. If they are served from different directories, you need to configure the sbt setting key controlling the directory paths by placing the following line in <your Play project root>/config/application.conf:

# Directory from which Yeoman template (generator-fountain-react) serves frontend assets in the watch task
# See /ui/conf/gulp.conf.js and /ui/conf/browsersync.conf.js
gulp.devDirs=["ui/.tmp", "ui/src"]

2. Gulp watch command
   sbt-play-gulp executes gulp watch command when sbt run is invoked. So you need to remap gulp command names in <your Play project root>/ui/conf/gulp.conf.js as follows:

Before

...
gulp.task('serve', gulp.series('webpack:watch', 'watch', 'browsersync'));
...
gulp.task('watch', watch);

After

...
gulp.task('watch', gulp.series('webpack:watch', 'browsersync:watch', 'browsersync'));
...
gulp.task('browsersync:watch', watch);

3. Content Security Policy settings
   The default Content Security Policy settings in conf/application.conf are strict and rightly so. However, the sample play-gulp-react project needs inlining scripts and styles, which requires less strict CSP settings. So override the contentSecurityPolicy value in <your Play project root>/config/application.conf:

play.filters {
  headers {
    # This lax policy is for demo purpose only.
    contentSecurityPolicy = "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' http://fountainjs.io; style-src 'self' 'unsafe-inline'"
  }
}