Static Content in Spring WebFlux
Last Updated :
28 May, 2024
Spring WebFlux is a framework for building responsive web applications. It supports reactive programming. One of the most important features of a web application is to serve static content such as HTML, CSS, and JavaScript files. In this article, we will discuss how to create static content in Spring WebFlux.
To serve static content in Spring WebFlux, we should place the static files in a specific directory. And, we need to configure the application to serve these files. By default, Spring WebFlux looks for static resources in the project's classpath:/static, classpath:/css, classpath:/js, and classpath:/resources directories.
Directory Structure:
We need to place your static files in one of the default directories to serve the static content.
For example:
src/main/resources/static/
src/main/resources/css/
src/main/resources/js/
src/main/resources/resources/
The files in these directories can be automatically served by the Spring WebFlux without any additional configuration of the project.
Implementation of the Static Content in Spring WebFlux
Step 1: Create a new Spring Boot project using Spring Initializr and add the required dependencies,
- Spring Web Reactive
- Lombok
- Spring DevTools
After creating, the file structure will be like the below image.
Note: No need configuration of the application.properties of this project.
Step 2: Open the main class and write the below code.
Go to src > main > java > org.example.staticcontentwebflux > StaticContentWebFluxApplication and put the below code.
Java
package org.example.staticcontentwebflux;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class StaticContentWebfluxApplication {
public static void main(String[] args) {
SpringApplication.run(StaticContentWebfluxApplication.class, args);
}
}
Step 3: Create the CSS Style Sheet
Go to src > main > resources > static > css > style.css and put the below code.
CSS
body {
font-family: 'Arial', sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
max-width: 800px;
margin: 20px;
padding: 40px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
color: #343a40;
margin-bottom: 20px;
}
p {
color: #6c757d;
font-size: 18px;
line-height: 1.6;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
color: #ffffff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
/* Responsive design */
@media (max-width: 768px) {
.container {
padding: 20px;
}
h1 {
font-size: 24px;
}
p {
font-size: 16px;
}
button {
width: 100%;
font-size: 18px;
}
}
Step 4: Create the JavaScript file
Go to src > main > resources > static > js > script.js and put the below code.
JavaScript
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('button');
button.addEventListener('click', () => {
alert('Button clicked!');
});
});
Step 5: Create the Index HTML file
Go to src > main > resources > static > index.html and put the below code.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spring WebFlux Static Content</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div class="container">
<h1>Welcome to Spring WebFlux</h1>
<p>This is a static HTML page served by Spring WebFlux. The UI has been enhanced with better styling and responsiveness.</p>
<button>Click Me</button>
</div>
<script src="/js/script.js"></script>
</body>
</html>
Step 6: Run the Application
Now, we will run the application and it will start at port 8080.
Step 7: Open the browser and check the URL for working on the project.
http://localhost:8080
Output:
Click on the Click Me button then the alert message will pop up like below.
Similar Reads
Concurrency in Spring Webflux
Concurrency is a vital aspect of web applications and it allows them to handle multiple tasks simultaneously without blocking. Spring WebFlux was introduced in Spring 5. It provides a reactive programming model that enables the non-blocking, asynchronous processing. This approach leverages the react
6 min read
Enable Swagger in Spring WebFlux
Spring Reactive programming is an asynchronous and non-blocking program paradigm for developing highly responsive applications. And also It enables developers to build applications to handle high-load traffic without compromising on application performance. Swagger is an open-source framework with a
5 min read
Spring Webflux Vs Rsocket
Spring WebFlux and RSocket are tools offered by the Spring ecosystem for developing reactive applications. Their functions and features are different. Spring Webflux, Reactive stream semantics for non-blocking activities may be implemented in a web application. RSocket, reactive Stream semantics bet
5 min read
Event loop in Spring WebFlux
Spring WebFlux is a version of the Spring Framework that supports reactive programming, allowing for non-blocking, asynchronous code execution. At the core of its framework, the event loop model is designed to efficiently handle multiple simultaneous requests. For example, if there are multiple even
5 min read
Basic Introduction to Spring WebFlux
Spring WebFlux is a reactive, non-blocking web framework that uses Project Reactor's reactive streams API to enable highly concurrent and asynchronous processing of web requests in a non-blocking and event-driven way. It is fully asynchronous and non-blocking using reactive streams and callbacks. It
4 min read
Logging in Spring WebFlux
Logging in Spring WebFlux is important for monitoring, debugging, and tracing the flow of requests through the reactive application. Here is how to effectively use logging in a Spring WebFlux application. There are log logger frameworks available in the market to handle logs in the software applicat
5 min read
Spring WebFlux Testing
In Spring Boot, Spring WebFlux is the reactive programming framework that can provide support for the building of asynchronous, non-blocking, and event-driven applications when it comes to testing in the spring WebFlux. Key Terminologies:Unit Testing: It can involve testing individual components of
9 min read
Pagination in Spring Webflux
The Spring WebFlux is part of Spring Framework and this allows developers to develop non-blocking applications. It provides different operators to handle the publisher and consumers in the application by using Spring reactor. In this article, we explain what is pagination and its uses in web softwar
4 min read
Handling Errors in Spring WebFlux
The Spring Boot Community Developed the Spring Reactive Web Framework. The SpringReactive allows developers to build asynchronous, non-blocking, and event-driven web applications. When compared with the Spring MVC framework the Spring Reactive Web framework provides more functionality. The Spring We
6 min read
Backpressure in Spring WebFlux
Backpressure is implemented in Spring WebFlux using the Flux and Mono API. A publisher using Flux or Mono does not send data to its subscribers when it generates it. Problems like resource contention, delay, and possible system failure might result from this imbalance. Backpressure is a system that
5 min read