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>

Answer 1

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);
        }
    }
}

Answer 2

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.

Answer 3

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.

Answer 4

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