CSS and Images not loading in Spring Boot's index.html - html

My files are organized like this:
index.html renders perfectly when accessed via Intellij's lunch url (localhost:63342/../static/index.html)
But when I run my Spring Boot app and access http://localhost:8080/, my index.html fails to load the CSS files and images.
I have not touched any other configuration. All my controllers are #RestControllers. I do have mustache installed as a dependency but am not using it anywhere.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/body.css"/>
<link rel="stylesheet" type="text/css" href="css/header.css"/>
<link rel="stylesheet" type="text/css" href="css/section_one.css"/>
<link rel="stylesheet" type="text/css" href="css/section_two.css"/>
</head>
<body class="body-inner-wrap">
<header>
<div id="header-wrapper">
<div id="title" class="main_title">
<h1>Project</h1>
</div>
<div id="links">
<ul>
<li>
<b>Join</b>
</li>
<li>
<b>How-To</b>
</li>
<li>
<b>About</b>
</li>
</ul>
</div>
</div>
</header>
<div id="content-wrapper">
<div id="intro-box">
<h2>A simple and fast platform to upload audio files and reach out to your listeners via
our no non-nonsense mobile apps.</h2>
<h5>This is work in progress and will be live soon as a closed beta.</h5>
</div>
<div id="login-box">
<div class="login-form">
<form method="post" action="">
<p><input type="text" name="Username" value="" required placeholder="Username"></p>
<p><input type="password" name="password" value="" required placeholder="Password"></p>
<p><input type="submit" name="Login" value="Login"></p>
</form>
</div>
</div>
</div>
<br><br>
<div id="device-mock-bg">
<div class="device-mock">
<img src="images/android-device-mock.svg"
alt="Android app mock up"
height="700"
width="300" />
</div>
</div>
</body>
</html>
Also, checking the browser's console I found these -
The resource from “http://localhost:8080/css/style.css” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff)
Cookie “JSESSIONID” will be soon treated as cross-site cookie against “http://localhost:8080/css/style.css” because the scheme does not match.
Any help, please?

The problem was that Spring Security was blocking all resources. Had to configure it to allow /css/* and /images/*

Next to the comment by #krtkush, I had migrated my application from MVC to a SPA using VueJS. I had a custom MvcConfig (extending WebMvcConfigurer) class configured which resulted in problems loading only my CSS files, Javascript was loading just fine. I had some overrides for: addResourceHandlers, addInterceptors and added a message source for internationalisation.
After having deleted this class, as I didn't need it anymore, I found that this resolved my CSS loading issue. This unfortunately took me longer than I had hoped for. Hope this helps others that are in a similar process.

Related

Having Issue on Ubuntu Server Not able to find images folder with HTML (Issue do not happen on Windows)

I can get it to work on windows but I can not get it work on Ubuntu server. The file is in the images folder and inside that is the png file. The html is in the templates folder and inside the template folder is the images folder with the png file. I have the same setup on windows and it works.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class= "container">
<form action="/search" class="search-bar" method="GET">
<label for="query">Search:</label><br>
<input type="text" name="query" placeholder="Enter Serial Number"><br>
<button type="submit"><img src="images/search.png"></button>
</form>
</div>
</body>
</html>
I try move the files and even copy the whole dir the issue persist. It suppose to show an image but it don't. Even my style.css not being found.

jquery 3.5.1 mobile css formating not showing in live server preview with vs code

I'm trying to use the jquery css stylesheet, but I can't seem to get it to format anything at all. I'm using the live preview extension in VSCode, and the css is from the jquery website.
<!DOCTYPE html>
<html>
<head>
<title>Physics Simulator App</title>
<link rel="stylesheet" href="css\jquery.mobile-1.4.5.min.css">
<script src="scripts\jquery-3.5.1.min.js"> </script>
<script src="scripts\jquery.mobile-1.4.5.min.js"> </script>
<script type='text/javascript' src='scripts\Week 2 homework.js'> </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div data-role="page">
<div data-role="navbar">
<ul>
<li> Information </li>
<li> Interface </li>
</ul>
</div>
<div data-role="header">Binary Operators Demo</div>
<div data-role="content">
<label for="input">A</label>
<input type="checkbox" name="inputA" id="inputA">
<br />
<label for="input">B</label>
<input type="checkbox" name="inputB" id="inputB">
<br />
<button onclick="AND();">AND</button>
<button onclick="OR();">OR</button>
<button onclick="NOT();">NOT</button>
<button onclick="XOR();">XOR</button>
</div>
<table id="data">
<tr>
<td>Result: </td>
<td id="resultA"></td>
</tr>
</table>
<div data-role="footer">
<small>binary operations demo app</small>
</div>
</div>
</body>
</html>
I don't think I'm missing anything in terms of brackets, and the file paths work for my own css files. I've tried adding 'data-theme="a"' to my page bracket, but nada. I just get this.
result
Is it a version issue or?
Friend, I may have misunderstood you for not mastering English very well. But as I understand it, your problem is with jquery.mobile.css?
Try using the CDN. I copied your code and replaced the with the CDN (I didn't find this Week 2 homework.js).
Replace the with the CDN and do this test:
Insert this code block:
<div class = "ui-grid-d">
<div class = "ui-block-a">
button <br>
<span> any info </span>
</div>
</div>
It uses the style of jquery.mobile.css, if it works the problem could be in your import of the files.
Two tips, avoid spaces in the file names, (Week 2, it could be Week_2_homework), and in the <label for = ""> do not point "input", point the name you gave to the input or the id.
If I was wrong about your problem, answer that I try to help you.
Reggards

Tool which validates front-end structure of rendered pages

In my project, we are following microfrontend architecture where HTML pages are being constructed by amalgamation of multiple web-components. This results combination multiple HTML files into a single HTML file. By doing so, we have the risk of having a broken HTML code which is not syntactically valid.
To combine multiple dynamically generated HTML pages at runtime we are using nginx reverse proxy.
I want to a tool which can aid identifying such scenarios and provide suitable assistance to mitigate the same.
Let me know if there's any pretty tool or something
For Example:
This is my main page:
<!DOCTYPE html>
<div th:fragment="add-app(page_title, content_as_html, alert_html, menuitemid)">
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>my title</title>
<link rel="shortcut icon" th:href="#{/favicon.ico}" />
<!--#include virtual="/commons/inc/resources" --> <!-- It s separate component named as resource.html which is included here via nginx dynamically-->
</head>
<body>
<div class="overlay"></div>
<th:block th:replace="${alert_html}" />
<div class="my-custom-class position-relative">
<a
class="account-page-button d-flex align-items-center"
th:href="#{/}"
th:classappend="${menuitemid == 'App'? 'account-page-button--current' : '' }"
>
Apps
</a>
</div>
<!--# include virtual="/commons/inc/footer" -->
<!-- It s separate component named as footer.html which is included here via nginx dynamically-->
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script th:src="#{/apps/js/my-account.js}"></script>
</html>
</div>
The Resource.html page:
<link rel="icon" type="image/ico" href="/icons/favicon.ico" />
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css?family=Muli:400,700,900&display=swap" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="#{/lib/bootstrap/js/bootstrap.min.js}"></script>
The footer.html page:
<footer class="main-footer">
<link rel="stylesheet" th:href="#{/css/footer.css}" />
<div class="main-footer__row">
<div class="main-footer__link-container">
<a class="main-footer__link" href="#"> © 2020 myproject® </a>
</div>
<div class="main-footer__link-container">
<a class="main-footer__link" th:href="#{/terms/website}"> Website Terms of Use </a>
</div>
<div class="main-footer__link-container">
<a class="main-footer__link" th:href="#{/legal/privacy}"> Privacy Policy </a>
</div>
<div class="main-footer__link-container">
<a class="main-footer__link" href="#"> All prices exclude VAT </a>
</div>
</div>
</footer>
Please note down <!--#include virtual="/commons/inc/resources" --> and <!--# include virtual="/commons/inc/footer" --> tags. There are to include resources.html and footer.html pages, These tags gets resolved by nginx and nginx will replace these tags with the content of resources.html and footer.html respectively.
I want such a tool which can validate the final outcome i.e., the html page which nginx generates after resolving all <!--#include virtual....--> tags.
users.skynet.be/mgueury/mozilla/ extension for Chrome and Firefox works great to report the syntactical as well as semantic problems in the markup. It is also possible to ask HTML Validator to propose a corrected version of the page in HTML or convert it to XHTML.
Apart from above sonar with plugin https://www.sonarsource.com/html/ can also be used to have html validation during the build process.

Setup Spring and Spring-Security to use HTML file

In a web application, we don't want to use JSP files, we want to use only HTML files. Each view is a template.
I'm looking for a way to setup spring, spring security to use directly login.html file and if the user authentificates correctly the generic layout (top level, left level, right level and center level and south level) will be displayed.
What you are looking for is a natural templating solution where the templates are built directly in HTML and CSS with just some special atributes in the tags, but without the need for a set of XML tag libraries.
One solution that allows this is the Thymeleaf templating technology - Comparison of a Thymeleaf template with a JSP in a Spring application
this is how a template looks like:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Spring MVC view layer: Thymeleaf vs. JSP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all"
href="../../css/thvsjsp.css" th:href="#{/css/thvsjsp.css}"/>
</head>
<body>
<h2>This is a Thymeleaf template</h2>
<form action="#" th:object="${subscription}" th:action="#{/subscribeth}">
<fieldset>
<div>
<label for="email" th:text="#{subscription.email}">Email: </label>
<input type="text" th:field="*{email}" />
</div>
<div>
<label th:text="#{subscription.type}">Type: </label>
<ul>
<li th:each="type : ${allTypes}">
<input type="radio" th:field="*{subscriptionType}" th:value="${type}" />
<label th:for="${#ids.prev('subscriptionType')}"
th:text="#{'subscriptionType.'+${type}}">First type</label>
</li>
<li th:remove="all"><input type="radio" /> <label>Second Type</label></li>
</ul>
</div>
<div class="submit">
<button type="submit" name="save" th:text="#{subscription.submit}">Subscribe me!</button>
</div>
</fieldset>
</form>
</body>
</html>

Jquery mobile link to local file

I have following code in index.html:
<a data-ajax="false" rel="external" href="../Info/BasicDefinition.pdf"
data-theme="c" data-iconpos="top" data-icon="arrow-d" data-role="button">Structure</a>
But i get 404 error - file not found after click on structure link. What i must change? I want to open .pdf file from browser.
My file structure (MPSR - root folder of my web site)
-MPSR
-----index.html
-Info
-----BasicDefinition.pdf
Linking without Ajax
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.
Source: http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html
So, you can remove the rel="external" from your tag and it should work.
I can't post this on jsFiddle, as it wouldn't work, but I've tested here and it worked fine:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>
<a data-ajax="false" href="../info/test.txt" data-iconpos="top" data-icon="arrow-d" data-role="button">Link</a>
</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Folder structure:
\test
\info
\test.txt
\root
\index.html