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.
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.
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.
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.
<!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.
Static Content in Spring WebFlux
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.