search

vmunier / play-scalajs.g8

Giter8 template to get started with Play and Scala.js.
Apache License 2.0
431 stars 114 forks source link

Using Static (and Versioned) Assets in the Client #50

Closed michaelahlers closed 4 years ago

michaelahlers commented 7 years ago

Is it possible to include static assets (namely images), served from Play and referenced from Scala.js code? Tricky because—when, for example, using sbt-digest to fingerprint assets—the final asset name isn't known. Soliciting ideas or guidance here since reverse Assets routes and AssetsFinder can't be used and little on this topic turned up in my searches. (Reposted from ochrons/scalajs-spa-tutorial#65 to gather a larger audience.)

vmunier commented 7 years ago

Hi, I've created a separate project https://github.com/vmunier/play-with-scalajs-example-javascript-router to show how you could use JavaScript Router that supports Versioned Assets. Here's the diff of the commit: https://github.com/vmunier/play-with-scalajs-example-javascript-router/commit/54494bdeea50cde209c81305f405f8bdf0d156d6 Let me know if that helps.

michaelahlers commented 7 years ago

@vmunier, that's extremely helpful! I'd hoped the JS router could be brought to bear here. One point worth noting: once Play 2.6 drops, it's SecurityHeadersFilter (configured to defeat inline script tags by default) will require a hash of the contents or a nonce provided in the response headers. I'll circle back with an example soon. On a related topic, I've commented on my original posting usage of a sbt-simple-url-update to reference versioned assets in stylesheets. It's not specific to Scala.js and I'm surprised Play doesn't document a more direct way. Any thoughts?

vmunier commented 7 years ago

Indeed, there is nothing Scala.js specific. The JavaScript router provided by the Play Framework should support fingerprinted assets. The issue that guided me to the workaround presented above is: https://github.com/playframework/playframework/issues/3435. I suppose that most people do not use the JavaScript router but resolve fingerprinted assets on the server side using Twirl (routes.Assets.versioned).