Myfaces/Omnifaces resource handlers weird behaviour - jsf-2.2

We are using omnifaces (latest snapshot) resource handlers to combine and unmap resource handlers
<resource-handler>org.omnifaces.resourcehandler.CombinedResourceHandler</resource-handler>
<resource-handler>org.omnifaces.resourcehandler.CDNResourceHandler</resource-handler>
<resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler>
(Also using Unmapped but it does not apply to this page)
From time to time, when projectStage is production we have broken css includes.
This is normal production html (formatted and indented):
<link rel="stylesheet" type="text/css" href="/javax.faces.resource/eNptjMEKgzAQRL8ou63Si3-TriMKiQm724PgxxcKGtDehnnzpuqSMUWBhXcpbq6xDj4jg8RsryceWryQJnITJZXPOKWoCDKunLFBg8Lg3NGDf4nysv4bn3_BkCDOT-rpdasP_QtAUUrT.css?ln=omnifaces.combined&v=1431853580000" />
<script type="text/javascript" src="/javax.faces.resource/eNp9UMsSwiAM_KKS8XXx6kd4Rpq2VCDIQ6czfrzQaunU0VM2u5uwxDqpseEC_bG_RXQDTIX1_ml_aJVVsZXGrzwFZoG0kRM_o0z3HgRpTSY3F6Lgg-MWdmzH9pDEmWJajh6hKNaN4g4rUZuiVx4VigCbNHn4oj_TJRPIWmF6VwZyS5xdXdBqK7i5cw8LPEZs_UMG0aGDAlcf_7N54eooXHGAqbxPceYynLijmFIn6gXsJJuf.js?ln=omnifaces.combined&v=1443076786000"></script>
<link rel="stylesheet" type="text/css" href="/javax.faces.resource/font-awesome/4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/javax.faces.resource/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/javax.faces.resource/css/estilos.css?version=1443076733865" />
<link rel="stylesheet" type="text/css" href="/javax.faces.resource/css/styles.css?version=1443076733865" />
<link rel="stylesheet" type="text/css" href="/javax.faces.resource/css/icons/icons.css" />
And this is broken code:
<link rel="stylesheet" type="text/css" href="/javax.faces.resource/eNptjMEKgzAQRL8ou63Si3-TriMKiQm724PgxxcKGtDehnnzpuqSMUWBhXcpbq6xDj4jg8RsryceWryQJnITJZXPOKWoCDKunLFBg8Lg3NGDf4nysv4bn3_BkCDOT-rpdasP_QtAUUrT.css?ln=omnifaces.combined&v=1431700834000" />
<script type="text/javascript" src="/javax.faces.resource/eNp9j9EOwiAMRb8IGp2--DcInWMCRQomS_x4mYuOzOhTb--5bdOYrMdeaeTTeCuYJliKHPkRfzARXbnYwJvMKmcwMmjynsLcnIky56QidLKTB6jwY0lvXxntqJjeqYRCm7BywehQZ9jVyeOX_Z5ej4M1Dutdmym1ek4N2bu9VuGuGBq9eeTPgiY1UL7iBEup7AlS-4D0.js?ln=omnifaces.combined&v=1442328192000"></script>
<link rel="stylesheet" type="text/css" href="/javax.faces.resource/font-awesome/4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/javax.faces.resource/javax.faces.resource/bootstrap/3.3.4/css/bootstrap.m" />
<link rel="stylesheet" type="text/css" href="/javax.faces.resource/css/estilos.css?version=1443087413884" />
<link rel="stylesheet" type="text/css" href="/javax.faces.resource/css/styles.css?version=1443087413884" />
<link rel="stylesheet" type="text/css" href="/javax.faces.resource/css/icons/icons.css" />
Note that boostrap css is broken, javax.faces.resource is 2 times and the file name is not complete.
We don't have an idea if this is myfaces (2.2.8) or omnifaces (latest snapshot). It does not happen in development mode and it only happens in production from time to time (maybe 2%). It must be something related with dates but we don't know.
This is the relevant info from web.xml
<context-param>
<param-name>org.omnifaces.CDN_RESOURCE_HANDLER_URLS</param-name>
<param-value>
cloudflare-cdn:bootstrap-select/1.3.5/bootstrap-select.min.css=https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.3.5/bootstrap-select.min.css,
cloudflare-cdn:bootstrap-select/1.3.5/bootstrap-select.min.js=https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.3.5/bootstrap-select.min.js,
</param-value>
</context-param>
<context-param>
<param-name>org.omnifaces.CDN_RESOURCE_HANDLER_DISABLED</param-name>
<param-value>#{facesContext.application.projectStage == 'Development'}</param-value>
</context-param>
<context-param>
<param-name>org.omnifaces.COMBINED_RESOURCE_HANDLER_DISABLED</param-name>
<param-value>#{facesContext.application.projectStage == 'Development'}</param-value>
</context-param>
<context-param>
<param-name>org.omnifaces.COMBINED_RESOURCE_HANDLER_EXCLUDED_RESOURCES</param-name>
<param-value>
bootstrap/3.3.4/css/bootstrap.min.css,
dashboard/dashboard.css,
css/estilos.css,css/styles.css,
font-awesome/4.3.0/css/font-awesome.min.css,
css/icons/icons.css,fancybox/3b1/jquery.fancybox.js,fancybox/3b1/jquery.fancybox-thumbs.js
</param-value>
</context-param>
<context-param>
<param-name>org.omnifaces.COMBINED_RESOURCE_HANDLER_CACHE_TTL</param-name>
<param-value>3600000</param-value>
</context-param>

Related

Codeigniter 4 File not found

I have this problem where I had my site running. I used let's encrypt to install SSL certification. After this operation I changed my baseurl in both env and App.php files.
However my CSS files wont load (except one). I get 404 error for all except one file. https://subdomain.domain.com/plugins/jqvmap/jqvmap.min.css
I checked my paths I am sure the files are where they have to be.
Here some settings:
App.php:
public $baseURL = 'https://subdimain.domain.com/';
env:
app.baseURL = 'https://subdoian.domain.com/'
Here where I refer to my css files:
<script src="<?= base_url('plugins/jquery/jquery.min.js') ?>"></script>
<!-- jQuery UI 1.11.4 -->
<script src="<?= base_url('plugins/jquery-ui/jquery-ui.min.js') ?>"></script>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="<?= base_url('plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css') ?>">
<!-- iCheck -->
<link rel="stylesheet" href="<?= base_url('plugins/icheck-bootstrap/icheck-bootstrap.min.css') ?>">
<link rel="stylesheet" href="<?= base_url('plugins/bootstrap/css/bootstrap.min.css') ?>">
<!-- JQVMap -->
<link rel="stylesheet" href="<?= base_url('plugins/jqvmap/jqvmap.min.css') ?>">
<!-- Theme style -->
<link rel="stylesheet" href="<?= base_url('dist/css/adminlte.min.css') ?>">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="<?= base_url('plugins/overlayScrollbars/css/OverlayScrollbars.min.css') ?>">
<!-- Daterange picker -->
<link rel="stylesheet" href="<?= base_url('plugins/daterangepicker/daterangepicker.css') ?>">
<!-- summernote -->
<link rel="stylesheet" href="<?= base_url('plugins/summernote/summernote-bs4.min.css') ?>">
Here how they look like on page source:
<!-- jQuery -->
<script src="https://subdomain.domain.com/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://subdomain.domain.com/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/bootstrap/css/bootstrap.min.css">
<!-- JQVMap -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/jqvmap/jqvmap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="https://subdomain.domain.com/dist/css/adminlte.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/daterangepicker/daterangepicker.css">
<!-- summernote -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/summernote/summernote-bs4.min.css">
I am pretty sure all files are available. I even copy the after the domain part and directly ls the file on my server and it returns the file name.
Why only one of my css files can be loaded?
Resetting and restarting the nginx solved the problem.

My css files don't run in my single blog page

I use laravel 8, I'm creating a blog. The problem is when i click one of my posts for seeing the single blog page, the page don't come due to problem to see all the css.
'''
<!-- Bootstrap Css -->
<link rel="stylesheet" href="{{url('css/bootstrap.min.css')}}">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="{{url('css/font-awesome.min.css')}}">
<!-- Slick Nav CSS -->
<link rel="stylesheet" href="{{url('css/slicknav.min.css')}}">
<!-- Cube Portfolio CSS -->
<link rel="stylesheet" href="{{url('css/cubeportfolio.min.css')}}">
<!-- Magnific Popup CSS -->
<link rel="stylesheet" href="{{url('css/magnific-popup.min.css')}}">
<!-- Fancy Box CSS -->
<link rel="stylesheet" href="{{url('css/jquery.fancybox.min.css')}}">
<!-- Nice Select CSS -->
<link rel="stylesheet" href="{{url('css/niceselect.css')}}">
<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="{{url('css/owl.theme.default.css')}}">
<link rel="stylesheet" href="{{url('css/owl.carousel.min.css')}}">
<!-- Slick Slider CSS -->
<link rel="stylesheet" href="{{url('css/slickslider.min.css')}}">
<!-- Animate CSS -->
<link rel="stylesheet" href="{{url('css/animate.min.css')}}">
<!-- Radix StyleShet CSS -->
<link rel="stylesheet" href="{{url('css/reset.css')}}">
<link rel="stylesheet" href="{{url('style.css')}}">
<link rel="stylesheet" href="{{url('css/responsive.css')}}">
<!-- Radix Color CSS -->
<link rel="stylesheet" href="{{url('css/color/color1.css')}}">
<link rel="stylesheet" href="#" id="colors">
'''
[What my single blog page looks like ][1]
if i don't use the stylesheets 'reset.css' it looks like :
single blog page without stylesheet reset.css
You can use asset helper instead of url
<link rel="stylesheet" href="{{asset('css/reset.css')}}">

my server is loading plain HTML only, no css or js files

Im hosting a laravel app on a CentOS VPS and I use git, after pushing some modifications and checking the site suddenly the site stoped loading local files like css and js (404 not found) but yet loading external files from CDNS like bootstrap and jquery...
Please advice
snippet of code from the head of master page
<link rel="apple-touch-icon" sizes="57x57" href="{{asset('assets/favicons/apple-icon-57x57.png')}}">
<link rel="apple-touch-icon" sizes="60x60" href="{{asset('assets/favicons/apple-icon-60x60.png')}}">
<link rel="apple-touch-icon" sizes="72x72" href="{{asset('assets/favicons/apple-icon-72x72.png')}}">
<link rel="apple-touch-icon" sizes="76x76" href="{{asset('assets/favicons/apple-icon-76x76.png')}}">
<link rel="apple-touch-icon" sizes="114x114" href="{{asset('assets/favicons/apple-icon-114x114.png')}}">
<link rel="apple-touch-icon" sizes="120x120" href="{{asset('assets/favicons/apple-icon-120x120.png')}}">
<link rel="apple-touch-icon" sizes="144x144" href="{{asset('assets/favicons/apple-icon-144x144.png')}}">
<link rel="apple-touch-icon" sizes="152x152" href="{{asset('assets/favicons/apple-icon-152x152.png')}}">
<link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/favicons/apple-icon-180x180.png')}}">
<link rel="icon" type="image/png" sizes="192x192" href="{{asset('assets/favicons/android-icon-192x192.png')}}">
<link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/favicons/favicon-32x32.png')}}">
<link rel="icon" type="image/png" sizes="96x96" href="{{asset('assets/favicons/favicon-96x96.png')}}">
<link rel="icon" type="image/png" sizes="16x16" href="{{asset('assets/favicons/favicon-16x16.png')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/shutter-modal.css')}}">
<link rel="manifest" href="{{asset('assets/favicons/manifest.json')}}">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{{asset('assets/favicons/ms-icon-144x144.png')}}">
<meta name="theme-color" content="#ffffff">
<meta name="_token" content="{{csrf_token()}}">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
{{-- <link rel="stylesheet" type="text/css" href='{{asset("assets/css/all.css")}}'> --}}
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/themify-icons.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/font-awesome-4.7.0/css/font-awesome.min.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/magnific-popup.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/owl.carousel.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/owl.theme.default.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/animate.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/bootstrap.min.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/style-MF.css")}}'>
and as I said this was ok and I didnt touch it in any way !
If you are using root to update your code, change owner of your files to website user. You can use chown command to change owner and -R argument for applying recursively.
chown -R groupname:username *
Note: In most of time, groupname and username are same!

IntelliJ Spring Boot project can't find my CSS files with Thymeleaf

I'm new to Spring Boot and my problem is that I have Spring Boot project and I am intending to view my HTML pages with Thymeleaf but Spring can't resolve my JavaScript and CSS files.
Full picture of my IDE:
Those are my Thymeleaf configurations
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=true
This is my HTML page head:
<!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>
<title>404 Page</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<meta name="viewport" content="width=device-width"/>
<!-- Css Files Start -->
<link href="/src/main/resources/static/css/style.css" rel="stylesheet" type="text/css" media="screen"/><!-- All css -->
<link href="/src/main/resources/static/css/bs.css" rel="stylesheet" type="text/css" media="screen"/><!-- Bootstrap Css -->
<link rel="stylesheet" type="text/css" href="/src/main/resources/static/css/main-slider.css" media="screen"/><!-- Main Slider Css -->
<!--[if lte IE 10]>
<link rel="stylesheet" type="text/css" href="/static/css/customIE.css" media="screen"/><![endif]-->
<link href="/src/main/resources/static/css/font-awesome.css" rel="stylesheet" type="text/css" media="screen"/><!-- Font Awesome Css -->
<link href="/src/main/resources/static/css/font-awesome-ie7.css" rel="stylesheet" type="text/css" media="screen"/><!-- Font Awesome iE7 Css -->
<noscript>
<link rel="stylesheet" type="text/css" href="/static/css/noJS.css"/>
</noscript>
<!-- Css Files End -->
</head>
You should use relative path to your JavaScript and CSS files:
<link href="../../static/css/style.css" rel="stylesheet" type="text/css" media="screen"/>
or you can use th:href Thymeleaf's tag as well:
<link th:href="#{css/style.css}" href="../../static/css/style.css"
rel="stylesheet" type="text/css" media="screen"/>
I have found that Spring automatically searches for: /resources/.
So what I did was removed all the pre-directories by using find all.
So, in my case what used to be for example: /static/css/style.css & /templates/index.html
became: /css/style.css & /index.html
Now the question remains how does Spring boot know what folder to look in without you defining it: Spring looks at the extension. When spring boot sees .html, it looks for it in a folder called /templates.

Page style display correctly in IE, Chrome, Opera but doesn't in Firefox

Page style display correctly in IE, Chrome, Opera but does not in Firefox. I don't know how to fix it, please help me.
This is my css files:
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css? family=Aclonica:regular">
<link rel="stylesheet" href="/css/bootstrapBase.css">
<link rel="stylesheet" href="/css/bootstrap-responsive.css">
<link rel="stylesheet" href="/css/stilearn.css">
<link rel="stylesheet" href="/css/stilearn-responsive.css">
<link rel="stylesheet" href="/css/stilearn-helper.css">
<link rel="stylesheet" href="/css/stilearn-icon.css">
<link rel="stylesheet" href="/css/font-awesome.css">
<link rel="stylesheet" href="/css/animate.css">
<link rel="stylesheet" href="/css/uniform.default.css">
<link rel="stylesheet" href="/css/uniform.default.css">
<link rel="stylesheet" href="/css/datepicker.css">
<link rel="stylesheet" href="/css/responsive-tables.css">

Resources