Spring boot CSS, JS and Image Example

1. Overview

Spring boot web application development CSS and JS play an important role. This example contains Spring boot CSS, JS and Image Example. Data inside resources/static consider as resources so it will be accessible from jsp page directly.

2. Example

Spring boot CSS, JS and Image Example

2.1 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>spring-boot-example</groupId>
    <artifactId>Spring-boot-js-css-image-example</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>
    <description>spring boot js, css and image example</description>
    <!-- Inherit defaults from Spring Boot -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.4.RELEASE</version>
    </parent>
    <properties>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
    </properties>
    <dependencies>
        <!-- Provided -->
        <dependency>
            <groupId>org.springframework.boot</groupId>                <!-- for tomcat web container-->
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>              <!--fot jap compilation need provide scope runtime or provided because it available in tomcat -->
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>runtime</scope>     <!-- in my case provided not working so write runtime-->
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>           <!-- for jsp jstl tags-->
            <artifactId>jstl</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>         <!--its for spring mvc related -->
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <configuration>
                    <useSystemClassLoader>false</useSystemClassLoader>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

2.2 application.properties

spring.mvc.view.prefix: /WEB-INF/jsp/
spring.mvc.view.suffix: .jsp

2.3 SpringBootConfig

package com.javadeveloperzone;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.support.SpringBootServletInitializer;
import org.springframework.context.annotation.ComponentScan;
/**
 * Created by JavaDeveloperZone on 19-07-2017.
 */
@SpringBootApplication
@ComponentScan
// Using a root package also allows the @ComponentScan annotation to be used without needing to specify a basePackage attribute
public class SpringBootConfig extends SpringBootServletInitializer {
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(SpringBootConfig.class);
    }
    public static void main(String[] args) throws Exception {
        SpringApplication.run(SpringBootConfig.class, args);            // it wil start application
    }
}

2.4 CSSJSController

package com.javadeveloperzone.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
/**
 * Created by Lenovo on 19-07-2017.
 */
@Controller
public class CSSJSController {
    @GetMapping("/welcome")                     // it will handle all request for /welcome
    public String welcome() {
        return "welcome";           // welcome is view name. It will call welcome.jsp
    }
}

2.4 custom.css

h2{
    color: red;
}

2.6 somescript.js

function myFunction() {
    document.getElementById("demo").innerHTML = "This content has been change by javascript";
};
myFunction();

2.7 welcome.jsp

<html>
<head>
    <title>spring boot js and css example</title>
    <link rel="stylesheet" href="/css/custom.css">
</head>
<body>
<h2>spring boot js and css example and color has been change using static/css/custom.css</h2>
<img src="/images/solr.png" height="50" width="50">
<div id="demo"></div>
<script src="/js/somescript.js"></script>
</body>
</html>

2.8 Output:

Spring boot CSS, JS and Image Example – Output

3. References

• Spring boot document for static content