Play framework: how to render static HTML pages with static js and css?

Question

I am trying to figure out a way to render or route to some static web apps hosted in the Play's public folder. My project structure is listed as following:

myapp
  + app
  + conf
  + modules
  + public
      |   + webapp1
      |        + css
      |        + images
      |        + index.html
      |   + webapp2
      |        + css
      |        + images
      |        + index.html
  + ...

I would like to render webapp1 and webapp2. The index.html in each web app would use the css file in the css folder in each web app.

I tried to use routing like this and use redirect in the controller to render the static html page:

Redirect("/webapp1/").withCookies(Cookie("token", "")).bakeCookies()
Redirect("/webapp2/").withCookies(Cookie("token", "")).bakeCookies()
GET  /webapp1/  controllers.Assets.at(path="/public/webapp1", file="index.html")
GET  /webapp1/*file   controllers.Assets.at(path="/public/webapp1", file)
GET  /webapp2/  controllers.Assets.at(path="/public/webapp2", file="index.html")
GET  /webapp2/*file   controllers.Assets.at(path="/public/webapp2", file)

The index.html will be routed and rendered correctly. However, the css and the images in the folders were not loaded correctly. The index.html loads them using relative path. The css and images then somehow is loaded at top level such as localhost/css/css1, instead of localhost/webapp1/css/css1.

Advices would be highly appreciated.

Bill

Ompratap Singh · Accepted Answer · 2018-11-26 10:58:49Z

0

Trying using below routing for load css and javascript.

For load CSS:

/css/*file controllers.Assets.at(path="/public/css", file)

For load Java Script:

/javascript/*file controllers.Assets.at(path="/public/css", file)

answered Nov 26, 2018 at 10:58

Ompratap Singh

6911 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bill Q · Accepted Answer · 2018-11-26 17:16:15Z

0

For whoever facing a similar scenario, the best way to get multiple web apps working from Play is to add a path in the relative path for the static resources.

For example, in webapp1's index.html, instead of loading the css as <link href="/static/css/hash.chunk.css" rel="stylesheet">, load the css as <link href="/webapp1/static/css/hash.chunk.css" rel="stylesheet">.

Then in the Play routes file, you can configure like GET /webapp1/*file controllers.Assets.at(path="/public/webapp1_folder", file).

This would work fine.

answered Nov 26, 2018 at 17:16

Bill Q

578 bronze badges

Collectives™ on Stack Overflow

Play framework: how to render static HTML pages with static js and css?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related