How can Play framework be used to display static HTML pages with static JavaScript and CSS files?

I'm currently exploring options for rendering or routing to static web apps stored in the Play's public folder. Here is my project structure:

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

The goal is to render both webapp1 and webapp2, with each index.html file referencing the corresponding css file present in its own css folder.

I attempted to use routing and redirect in the controller to serve the static html pages like this:

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)

While the index.html files are being rendered correctly through routing, the css and images within these folders are not getting loaded properly. The relative paths used by the index.html end up calling them from the root level of localhost instead of under webapp1 or webapp2 e.g., localhost/css/css1 instead of localhost/webapp1/css/css1.

I would greatly appreciate any advice or suggestions on how to solve this issue.

Sincerely, Bill

Answer №1

Consider the following routing options for loading CSS and JavaScript:

To load CSS:

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

To load JavaScript:

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

Answer №2

If you find yourself in a similar situation, the most effective way to run multiple web applications through Play is by adjusting the path for static resources.

For instance, instead of referencing the CSS in webapp1's index.html as

<link href="/static/css/hash.chunk.css" rel="stylesheet">
, reference it as
<link href="/webapp1/static/css/hash.chunk.css" rel="stylesheet">
.

In your Play routes file, configure it like this:

GET /webapp1/*file controllers.Assets.at(path="/public/webapp1_folder", file)
.

This method should work smoothly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover the secret to incorporating concealed text in WordPress with a hidden div through the power of JavaScript

For a while now, I've been trying to implement a functionality where clicking on a text reveals a dropdown menu with more information, similar to a "read more" feature. I have limited experience in Java or jQuery, and I can't figure out if the i ...

Is there a way for me to create a sidebar that is scrollable, like the one on www.youtube

Hey there! I'm looking to incorporate a feature on my website that resembles the layout of https://www.youtube.com/. More precisely, I want to have a sidebar on the left side displaying playlists, subscriptions, and other options. However, I don' ...

Creating a dropdown menu with a blur effect using CSS

I attempted to match the opacity and blur effect of my dropdown menu with that of my navbar. While the opacity adjustment worked correctly, the blur effect did not apply as expected. I've heard that I need to utilize a pseudo-class to achieve this, b ...

How can I display the output from Geocoder in a text box using the ArcGIS JavaScript API?

I am trying to customize the Geocoder text box in the ArcGIS JavaScript API by overriding the default search result. Although I have written some code for this purpose, I am not satisfied with the results. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

Sharing details of html elements using ng-click (AngularJS)

I am currently exploring options to enable users to click on a "open in new tab" link, which would essentially transfer that HTML element into a fresh window for their convenience. I am seeking advice on how to achieve this. At the moment, I am able to la ...

Using jQuery UI to trigger Highlight/Error animations

Apologies if this question seems obvious, but I can't seem to find a clear answer anywhere... Is there a way to add a highlight/error message similar to the ones on the bottom right of this page: http://jqueryui.com/themeroller/ by simply using a jQu ...

The text alignment in Internet Explorer is off

After testing this website on both Firefox and Chrome, the alignment in the "Releases" section appears to be correct: However, when viewed in Internet Explorer, some of the text seems to be aligned in the center for unknown reasons. I have been struggling ...

Is it possible to operate a mobile site automatically alongside a desktop site?

I'm currently working on a website that looks fantastic on desktop, but doesn't quite function properly when viewed on mobile devices. I'm curious if there is a method or system I could implement to automatically load the mobile version of t ...

Using CSS to style multiple IDs within a class group

Can someone help me get this css code functioning properly? #inventoryGarbageSpot .id1,.id2,id3,id4{ padding:0px; padding-top: 0px; width:35px;} When I use a single id instead of multiple ids, it works fine. Appreciate your assistance, Rotem ...

Display the source code of an HTML element when clicked

Is there a way to show the source code of an element on a webpage in a text box when that specific element is clicked? I am wondering if it is feasible to retrieve the source code of an element upon clicking (utilizing the onClick property), and subseque ...

query in PHP to display specific data

Seeking guidance for developing a document tracking system using PHP. Struggling with defining the correct title for my project and unable to generate relevant keywords for search queries. The main issue pertains to determining how the system can validat ...

Using JSON data to populate the jQuery UI Datepicker

Is it possible to populate this jQuery UI datepicker calendar with data from a JSON file containing all non-working days for the years 2017 and 2018? P.S. return [!(month == 8 && day == 27), 'highlight', highlight]; - This example demons ...

Is it better to have JavaScript and HTML in separate files or combined into a single HTML file?

Do you notice any difference when coding in both HTML and JavaScript within a single .html file compared to separating HTML code in a .html file and JavaScript code in a .js file? Does the functionality remain the same in both scenarios? For example, in t ...

Can curly braces be utilized in the style section of Vue.js?

Can I utilize curly braces in the style section of vue.js to set a value? For instance .container { background: url({{ image-url }}; color: {{ color-1 }} } ...

Steps for creating a rubber compound with reduced elements

Sample Image Looking for a way to reduce the size of elements on a webpage without adapting them? I want the elements to shrink and align in a single column, and I will handle the adaptation myself. HTML: <!-- Trading --> <div class="main-co ...

What causes my code to break completely when I import something?

My chrome extension has a simple function that retrieves a user's selected text using the Chrome Tabs API. I am looking to integrate a Hugging Face API in the future, but I am facing an issue. Whenever I try to import the necessary model, the Chrome T ...

What is the process for generating a HORIZONTAL navigation bar in a CGI Perl script?

Currently, I have a CGI page called Login.cgi. It features a form where I must input the correct password to be redirected to another page named Main.cgi. On this new page, my goal is to incorporate a HORIZONTAL menu containing options like UsersList, Logs ...

Expanding CSS styles on hover

When my mouse pointer moves out of the red color box, it still triggers the hover function. However, I only want the hover effect to work within the red color box and hide the menu when it's outside the box. This is the source code from JSfiddle: htt ...

retrieving data in tabular form from a website

Looking to extract a table from this website by clicking on the "National Data" option. While I could easily download it, my interest lies in learning web scraping techniques. Previously, I utilized Python's Selenium package to automate the process of ...

What is the best way to share an HTML element across multiple pages in Next.js?

I am in the process of developing a website that features a table of contents with links on the left side, content sections in the middle, and an overview on the right. For a visual representation of the general concept, please visit: Currently, all code ...