Menu
I am new to spring frame work and spring boot.I am trying to add the static html file with CSS,javascript,js. the file structure is
and my html file head looks like this
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>HeavyIndustry by HTML5Templates.com</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" type="text/css" media="all" href="css/5grid/core.css" th:href="@{css/5grid/core}" /> <link rel="stylesheet" type="text/css" href="css/5grid/core-desktop.css" /> <link rel="stylesheet" type="text/css" href="css/5grid/core-1200px.css" /> <link rel="stylesheet" type="text/css" href="css/5grid/core-noscript.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/style-desktop.css" /> <script src="css/5grid/jquery.js" type="text/javascript"></script> <script src="css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none" type="text/javascript"></script> <!--[if IE 9]><link rel="stylesheet" href="css/style-ie9.css" /><![endif]--> </head> when i run the spring project only the content is shown and the CSS is not applied.then the browser show the following error in the console 404 Not Found error for the .css,.js files
some body help me to sort out this issue.Thanks in Advance.
255
A site may not load the CSS file due to browser caching. It's the most common cause and is the easiest to fix because you only need to remove the cache from your browser. Yet, there are times when an invalid line of code or conflict with other themes and plugins can also make the CSS file unreadable.
You need to put your css in /resources/static/css. This change fixed the problem for me. Here is my current directory structure.
src main java controller WebAppMain.java resources views index.html static css index.css bootstrap.min.css Here is my template resolver:
public class WebAppMain { public static void main(String[] args) { SpringApplication app = new SpringApplication(WebAppMain.class); System.out.print("Starting app with System Args: [" ); for (String s : args) { System.out.print(s + " "); } System.out.println("]"); app.run(args); } @Bean public ViewResolver viewResolver() { ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver(); templateResolver.setTemplateMode("XHTML"); templateResolver.setPrefix("views/"); templateResolver.setSuffix(".html"); SpringTemplateEngine engine = new SpringTemplateEngine(); engine.setTemplateResolver(templateResolver); ThymeleafViewResolver viewResolver = new ThymeleafViewResolver(); viewResolver.setTemplateEngine(engine); return viewResolver; } } And just in case, here is my index.html:
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring3-3.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <title>Subscribe</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Bootstrap --> <link type="text/css" href="css/bootstrap.min.css" rel="stylesheet" /> <link type="text/css" href="css/index.css" rel="stylesheet" /> </head> <body> <h1> Hello</h1> <p> Hello World!</p> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> Put css files into webapp resources folder:
src/main/webapp/resources/css/ Configure resource handler
public class WebConfig extends WebMvcConfigurerAdapter { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/resources/**") .addResourceLocations("/resources/"); } Example projects:
Source:
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
