How do you serve static content in Spring Boot?

Table of Contents

• Introduction
  • Methods to Serve Static Content in Spring Boot
    • 1. Default Locations for Static Files
    • 2. Customizing the Static Content Locations
    • 3. Serving Static Files in the Controller
    • 4. Serving Static Files with Thymleaf and Templates
  • Practical Example
    • Example 1: Serving Static HTML, CSS, and JS Files
    • Example 2: Customizing Static Content Path
• Conclusion

Introduction

In a Spring Boot application, serving static content (like HTML, CSS, JavaScript, and images) is an essential feature for web applications. Spring Boot provides an easy and flexible way to serve static files. This functionality allows developers to deliver content such as web pages, styles, scripts, and media directly to the client from the server.

By default, Spring Boot serves static content from specific locations in the project structure, but you can customize the configuration as needed.

Methods to Serve Static Content in Spring Boot

1. Default Locations for Static Files

Spring Boot automatically serves static content from certain directories within the src/main/resources folder. These default directories include:

• static/
• public/
• resources/
• META-INF/resources/

Any files placed in these directories will be accessible via HTTP without additional configuration. For example, a file src/main/resources/static/images/logo.png will be accessible at http://localhost:8080/images/logo.png.

Example Directory Structure:

If you place index.html inside src/main/resources/static/, Spring Boot will automatically serve it when you access http://localhost:8080/.

2. Customizing the Static Content Locations

Spring Boot allows you to customize the location of static files by modifying the application.properties or application.yml configuration file. You can specify custom directories for static content using the spring.resources.static-locations property.

For example:

This will make Spring Boot serve static content from the classpath:/custom/static/ directory, instead of the default ones.

3. Serving Static Files in the Controller

While Spring Boot can automatically serve static files from predefined directories, you might want more control over how static files are handled. You can create a controller to serve files programmatically.

Example Controller:

java

This allows you to serve specific files like images or PDFs by creating endpoints that respond with the correct resource.

4. Serving Static Files with Thymleaf and Templates

When using Spring Boot with Thymeleaf, you can easily include static content like CSS or JavaScript files within HTML templates. For example, you can reference static resources like so:

In the above code, @{} is a special Thymeleaf syntax for linking to static resources, where @{/css/style.css} will be resolved to src/main/resources/static/css/style.css.

Practical Example

Example 1: Serving Static HTML, CSS, and JS Files

You can easily create a web page with static resources like CSS, JavaScript, and images. Place your index.html file in src/main/resources/static/ and your associated assets in the static/ directory.

Example Directory Structure:

index.html:

Once this setup is in place, navigating to http://localhost:8080/ will show the index.html page styled with the CSS file and functioning with the JavaScript file.

Example 2: Customizing Static Content Path

You might want to organize your static files in custom folders. For example, you can store your CSS in classpath:/my-static-files/css/ and tell Spring Boot to serve files from that location by setting the spring.resources.static-locations property.

application.properties:

Conclusion

Spring Boot provides several ways to serve static content, including default locations, custom configurations, and programmatic control through controllers. By using the default static/, public/, and other predefined directories, you can easily serve static content in your application. For more advanced setups, you can customize the static content locations and handle resources through controllers. Understanding these methods gives you flexibility in serving static assets and organizing your application's resource structure efficiently.