Thymeleaf + Spring-Boot - why can't I access static resources? - css

My project tree looks like this:
I can access the templates now, but can't load static resources such as CSS, images, and JS.
I have a common.html fragment where I declare all my static resources, for instance:
<link rel="stylesheet" th:href="#{/css/app.css}"/>
A header fragment where I include common.html like so:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/common :: commonFragment" lang="en"></head>
// page body
</html>
A default.html file for layout:
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="fragments/common :: commonFragment" lang="en">
<meta charset="utf-8"/>
<meta name="robots" content="noindex, nofollow"/>
<title>Touch</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="content-dataType" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="shortcut icon" th:href="#{/static/images/favicon.ico}" type="image/x-icon" />
</head>
<body>
<div th:id="defaultFragment" th:fragment="defaultFragment" class="container">
<div id="header" th:replace="fragments/header :: headerFragment" />
<div layout:fragment="content" />
</div>
</body>
</html>
Also, on my application.properties file, I have these entries:
#SPRING RESOURCE HANDLING
spring.resources.static-locations=classpath:/resources/
#THYMELEAF
spring.thymeleaf.cache = true
spring.thymeleaf.check-template = true
spring.thymeleaf.check-template-location = true
spring.thymeleaf.content-type=text/html
spring.thymeleaf.enabled=true
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML5
spring.thymeleaf.prefix=classpath:templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.template-resolver-order=1
But I keep getting the same No mapping found message.
32190 [http-nio-8081-exec-2] WARN o.s.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/central/css/app.css] in DispatcherServlet with name 'dispatcherServlet'
What am I not seeing here?

I solved this problem with the following code:
spring.resources.static-locations=classpath:templates/

Use the spring.resources.static-locations in your properties to define the static resources locations (making them directly publicly available):
spring.resources.static-locations=classpath:/your/static/resources/here/like/central/css/
you can provide comma separated values i.e. taken from the documentation:
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/ # Locations of static resources.

I'm using Spring Boot 2.2 and not getting any of my static content. I discovered two solutions that worked for me:
Option #1 - Stop using #EnableWebMvc annotation
This annotation disables some automatic configuration, including the part that automatically serves static content from commonly-used locations like /src/main/resources/static. If you don't really need #EnableWebMvc, then just remove it from your #Configuration class.
Option #2 - Implement WebMvcConfigurer in your #EnableWebMvc annotated class and implementaddResourceHandlers()
Do something like this:
#EnableWebMvc
#Configuration
public class SpringMVCConfiguration implements WebMvcConfigurer {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/js/**").addResourceLocations("classpath:/static/js/");
registry.addResourceHandler("/css/**").addResourceLocations("classpath:/static/css/");
registry.addResourceHandler("/vendor/**").addResourceLocations("classpath:/static/vendor/");
registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
}
}
Just remember that your code is now in charge of managing all static resource paths.

try to add mapping of your static resources in link
<link rel="stylesheet" th:href="#{/css/app.css}"
href="../../../css/app.css" />

Related

Error:createClient is not defined When using supabase cdn

I'm using Supabase CDN's for a project. When I call the createClient() function this error comes up:
createClient is not defined
I tried it with an older version of the CDN, with another browser and using the old method of SupabaseClient.createClient, but I got:
SupabaseClient is not defined
Is the CDN not working correctly or something else?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Nothing to see here...</p>
<!-- Project -->
<script src="https://cdn.jsdelivr.net/npm/#supabase/supabase-js#2"></script>
<script src="main.js"></script>
</body>
</html>
const SupabaseKey = // api here
const SupabaseUrl =// URL here
const options = {
db: {
schema: 'public',
},
auth: {
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: true
}
}
const supabase = createClient(SupabaseUrl, SupabaseKey, options)
I fixed it by adding an import statement in the JS file like this:
import createClient from 'https://cdn.jsdelivr.net/npm/#supabase/supabase-js/+esm'
The +esm at the end of the URL is from universal module and it now works.

How do you select elements in a frame (not iframe) using Cypress? AssertionError

I have seen posts such as
Cypress - run test in iframe for how to handle iframes in Cypress. But I am using the old and outdated frames, which is what a legacy system (that I have to test) uses.
I have checked Github -Cypress iframes which is recommended by Cypress, but haven't found an answer for plain old frames. Using the solution for iframe, hasn't worked.
The problem is the same as with an iframe where, when trying to select an element using
cy.get('input').type('test');
you receive an AssertionError stating:
Timed out retrying after 4000ms: Expected to find element: input, but never found it.
Any advice is appreciated.
I don't have any experience with <frame>, but testing on this source
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta name="robots" content="noindex">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example page</title>
</head>
<frameset cols="150,*">
<frame src="example_a.html">
<frame src="example_b.html">
<noframes>
<body>
<p>Alternate content</p>
</body>
</noframes>
</frameset>
</html>
example_b.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="robots" content="noindex">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example page</title>
</head>
<body>
<input />
</body>
</html>
this test works
cy.visit('http://127.0.0.1:5500/index.html') // served from vscode
cy.get('frame')
.eq(1) // 2nd frame
.then($frame => $frame[0].contentWindow) // it's window
.its('document.body')
.within(() => { // sets cy.root() to 2nd frame body
cy.get('input')
.type('something')
.invoke('val')
.should('eq', 'something')
})
If you've got more complicated stuff to do, you can try visiting the frame's source, for example this makes the frame content the top window
cy.visit('http://127.0.0.1:5500/example_b.html')
cy.get('input')
.type('something')
.invoke('val')
.should('eq', 'something')
You can try something like this:
cy.get('#iframeSelector')
.then(($iframe) => {
const $body = $iframe.contents().find('body')
cy.wrap($body)
.find('input')
.type('test')
});

css doesn't load in this project. but css working smoothly in other projects

Controller Class
#RequestMapping(value = "/")
public String indexmethod(){
return "index";
}
css file location : \src\main\resources\static\index.css
jsp file:
<%# taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="/index.css" rel="stylesheet">
<title></title>
</head>
<body>
<div>
<h2>cascascascascas</h2>
</div>
</body>
</html>
Try this:
<link href="${pageContext.request.contextPath}/index.css" rel="stylesheet">
Found the Solution. A specific #requestmapping(value="...") option in
Controller class block the static file.. I just delete that specific
#reqestmapping and after that i get access to static folder. I am
keeping this question. So that, it can help other to solve same
problem.

how to access variables in thymeleaf templates using spring mvc

How can I access the variables I add to model in Spring MVC inside the thymeleaf templates? I have the following controller code:
#Controller
public class ThymeLeafController {
#GetMapping("/thyme")
public void thymeleaf(ModelAndView modelAndView) {
modelAndView.addObject("var1", "var1");
modelAndView.addObject(Arrays.asList("var2", "var3", "var4"));
modelAndView.getModel().put("var5", "var5");
modelAndView.getModelMap().addAttribute("var6", "var6");
modelAndView.getModelMap().addAttribute(Arrays.asList("var7", "var8", "var9"));
modelAndView.setViewName("thymeleaf");
}
}
How can I access the variables var1, var5, var6, etc. inside thymeleaf templates?
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Thymeleaf</title>
</head>
<body>
<div th:if="#{var1}"></div>
</body>
</html>
Behavior:
Accessing the attributes depends upon where they were added. If the attributes were added to the ModelAndView object, they must be accessed throught "${modelAndView.model.xxxx}" where xxxx is the attribute name. If the attributes were added to Model object, they are accessible using just the attribute name itself "${attributeName}". See example below.
Controller:
#GetMapping("/thyme")
public void thymeleaf(ModelAndView modelAndView, Model model) {
modelAndView.addObject("var1", "var1");
modelAndView.addObject(Arrays.asList("var2", "var3", "var4"));
modelAndView.getModel().put("var5", "var5");
modelAndView.getModelMap().addAttribute("var6", "var6");
modelAndView.getModelMap().addAttribute(Arrays.asList("var7", "var8", "var9"));
model.addAttribute("attribute1", "attributeValue1");
}
Template:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Thymeleaf</title>
</head>
<body>
<div th:text="${attribute1}"></div>
<div th:text="${modelAndView.model}"></div>
<div th:text="${modelAndView.model.var1}"></div>
</body>
</html>
Output:
attributeValue1
{var1=var1, stringList=[var7, var8, var9], var5=var5, var6=var6}
var1

symfony "<?php" tag in every rendered page

I was looking at my symfony code, and in every rendered page I have the "?php" tag before the normal html heading (and I dont know why, of course)
<?php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
My controller is very simple:
<?php
namespace PUC\PanolBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Session\Session;
use Symfony\Component\HttpFoundation\Session\Storage\PhpBridgeSessionStorage;
class HomeController extends Controller
{
public function indexAction()
{
$session = new Session(new PhpBridgeSessionStorage());
$session->start();
$lessons=array('CA01','MA02');
$session->set('user','Drak');
$session->set('lessons',$lessons);
return $this->render('PUCPanolBundle:html:index.html.twig');
}
}
And my index.html.twig starts like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}Titulo{% endblock %}</title>
<link href="{{ asset('css/bootstrap.min.css')}}" rel="stylesheet">
<link href="{{ asset('css/estilos.css')}}" rel="stylesheet">
<link href="{{ asset('css/jquery-ui.css')}}" rel="stylesheet">
{% block css %}{% endblock %}
<script src="{{ asset('js/jquery-1.11.1.js')}}"></script>
<script src="{{ asset('js/jquery-regional-es.js')}}"></script>
<script src="{{ asset('js/jquery-ui.js')}}"></script>
<script src="{{ asset('js/bootstrap.min.js')}}"></script>
Any thoughts?
Thanks!
UPDATE
Clearing cache also throws php tag:
lamp#ubuntu:/var/www/html/symfony$ php app/console cache:clear
Clearing the cache for the dev environment with debug true
<?phplamp#ubuntu:/var/www/html/symfony$
And Im having thoughts about re-installing symfony :P
SOLVED
After re-installing symfony this annoying php tag was still there. Since it was a clear installation, my project files were definitely the problem. At the end, I previously had declare an empty Controller that I haven't used yet, with only a ... (yes, you guessed right) php tag inside of it.
Thanks to all for the help :)

Resources