CODEWITHSUNDEEP
javaspringtwitter-bootstrapspring-mvc
Araneo
Araneo

Reputation: 497

Attaching Bootstrap to Spring MVC project by webjar

I am trying to add a Bootstrap framework to my Spring MVC project. I can see my page, but without Bootstrap. Application is running at Tomcat 8 with Spring 4.

In browser console I see an error

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8088/webjars/bootstrap/3.2.0/css/bootstrap.min.css Failed to load resource: the server responded with a status of 404 (Not Found)

Here is my code, Spring Configuration: 

@Configuration
@ComponentScan("org.dummy")
@EnableWebMvc  
public class SpringConfig extends WebMvcConfigurerAdapter {  

@Bean  
public UrlBasedViewResolver setupViewResolver() {  
    UrlBasedViewResolver resolver = new UrlBasedViewResolver();  
    resolver.setPrefix("/WEB-INF/jsp/");  
    resolver.setSuffix(".jsp");  
    resolver.setViewClass(JstlView.class);  
    return resolver;  
}  

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/resources/**").addResourceLocations("/WEB-INF/resources/*");
    registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
    registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
}

Included dependencies: 

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>3.2.0</version>
        <exclusions>
            <exclusion>
                <groupId>org.webjars</groupId>
                <artifactId>jquery</artifactId>
            </exclusion>
        </exclusions>
    </dependency>

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>2.1.1</version>
    </dependency>

And sample index.jsp: 

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="cp" value="${pageContext.request.servletContext.contextPath}" scope="request" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel='stylesheet' href='webjars/bootstrap/3.2.0/css/bootstrap.min.css'>
</head>
<body>  
    <div class="row">     
        <div class="col-md-4"> 
            <h3> 
                Column1</br>
            </h3>
            <ul>
                <li> Row 1 </li>
                <li> Row 2 </li>
                <li> Row 3 </li>        
            </ul>                                
        </div> 
        <div class="col-md-8"> 
            <h3> 
                Column 2</br>
            </h3>    
            <ol>
                <li> Row 1 </li>
                <li> Row 2 </li>
                <li> Row 3 </li>                             
            </ol> 
        </div> 
    </div>
    <script type="text/javascript" src="webjars/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="webjars/jquery/2.1.1/jquery.min.js"></script>
</body>

And here is my directories screenshot: Directories

Upvotes: 1

Views: 1806

Answers (1)

Aniket Thakur
Aniket Thakur

Reputation: 69035

Along with

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/resources/**").addResourceLocations("/WEB-INF/resources/*");
    registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
    registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}

You will also need default servlet handler

@Override
public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
    configurer.enable();
}

This are same as <mvc:resources/> and <mvc:default-servlet-handler/> from xml based configuration needed to serve static resources.

Also try

@Override
@Bean
public HandlerMapping resourceHandlerMapping() {
    AbstractHandlerMapping handlerMapping = (AbstractHandlerMapping) super.resourceHandlerMapping();
    handlerMapping.setOrder(-1);
    return handlerMapping;
}

Upvotes: 1

Related Questions