Programming for beginners: static content

In this post, I am going to explain how to serve static resources using spring boot application.

By implementing the interface ‘WebMvcConfigurer’, you can specify the location of static resources.

Example

@Configuration
public class StaticResourceConfiguration implements WebMvcConfigurer {

	private static final String[] CLASSPATH_RESOURCE_LOCATIONS = { "classpath:/META-INF/resources/",
			"classpath:/resources/", "classpath:/static/", "classpath:/public/" };

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

In the above example, I am specifying spring to look at the locations.

a. /META-INF/resources/

b. /resources

c. /static

d. /public

Find the below working application.

Step 1: Create new maven project ‘serve-static-content’.

Step 2: Update pom.xml with maven dependencies.

pom.xml

<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>com.sample.app</groupId>
	<artifactId>serve-static-content</artifactId>
	<version>1</version>


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

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

	</dependencies>
</project>

Step 3: Create folders static/html, static/images under src/main/resources folder.

Create hello.html file under static/html folder.

hello.html

<html>

	<head>
		<title>Hello World</title>
	</head>
	
	<body>
		<h1>Hello World</h1>
	</body>

</html>

Create banner.png file under static/images folder.

Step 4: Create a package ‘com.sample.app.config’ and define StaticResourceConfiguration class.

StaticResourceConfiguration.java

package com.sample.app.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class StaticResourceConfiguration implements WebMvcConfigurer {

	private static final String[] CLASSPATH_RESOURCE_LOCATIONS = { "classpath:/META-INF/resources/",
			"classpath:/resources/", "classpath:/static/", "classpath:/public/" };

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

Step 5: Define App class in the package ‘com.sample.app’.

App.java

package com.sample.app;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {
	public static void main(String[] args) {

		SpringApplication.run(App.class, args);

	}

}

Total project structure looks like below.

Run App.java

Open the url ‘http://localhost:8080/html/hello.html’ in browser, you will see following screen.

Open the url ‘localhost:8080/images/banner.png’, you will see following screen.

You will see the banner image.

You can download the complete working application from below link.

https://github.com/harikrishna553/springboot/tree/master/rest/serve-static-content

Previous Next Home

This is continuation to my previous post. In this post, I am going to update previous application to serve static files like images, css style sheets, images.

Previous project structure looks like below.

You can download my previous project from this link.

How to serve static content?

By default, ‘spring boot’ serves static content from a directory called /static (or /public or /resources or /META-INF/resources) in the classpath or from the root of the ServletContext.

Follow below step-by-step procedure to develop complete working application.

Step 1: Navigate to the project ‘spring boot app’ in the file system.

Create ‘resources’ folder under src/main folder.

Under resources folder, create index.html file and css, images, js, lib, views folders.

Project structure change like below.

Step 2: Import maven project into eclipse.

Right click on the project -> Maven -> Update Project.

Step 3: Open index.html and update it like below.

index.html

<html>
<head>
<title>Welcome</title>
</head>

<body>
    <h1>Welcome to Spring Boot Application Development</h1>
</body>
</html>

Run App.java file, which is located in ‘com.sample.app’ package.

App.java

package com.sample.app;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
}

Open the url ‘http://localhost:8080/index.html’ in browser, you can see below kind of screen.

Step 4: Lets add home.css file to css folder.

home.css

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 30px;
}

Open the url ‘http://localhost:8080/css/home.css’ in browser, you can able to see below screen.

Complete project structure looks like below.

Note

One thing to note here is that, I am not redeployed App.java application after adding home.css files. Changes take place automatically.

You can download complete working application from this link.

Previous Next Home

Programming for beginners

Wednesday, 24 March 2021

Spring boot: Serve static resources

Friday, 2 August 2019

Spring boot: Static content serving