Just started working with Spring Boot MVC. Been scratching my head trying to organize my folders.
I have my index.html, CSS, and image files in following folders:
/resources/static,
/resources/static/css and
/resources/static/images respectively.
Everything works fine. I have an HTML file in /resources/templates/greeting.html and it is correctly accessed by my controller class. However, I created some subfolders, /resources/templates/management/*.html but my /resource/templates/greeting.html cannot href the folders and I get a 404 error.
If I take the files out of /management and put them in /resources they are accessed fine. Here is my index.html code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>AVI Administrator</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="\css\indexstyles.css" />
</head>
<body>
<div id="pagewrap">
<div class="header">
<img src="\images\avi.png" alt="AVI" style="width:90px;height:50px;" >
<h1> Edge Administrative Dashboard </h1>
</div>
<section id="content">
<center>
<img src="\images\wrench_1024.png" alt="Administration" style="width:200px;height:200px;" >
<h2>Account Management</h2>
</center>
<br>
<a href="\management\addadministrator.html" style="text-decoration: none" >> Add/Edit System Administrator Account<p/></a>
<a href="\management\addclient.html" style="text-decoration: none" >> Add/Edit Tenant Client Account<p/></a>
<a href="\management\addtenant.html" style="text-decoration: none" >> Add/Edit Tenant Account<p/></a>
<a href="\management\addtenantedgedevice.html" style="text-decoration: none" >> Add/Edit Edge Device<p/></a>
<a href="\management\addtenantsubscription.html" style="text-decoration: none" >> Add/Edit Tenant Subscription<p/></a>
</section>
<footer>
</footer>
</div>
</body>
</html>
Anyone have an idea what is going on? I am creating an executable JAR and have read about some of the file limitations of WEB-INF. Does Spring Boot required all HTML files to be in /resources folder?
I don't seem to be violating the spring-boot MVC jar issues. Is there a better way of organizing the folders to keep the files a little better organized? Recommendations are welcome.
Your reference is wrong.
Change it to:
<a href="management/addadministrator.html" style="text-decoration: none" >> Add/Edit System Administrator Account<p/></a>
<a href="management/addclient.html" style="text-decoration: none" >> Add/Edit Tenant Client Account<p/></a>
Ok after a lot of reading I finally found out the problem. The first thing that caused a lot of problems was the use of Spring Boot MVC and creating an executable Jar. When you create a "Spring Boot Starter Project" 2 paths are created,
resources
|
--> static
|
--> templates
By default, when using an executable jar all static content -- css, js, fonts -- is placed in the static folder. If an index.html is used it also is placed in the static file. Again, by default, all other html files are placed in the template folder. By following these default standards it works fine. An issue that really caused me to waste a lot of effort was creating an executable .jar and using the typical MVC file structure webapp --> WEB-INF. An executable jar ignores the webapp file structure. Another little surprise is that .jsp's really don't work well with Spring Boot MVC when an executable .jar is created. Almost all of these problems are eliminated with a WAR deployment. Spring Boot recommends thymeleaf or html for the view pages when using executable .jars.
Any other things I might if missed?
Related
I have successfully implemented static pages in asp.net core in the wwwroot folder.
I can navigate to those pages using the _layout menu.
How do I navigate back from the static page to my asp.net razor home (index) page?
Below is an example.
In your _layout.
<li class="nav-item">
Test
</li>
Test.html:
<body>
<h1>Test</h1>
Back
</body>
Test Result:
Thanks for the response - but no joy.
I have tried the html file at various points in the wwwroot structure. This variant matches the suggestion:
Snip of wwwroot
I always manage to get to the html page on which I have:
Back to site
I have tried all sorts of variants (again) including adding /Pages/, leaving out the 'cshtml' and ../ when in lower directories in wwwroot.
I am using net core 5 and Razor pages.
Any more suggestions?
I am working on ASP.NET core 3.1. I want to do a simple application. I have a very basic problem but I cannot find a good way to solve it.
I have the menu of the application in a Shared view _Layout.cshtml. In this view i am loading .js and .css libs with:
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
Everything is working fine, the menu is correctly displayed, and I can display my Index.cshtml with the #RenderBody().
The problem is that when I want to go to another page using:
<a asp-area="" asp-controller="Home" asp-action="Privacy" aria-expanded="false"><span>Privacy</span></a>
or
<span>Privacy</span>
the page will be loaded trying to fetch the libs from :
<script src="Home/assets/libs/jquery/dist/jquery.min.js"></script>
And it won't find them.
I would like to know what is the best practice to avoid this issue.
Thank you for your help.
In asp .net core static files should be placed inside wwwroot folder. Thats why put static files inside wwwroot folder and give reference to _Layout.cshtml like this,
<script src="~/JavaScript/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="~/CSS/styles.css"/>
I am trying to load a help page in a new popup window as shown in the code below:
<a href="#" onclick="window.open('/abc.htm', null,'width=500px,height=600px,scrollbars=yes,resizable=yes');" >
<img src="/images/icons/xyz.gif" valign="middle" border="0"/>
</a>
My application is a J2EE web application deployed on Tomcat 8. The web pages for the help files are HTML files present in the root directory in the webapps folder in Tomcat. The stylesheets and JavaScripts are stored in sub folders in the root directory.
My issue is that when the help page is loaded none of the styles are applied to it. However if I am loading the help file by double clicking on it then all the styles are applied. Only when it is loaded through Tomcat I am having this issue.
The chrome console is showing the below warning:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/Skins/Default/Stylesheets/Styles.css".
Can somebody please explain what am I doing wrong here?
I had a <!DOCTYPE html> at the top of my page. I removed that and it worked!!
Simple as title says, how do I include a css file that is found two parent folders up from the actual web application itself?
I have tried adding the file as a link to the web project and then referencing it like that and it dose not work
<link rel="stylesheet" href="../../mystyle.css" /> would literally move up two folders on your server. You may be better off with using the full path: <linke rel="stylesheet" href="/folder1/folder2/mystyle.css" /> - which all assumes that the path you need to get to is accessible to the web server.
Since the page comes from the server I would read the physical file and stuff that onto the page as part of the server script such as:
<style>
<?= css_file_content ?>
</style>
If in a parent folder, it may be outside the hosted path making it inaccessible to the client. But it is not inaccessible to the server-side script.
Visit: http://www.w3schools.com/css/css_howto.asp
You can add inline css if external doesn't work
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.