Not able to integrate boostrap and angularjs with spring-boot

Question

I have a spring-boot project set-up in eclipse

I am trying to integrate bootstrap and angularjs to create client-side functionality, but I am getting the following error:

2015-11-15 18:41:33.732 WARN 27978 --- [nio-8080-exec-5] o.s.web.servlet.PageNotFound : No mapping found for HTTP request with URI [/webjars/bootstrap/3.3.1/css/bootstrap.min.css] in DispatcherServlet with name 'dispatcherServlet' 2015-11-15 18:41:33.738 WARN 27978 --- [nio-8080-exec-6] o.s.web.servlet.PageNotFound : No mapping found for HTTP request with URI [/webjars/angularjs/1.3.8/angular.min.js] in DispatcherServlet with name 'dispatcherServlet'

pom.xml

    <?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.loyola.ws</groupId>
    <artifactId>ws-online-shopping</artifactId>
    <version>0.1.0</version>
    <packaging>jar</packaging>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.2.5.RELEASE</version>
    </parent>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-rest</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-entitymanager</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-spring-service-connector</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-heroku-connector</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
        </dependency>

        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-core-asl</artifactId>
            <version>1.9.13</version>
        </dependency>

        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-asl</artifactId>
            <version>1.9.13</version>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>

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

        <dependency>
          <groupId>org.webjars</groupId>
          <artifactId>angularjs</artifactId>
          <version>1.3.8</version>
        </dependency>

        <dependency>
          <groupId>org.webjars</groupId>
          <artifactId>bootstrap</artifactId>
          <version>3.3.1</version>
        </dependency>

        <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>angular-ui-bootstrap</artifactId>
        <version>0.10.0</version>
        <exclusions>
        <exclusion>
            <groupId>org.webjars</groupId>
            <artifactId>angularjs</artifactId>
        </exclusion>
        <exclusion>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
        </exclusion>
        </exclusions>
    </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-hateoas</artifactId>
        </dependency>
    </dependencies>

    <properties>
        <java.version>1.8</java.version>
        <hibernate.dialect>org.hibernate.dialect.MySQL5Dialect</hibernate.dialect>
    </properties>


    <build>

        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
<!--                <configuration>
                    <additionalClasspathElements>
                        <additionalClasspathElement>src/main/resources</additionalClasspathElement>
                    </additionalClasspathElements>
                </configuration> -->
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <configuration>
                    <redirectTestOutputToFile>true</redirectTestOutputToFile>
                    <reuseForks>false</reuseForks>
                    <forkCount>1</forkCount>
                </configuration>
            </plugin>
        </plugins>
    </build>
    <repositories>
        <repository>
            <id>spring-releases</id>
            <url>https://repo.spring.io/libs-release</url>
        </repository>
    </repositories>
    <pluginRepositories>
        <pluginRepository>
            <id>spring-releases</id>
            <url>https://repo.spring.io/libs-release</url>
        </pluginRepository>
    </pluginRepositories>
</project>

my index.html contains :

<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.1/css/bootstrap.min.css"
      th:href="@{/webjars/bootstrap/3.3.1/css/bootstrap.min.css}"
      rel="stylesheet" media="screen"></link>

manmeet · Accepted Answer · 2015-11-17 04:31:12Z

2

I have it figured out. Default classpath by spring-boot is mapped to src/main/resources. When I checked in error console, URI was directly looking for /static/css. So instead of having a mapping defined for /resources/, I defined a mapping for /static/ as below:

This is working code

@Configuration
public class WebMvcAutoConfiguration extends WebMvcConfigurerAdapter {

    private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
            "classpath:/static/", "classpath:/static/css/", "classpath:/static/js/" };

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        if (!registry.hasMappingForPattern("/static/**")) {
            registry.addResourceHandler("/static/**").addResourceLocations(
                    CLASSPATH_RESOURCE_LOCATIONS);
        }
    }
}

answered Nov 17, 2015 at 4:31

manmeet

3402 gold badges4 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:22:47Z

0

Static resources need to be exposed using the <mvc:resources/> tag.

Check this Stackoverflow question: Spring 3 MVC resources and tag <mvc:resources />

So, create an entry in your Spring XML, <mvc:resources mapping="/webjars/**" location="/webjars/" />.

All static files will be accessible.

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Nov 16, 2015 at 3:24

kensplanet

4941 gold badge8 silver badges17 bronze badges

3 Comments

manmeet Over a year ago

I am not using the xml approach rather a total code base approach. Where in pom.xml I have defined bootstrap and angularjs dependencies, but still using thymeleaf my webjar is not getting picked up. I referred to this - drissamri.be/blog/technology/… But still I added static dependencies for webjar, but its still not picking up my css files.

kensplanet Over a year ago

On run time, Thymeleaf will generate the following HTML link: <link href="localhost:8080/webjars/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen"></link>. My question was is the folder webjars publicly accessible.

manmeet Over a year ago

yes it is. I even tried to download the boostrap.min.css & bootstrap.min.js files and placed in resources folder and mapped also but still the page is not rendering as per the stylesheet -- private static final String[] CLASSPATH_RESOURCE_LOCATIONS = { "classpath:/static/", "classpath:/static/css/", "classpath:/static/js/" }; @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { if (!registry.hasMappingForPattern("/**")) { registry.addResourceHandler("/**").addResourceLocations( CLASSPATH_RESOURCE_LOCATIONS);

Ashwini Rao · Accepted Answer · 2015-11-17 05:03:15Z

Well,here are some more pointers on the code :

The below code is not required :

@Configuration
public class WebMvcAutoConfiguration extends WebMvcConfigurerAdapter {

private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
        "classpath:/static/", "classpath:/static/css/", "classpath:/static/js/" };

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    if (!registry.hasMappingForPattern("/static/**")) {
        registry.addResourceHandler("/static/**").addResourceLocations(
                CLASSPATH_RESOURCE_LOCATIONS);
    }
}
}

Spring boot has already done this for you ,what you are trying to achieve above.

Refer Doc : https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot

The proper way to fix this is as follows :

1.Create a static folder inside you resources folder,i.e inside src.main.resources .

2.Create individual folders for css ,js and images folder inside static folder and place your css /js or images files in individual folders.

3.Place your html files in templates folder.(This folder is in parallel level with static folder)

4.Inside html place below code :

<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.1/css/bootstrap.min.css"
      th:href="@{/css/bootstrap.min.css}"
      rel="stylesheet" media="screen" />

and js files like :

<script src="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.1/js/bootstrap.js"
      th:src="@{/js/bootstrap.js}"
       type="text/javascript"></script>

One more pointer,please save a network call via placing your css and js in the folder directly.

Hope this helps.

Hmm..interesting..it should work,if possible could you let me know the error you faced..after doing the above..

chrish · Accepted Answer · 2015-12-18 14:13:33Z

0

I just had this problem during a few hours. Just put index.html under static folder.

answered Dec 18, 2015 at 14:13

chrish

91 bronze badge

Collectives™ on Stack Overflow

Not able to integrate boostrap and angularjs with spring-boot

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related