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:
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:
Bundles are new to me but in my _layout.cshtml file I have the following:
#Styles.Render("~/Content/css")
And in the App_Start\BundleConfig.cs file I have the following:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/Portal.css"));
When I view the site on localhost by launching it from Visual Studio, all the styles are inserted, like so:
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/Portal.css" rel="stylesheet"/>
However when I deploy to testing server the portal6.css file is not included in the markup, and in fact was not even copied into my Publish directory. I manually copied that CSS file to the Content folder but it seems like the bundle is not referencing it.
Does any one know what the issue is?
...in fact was not even copied into my Publish directory. I manually copied that CSS file to the Content folder...
Sounds like it's just a case of marking the Build Action of the project file as Content in project file properties - otherwise, it will not be "published" as you have noticed/stated.
To view the portal.css properties:
select the file
then F4 or ALT + ENTER
in Properties tab/window check if Build Action is set to Content (chances are that it's set to None having been "manually copied")
example view of some css file (font-awesome.css) that needs to be "published"
Note: Assumes the file is "included in Project" (not just in file system) - so it should be visible in your Project view in VS (without the "view all files" toggle enabled).
Hth...
Check #1
In Visual Studio, right-click the file, verify BUILD ACTION = CONTENT. CONTENT = Include to deployment package files. This is the most common issue is this is set to NONE.
Check #2
If the above is correctly set, the next thing that can happen is your build is not seeing this property when building the project independently of the solution. This is what has happened to me. For some reason, the build configuration does not update the new property set on a file that's may be added to the project outside of the GUI.
Visual Studio
1) Perform "Clean Solution" or Clean under "Build"
2) Now "Build" or perform "Publish" and the file will now be part of the deployment package folder.
BONUS NOTE: And lastly, also note if your web.config setting debug=false, the bundle will build the default file names "file.css". If debug=true, this instructs bundle to look for "file.min.css" version and will grab the minifying file version. So this can cause unexpected results as well if the CSS file contents are different or contain css classes that don't match the original css file.
I have the following bundle in my BundleConfig:
bundles.Add(new StyleBundle("~/Content/Basic/globalCss").Include("~/Content/Basic/global.css"));
I am using the following to render the CSS bundle:
#Styles.Render("~/Content/Basic/globalCss")
On my local machine (debug environment) the CSS file is included/loaded via its absolute path. I have compilation turned off/false for debug, so this makes sense. When I push to a QA environment (compilation turned on/true), I see the following virtual path being included in the page:
<link href="/Content/globalbasicCss?v=6i8x1Cxf8pXm5g9uxAk8-wcO02DFmeAgYLWpJk-3r_g1" rel="stylesheet">
This was the old virtual path that I had was ~/Content/globalbasicCss.
Why is my bundle not using the new virtual path I provided ~/Content/Basic/globalCss? Is this because there were no changes made to the CSS file included in the bundle, by any chance?
That is the bundling and minification feature. Your CSS bundle is minified and if you had more files they would be bundled in one file.
This happens when you usually build in release mode with the web.config setting
<compilation debug="false">
More information here - http://www.asp.net/mvc/overview/performance/bundling-and-minification
Turns out I needed to make changes to the actual bundled CSS files in order for that bundle virtual path to update. I'm not sure why this is, and would appreciate anyone with better understanding of ASP.NET bundling explaining why this happens this way.
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" />
I have a rails app I put my index.html in public folder and it shows when i go to port 3000 but it doesn't show it with css, I have my css folder and i tried putting it into assets stylesheets but nothing is happing? where do i put my folder with all the css files in it? would i need to change the way my index.html referances my css files?
for now my index.html in public folder references the css files like this <link href="css/styles.css" rel="stylesheet">
i've looked into some tutorials but their a bit complex in understanding
Things put in the public folder won't be processed by the asset pipeline. This isn't the "rails way" at all, but you can just move your .css to your public folder and call it like you're calling it now.
To gain access to the asset pipeline the quickest way I can think of is to just scaffold generate something, fill in the view with your HTML and then you can call via asset pipeline. However by default the root route isn't set so you'll have to navigate to localhost:3000/whatever-controller-you-generated-here
I highly recommend reading this guide before you go much further http://guides.rubyonrails.org/
First of all if you are using rails then why are you using static page like this. If you really want to use this then you have to specify stylesheet like this
<link href="/assets/application.css" rel="stylesheet" />