Spring MVC CSS, fonts, images wont show in index.html page - java

I'm new to spring framework and I was able to run my index.html from my localhost but all resources won't show. Below is my folder structure
- src/main
- webapp
- resources
- css (All css files)
- fonts (All font files)
- images (All image files)
- js (All js files)
- static
- index.html (my index.html)
- WEB-INF
My index.html page:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>My First Application</title>
<meta name="description" content="overview & stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="/resources/css/bootstrap.min.css" />
<link rel="stylesheet" href="/resources/font-awesome/4.5.0/css/font-awesome.min.css" />
.........
In the "href" I tried changing the directory path multiple times, the page is loading but just a bunch of texts (No css, image, etc)
Do I also need to update my servlet-context.xml or web.xml?
EDIT:
I checked servlet-context.xml and the mapping already exists for resoucres:
<mvc:resources mapping="/static/**" location="/static/" />
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
<resources mapping="/resources/**" location="/resources/" />
I even added:
<resources mapping="/resources/css" location="/resources/css" />
<resources mapping="/resources/fonts" location="/resources/fonts" />
<resources mapping="/resources/images" location="/resources/images" />
but still won't work.
EDIT 2:
When I go to chrome - inspect - console. This is the log:
springmvc:13 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/font-awesome/4.5.0/css/font-awesome.min.css
springmvc:21 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/ace.min.css
springmvc:18 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/fonts.googleapis.com.css
springmvc:26 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/ace-skins.min.css
springmvc:27 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/ace-rtl.min.css
springmvc:36 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/ace-extra.min.js
springmvc:2149 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery-2.1.4.min.js
springmvc:2159 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/bootstrap.min.js
springmvc:2166 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery-ui.custom.min.js
springmvc:2167 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery.ui.touch-punch.min.js
springmvc:2168 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery.easypiechart.min.js
springmvc:2169 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery.sparkline.index.min.js
springmvc:2170 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery.flot.min.js
springmvc:2171 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery.flot.pie.min.js
springmvc:2172 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery.flot.resize.min.js
springmvc:12 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/bootstrap.min.css
springmvc:18 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/fonts.googleapis.com.css
springmvc:13 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/font-awesome/4.5.0/css/font-awesome.min.css
springmvc:21 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/ace.min.css
springmvc:26 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/ace-skins.min.css
springmvc:27 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/ace-rtl.min.css
springmvc:36 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/ace-extra.min.js
springmvc:2149 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery-2.1.4.min.js
springmvc:2159 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/bootstrap.min.js
springmvc:2166 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery-ui.custom.min.js
springmvc:2167 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery.ui.touch-punch.min.js
springmvc:2180 Uncaught ReferenceError: jQuery is not defined
at springmvc:2180
Basically, all the lines in my html that has the:
<link rel="stylesheet" href=
Throws an error.
I tried to change the "href" to:
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/ace-skins.min.css" />
But still the same, css, images, etc won't load.

You need to register Resource Handler in spring to serve static content you can do it by XML way as
or
<mvc:resources mapping="/resources/**" location="/resources/" />
Java config
#Configuration
#EnableWebMvc
public class MvcConfig extends WebMvcConfigurerAdapter {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry
.addResourceHandler("/resources/**")
.addResourceLocations("/resources/");
}
}
you can also add multiple resource location as
.addResourceLocations("/resources/","classpath:/other-resources/");
use commat to delimit the string and you can provide as many resource location as you want!
Enjoy coding!

Try using relative links like below. Also use Thymeleaf's th:href
<link rel="s`tylesheet" type="text/css" media="all"
href="../../../resources/css/styles.css"`
th:href="#{/resources/css/styles.css}" />
See your deployed directory structure and ensure required files are present in said folders (resources)
Remember to change the relative path ../../ to correct level.
If files not being copied to /resources folder then trying putting them in /main/src/webapp/resources

Related

Jira spring application plugin not accessing angular assets folder

I am new to Jira and I have created one application and her I have used atlassian-scanner and also I have included angular project everything is working but when any rest request is getting called from main.js it is not working, not sure what is happening is it not considering assets folder or what please help.
Here is my below code for xml web-resource:
<?xml version="1.0" encoding="UTF-8"?>
<bundles>
<web-resource key="client-resources" name="Client Resources">
<resource name="assets/" type="download" location="client/assets/" />
<resource name="main.js" type="download" location="client/main.js" />
<context>com.ngdemo.client-resources</context>
</web-resource>
</bundles>
and my index.html code as below:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/jira/plugins/servlet/demo/" />
<meta name="decorator" content="atl.general" />
<meta charset="UTF-8">
<title>Angular Demo</title>
$webResourceManager.requireResourcesForContext("com.ngdemo.client-resources")
</head>
<body>
<app-root></app-root>
</body>
</html>
the url which is wrong it is as below:
http://localhost:2990/jira/plugins/servlet/demo/assets/i18n/en.json
but instead I think it should be as below like main.js:
http://localhost:2990/jira/s/d41d8cd98f00b204e9800998ecf8427e-CDN/-ufur03/713000/b6b48b2829824b869586ac216d119363/1.0.0-SNAPSHOT/_/download/resources/com.demo.ngdemo:client-resources/main.js
http://localhost:2990/jira/s/d41d8cd98f00b204e9800998ecf8427e-CDN/-ufur03/713000/b6b48b2829824b869586ac216d119363/1.0.0-SNAPSHOT/_/download/resources/com.demo.ngdemo:client-resources/assets/i18n/en.json

Can't link css to jsp (Spring mvc)

I am struggling with spring mvc file structure.
I am able to display an image ressource in a jsp but not to link a css to it, even if they are at the same location !
Here is my file structure :
/src
/main
/resources
/webapps
/resources
main.css
logo.png
/views
somePage.jsp
/WEB-INF
web.xml
dispatcher-servlet.xml
....
Here is what I have in my dispatcher :
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix">
<value>/views/</value>
</property>
<property name="suffix">
<value>.jsp</value>
</property>
</bean>
<mvc:resources mapping="/resources/**" location="/resources/" />
And in my somePage.jsp :
<img src="<c:url value="/resources/logo.png" />" alt="blabla" />
<link href="<c:url value="/resources/main.css" />" rel="stylesheet" />
...
The image load correctly but not the css...
Note : I have the following message in eclipse : : "invalid location of tag (link). " about the css link...
If you have any idea, thank you by advance !
Finally it seems to be a cache issue.
I just delete my chrome cache and my css appeared.
When I compiled the first time, my css was empty and I filled it later.
It seems that even after editing it and re-running the project the css state ,wasn't refreshed.
chrome probably kept my css state as empty and didn't detect the update .. weird.
You add some code. like this.
Your servelet-context.xml
<mvc:default-servlet-handler />
Your jsp
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set>
<link href="${contextPath}/resources/main.css" rel="stylesheet" />

resource in spring mvc

I know that there are other topics about adding resources(CSS, Javascript) in Spring MVC, but in my case that doesn't work. I have this error when adding: HTTP Status 404 The requested resource is not available.
mvc:resources mapping="/resources/**" location="/, classpath:/META-INF/web-resources/"
My application works properly until this point.
In my index.jsp I've got:
link type="text/css" rel="stylesheet" href="c:url value="/resources/css/test.css"
script type="text/javascript" src="c:url value="/resources/js/carousel.js"
I had a similar problem and I think I solved it by adding a default mapping in web.xml
<servlet-mapping>
<servlet-name>dispatherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
Problem solved.
In DispatcherServlet I added :
<mvc:default-servlet-handler />
<mvc:annotation-driven />
At this point 'HTTP Status 404 The requested resource is not available.' has disappeared, but my resources were not available at all. So i found another way to solve the problem, configuring the base tag like
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath %>">
<title>index</title>
<link href="resources/css/test.css" rel="stylesheet" type="text/css" />
</head>
...
And now it works properly.

Why isn't my GWT web application running properly?

I'm going through the book: GWT in Action. On chapter I'm working through the very first hello world application. It's all in development mode.
My issue is that the label in my .java file is not showing up when I open the URL webpage. There is nothing being displayed versus the Label("Hello World!") appearing.
EDIT: When at the displayed webpage, I pressed F12 in google chrome to see if I could find anything weird. Got the error: Failed to load resource: the server responded with a status of 404 (Not Found)
HelloWorld.gwt.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.6.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.6.0/distro-source/core/src/gwt-module.dtd">
<module>
<inherits name="com.google.gwt.user.User" />
<source path="client" />
<entry-point class="com.example.gwt.client.HelloWorld"></entry-point>
</module>
HelloWorld.java
package com.example.gwt.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
public class HelloWorld implements EntryPoint {
#Override
public void onModuleLoad() {
RootPanel.get().add(new Label("Hello World!"));
}
}
HelloWorld.html
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HelloWorld</title>
<script type="text/javascript" language="javascript" src=".nocache.js"></script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html>
My console is displaying this after I run it as a web application:
[WARN] Server class 'org.eclipse.jetty.servlet.listener.ELContextCleaner' could not be found in the web app, but was found on the system classpath
[WARN] Adding classpath entry 'file:/C:/Users/Qs/Desktop/eclipse/plugins/com.google.gwt.eclipse.sdkbundle_2.6.0/gwt-2.6.0/gwt-dev.jar' to the web app classpath for this session
For additional info see: file:/C:/Users/Qs/Desktop/eclipse/plugins/com.google.gwt.eclipse.sdkbundle_2.6.0/gwt-2.6.0/doc/helpInfo/webAppClassPath.html
If you don't specify the rename-to in your gwt.xml as shown below then by default GWT places the generated nocache.js under war directory by the name of location of gwt.xml followed by its name as shown in below snapshot.
<module rename-to="xyz">
For more info have a look at gwt-module dtd.
Please have a look Defining a module and Renaming modules
There are two ways to solve this issue:
define rename-to in gwt.xml that is more preferable over second solution
gwt.xml
<module rename-to="hello">
html
<script type="text/javascript" language="javascript" src="hello/hello.nocache.js"></script>
use default way
html
<script type="text/javascript" language="javascript" src="com.example.gwt.HelloWorld/com.example.gwt.HelloWorld.nocache.js"></script>
Here is a snapshot to make it more clear
Change the src attribute of the script tag in HelloWorld.html to
src="com.example.gwt.client.HelloWorld/com.example.gwt.client.HelloWorld.nocache.js"
If that still doesn't work, run the GWT compiler and look at the files it generates to determine the exact name of the *.nocache.js file.

Linking to a CSS file in JSF?

Within <h:head/> tags I have:
<h:outputStylesheet name="css/common.css" />
This is output as:
<link type="text/css" rel="stylesheet" href="RES_NOT_FOUND" />
The stylesheet is within a folder named css under the webapp folder of my maven war. When I browse to http://localhost:8080/mywar/css/common.css I see the stylesheet.
Any ideas what I'm missing? Thanks in advance.
I followed the directory structure and layout from tip 4 here: http://www.ibm.com/developerworks/java/library/j-jsf2fu1/index.html
Essentially moved the css folder to be under one called resources and then referenced it as:
<h:outputStylesheet library="css" name="common.css" />
Now it seems to work!

Categories

Resources