I am trying to link my static elements in with Spring MVC using the resources tag - what I am not able to figure out is where to place them.
I am publishing my links as -
<link rel="stylesheet" href="/css/elements.css">
I have placed the files under -
WebContent/resources/css/elements.css
The resources tag I am using in my servlet is -
<mvc:resources location="/css/**" mapping="/resources/css/"/>
Am i missing something?
You inverted the two attributes. locations is where the files are in the web app root. mapping is the url-pattern used to access the resources from the browser. So the configuration should be
<mvc:resources location="/resources/css/" mapping="/css/**"/>
As explained in the documentation.
You have your resources in "resources" folder, so you added following line in dispatcher xml.
<mvc:resources location="/css/**" mapping="/resources/css/"/>
And this resources folder must have been in "webcontent" folder.
Then you need to access the resources by using context path.
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/elements.css">
Give this a try. It should work.
Found the mistake .. using c:url to publish the absolute path helped :)
I am now publishing my URLs as
<link rel="stylesheet" href="<c:url value="/css/slideshow.css" />">
If you are using locations relative to root context of Tomcat, then you need to do it like this. The difference between this and the other answers is that I am including the application context in the location mapping:
<mvc:resources location="/webapp-name/resources/" mapping="/resources/**"/>
The attribute "mapping" is relative to classpath whereas "location" is relative to root of Tomcat. (NOTE: these are not 'relative' urls)
This config will provide access to resources in sub-folders, such as /resources/css/*
Related
I am shifting my development environment from windows to mac, and when I run the code after the complete setup, my website doesn't loads and doesn't shows any style and js doesn't work.
I have this path of the file, everything was working on my windows very fine but when I run it from the mac then the file path is not loading, how do I fix this? I am trying to search whole web, couldn't find this answer and ended up here :(
<link href="/_content/FileUploading.SearchEngine.Shared/content/styles/bootstrap.min.css" rel="stylesheet">
<link href="/_content/FileUploading.SearchEngine.Shared/content/styles/style.css" rel="stylesheet">
<link href="/_content/FileUploading.SearchEngine.Shared/content/styles/dashboard.css" rel="stylesheet">
<link href="/_content/FileUploading.SearchEngine.Shared/content/scripts/script.js" rel="stylesheet">
This become the url of the path of the file = https://localhost:5002/_content/FileUploading.SearchEngine.Shared/content/styles/dashboard.css
This doesn't loads.
I have this path of the file, everything was working on my windows
very fine but when I run it from the mac then the file path is not
loading, how do I fix this?
It would be nicer if you could share your configuration details regarding how you are calling the path and where is your actual resources are located. The issue you are having might be causing due to numerous reasons.
As you may know, a BlazorWebView control has a configured host file (HostPage), typically wwwroot/index.html. The HostPage path is relative to the project. All static web assets (scripts, CSS files, images, and other files) that are referenced from a BlazorWebView are relative to its configured HostPage.
Thus, web root of the HostPage determines which subset of static assets are available. Therefore, its recommended placing the HostPage at the root of the wwwroot folder of the app, which provides the greatest flexibility for supplying static assets from the app, RCLs, and via subfolders of the app and RCLs.
How to Resolve:
Static File Middleware configuration :
Let's consider, your resouce files are outside of your wwwroot folder; Therefore, In non-IIS hosting and reverse proxy hosting scenarios, additional Static File Middleware configuration might be required to serve static files correctly. For you scenario if your static are placed outside, please check if you are using as following:
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(builder.Environment.ContentRootPath, "StaticFilesFolderName")),
RequestPath = "/StaticFilesFolderName"
});
Then you should refer that files as following on your _Layout.cshtml file:
<link rel="stylesheet" href="~/StaticFilesFolderName/site.css" asp-append-version="true" />
Note: Please have a look this official document.
Program.cs File:
builder.WebHost.UseStaticWebAssets();
Note: If you have static file configuration you should have UseStaticWebAssets in your program.cs file just below the builder.
Check App based path:
As explained earlier, this might happening due to your resource path while moving to MAC. In this scenario its recommended to use relative based path reference on top of your base href in _Layout.cshtml after that you can place rest of your resource file. So if your resource are inside wwwroot place your base href top of your other path reference and access it by hostname/your_resource_path.
<base href="~/" />
and following should also work:
<base href="~/YourApp/" />
Note: The trailing slash is required in some scenrio if you would get any css loading issue.
Static files in non-Development environments:
Be aware of non development environment as well because Blazor apps run locally, static web assets are only enabled by default in the Development environment therefore, to enable static files for environments other than Development during local development and testing we have to call UseStaticWebAssets on the WebApplicationBuilder.
Output:
Well i have a working spring-boot app that is running on a local computer just fine. However I noticed that when i do mvn package then none of my css or java scripts, locates in
/src/main/wepapp/css
are being copied into the jar file (package) created in the target directory.
spring boot reference guide says
65.3 Convert an existing application to Spring Boot "Static resources can be moved to /public (or /static or /resources or
/META-INF/resources) in the classpath root."
24.1.4 Static Content "Do not use the src/main/webapp folder if your application will be packaged as a jar. Although this folder is a
common standard, it will only work with war packaging and it will be
silently ignored by most build tools if you generate a jar."
So that means that i can put all my js and css folders into the folder
/src/main/resources/static
i.e. now my structure looks like that
/src/main/resources/static/css/
/src/main/resources/static/js/
all of my thymeleaf templates however are still located in
/src/main/resources/templates/
I did that, and as far as i understand know i need to add the ResourceHandler to my ResourceHandlerRegistry. Previously when all of my ccs were in "/src/main/wepapp/css/" my ResourceHandlers looked like that and it worked very well for me.
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/pdfs/**").addResourceLocations("/pdfs/").setCachePeriod(0);
registry.addResourceHandler("/img/**").addResourceLocations("/img/").setCachePeriod(0);
registry.addResourceHandler("/js/**").addResourceLocations("/js/").setCachePeriod(0);
registry.addResourceHandler("/css/**").addResourceLocations("/css/").setCachePeriod(0);
}
I have tried adding multiple handlers like
registry.addResourceHandler("/css/**").addResourceLocations("/css/").setCachePeriod(0);
or
registry.addResourceHandler("/css/**").addResourceLocations("/static/css/").setCachePeriod(0);
or
registry.addResourceHandler("/css/**").addResourceLocations("/").setCachePeriod(0);
etc.
but none of them worked for me.
The html templates are displayed but the web browser console is reporing 404 when trying to locate /css/corresponing.css or /js/corresponing.js
I have deliberately disabled Spring security in my test project, in order to simplify debugging of this problem.
One more thing thing that i do not completely understand is the deployment assembly. I have read an article that said that when i do want to have particular folders into my target package jar file generated by maven, i do need to include those folder into my deployment assembly, well i did however "mvn package" is still not copping all of the content(inlcuding subfolders) of my /src/main/static folder into the target jar file. I see however the "templates" folder copied into the jar file. So there is some other magic happening behind the scene.
Here is how do i declare the css in my thymeleaf layout i.e.
/src/main/resources/templates/layout.html
<!DOCTYPE html>
<html>
<head>
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Task List</title>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/syncServer.css}" href="../css/syncServer.css" />
...
</head>
<body>
...
</body>
</html>
My question is: Is the configuration i done so far correct and if so what other options/settings i need to be aware of in order to make the app find the css files locates in /src/main/static/css/
Addition one
test project
git#github.com:TheDictator/sArchitecture.git
If you move you the whole static directory into the resources and totally remove the addResourceHandlers configuration, then everything works fine.
That means that resources structure would look like the following image:
I started a new web project in Spring MVC 4(Spring Boot) and my question is where I must put my css files? I'm using thymeleaf template engine and my folder structure as in picture
as can u see, I trying create a CSS folder under the resources folder, but the link <link rel="stylesheet" href="/resources/css/main.css" /> from index.html is not working. any ideas?
Per the howto docs:
Spring Boot by default will serve static content from a folder called /static (or /public or or /resources or /META-INF/resources) in the classpath or from the root of the ServeltContext.
There's also a sample or two, e.g. this one.
Make sure you are packaging your project as a war in your pom.xml.
The /src/main/resources folder is usually deployed to WEB-INF/classes, so it won't be accessible directly from the context.
However, The /src/main/webapp is normally deployed to / (root of your web app), which is accessible from the context.
You should put your web resources under /src/main/webapp (e.g. /src/main/webapp/css). These are then automatically deployed under the context root of your web application. They are then accessible from e.g. /css.
<link rel="stylesheet" th:href="#{/css/main.css}" />
I'd also move your templates to /src/main/webapp/WEB-INF/templates.
If you read the SpringBoot documentation you will see that Spring Boot will automatically add static web resources located within any of the following directories:
/META-INF/resources/
/resources/
/static/
/public/
You have created folder named "css" and you put your file "main.css" inside this folder.
So you should use relative path when referencing this file inside your HTML
<link rel="stylesheet" href="/css/main.css" />
am developing a java web application using netbeans ide(jdk 1.6, tomcat 7, mysql, spring 3.0.2, hibernate).I have a multiactioncontroller named 'maincon'. In web.xml, the home page is set as redirect.jsp. the redirect.jsp will redirect the request to index page with the help of multiaction controller. now how can I use css files in this index.jsp
I have a 'indexpageStyle.css' file in the WEB-INF/resources/styles/. if more information is required to answer this, please ask.
Thanks in advance
Browsers do not have direct access to resources under WEB-INF; if you really need it there (which would be weird) you'll need to stream it back yourself.
Otherwise, move it out of there, include it as a regular CSS resource, but generate the file's path using or the Spring equivalent.
you can use like this inside jsp
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/source/css/reset.css">
Maybe the solution of my problem is contained in the question, but basically
I'm new to ExtJs 4 MVC and am having some difficulty where to place my JSPs.
I'm using Spring MVC using the Request Mapping annotation.
I'm having relative path problems with ExtJs App.JS finding my controller.
I usually put my JSPs under WEB-INF/views and my ExtJs 4 App is in WebContent/app.
I am trying to set up the example as shown on:
http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture
and in the example the index.html is contained in the app package.
So I have a view called WEB-INF/views/sample-view.jsp and this includes the app.js script, which works fine.
My app has a controller like the example, and this is the problem, because it seems to try to find that internally in ExtJs using the appFolder, and controllers.
This resource can't be found, because my view is in another package all together. Does this make sense ?
Should I just move my view out of WEB-INF ? And if so will Spring MVC complain?
Thanks,
Lisa
For the first attempt at getting this running it is easiest to use all static files just to keep things simple. Once the app is running from static html and js files, migration can then be made to use the spring mvc and jsp pages.
To start be sure there is a folder named resources under the webapp folder, assuming webapp is the parent of your existing WEB-INF folder.
The basic starting folder structure for using a static html page will be:
webapp
- resources
-- app
-- css
--- ext-all.css
-- sass
-- themes
- WEB-INF
-- spring
-- classes
-- views
index.html
app.js
ext-all-debug.js
In WEB-INF there is likely a spring folder with an mvc-config.xml file or similar. In that config file the resources folder needs to be designated for serving static content by using the resources tag. Likely, the first mvc:annotation-driven tag is alrleady in the config file as in this snipped below. Add the resources tag noted below into the config file.
<!-- Configures support for #Controllers -->
<mvc:annotation-driven />
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
<resources mapping="/resources/**" location="/resources/" />
With this in place the resources folder can serve the index.html file much like setup of the Sencha example.
All of this is setting you up to be able to build the first example from a url like:
http://localhost:8080/resources/index.html
When downloaded and extracted, the Ext JS zip, contains a resources folder. Copy the subfolders of that folder into the webapp/resources folder. Also copy ext-all.debug.js to the webapp/resources folder.
Then create index.html in webapp/resources with this content similar to the Sencha tutorial:
<html>
<head>
<title>Static Account Manager</title>
<link rel="stylesheet" type="text/css" href="./css/ext-all.css">
<script type="text/javascript" src="./ext-all-debug.js"></script>
<script type="text/javascript" src="./app.js"></script>
</head>
<body></body>
</html>
Create app.js in the webapp/resources folder as the following snippet and enough is in place to be up and running with the single panel configured in app.js. From this point the tutorial is easy enough to port over to this setup.
Ext.application({
name: 'AM',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
After that static html file is running correctly, a jsp can be used from the view folder and will have content like this:
<html>
<head>
<title>JSP Account Manager</title>
<link rel="stylesheet" type="text/css" href="./resoures/css/ext-all.css">
<script type="text/javascript" src="./resoures/ext-all-debug.js"></script>
<script type="text/javascript" src="./resoures/app.js"></script>
</head>
<body></body>
</html>
a bit off topic, but if you are going to use Spring MVC might as well use Grails - you will save yourself a lot of typing and figuring out bunches of config files.