SpringBoot: Integración Frontend
Aprende a integrar Spring Boot 3 con Frontend. Guía práctica y actualizada para desarrolladores de software en 2024.
La integración de Spring Boot 3 con el frontend es una tarea esencial para desarrollar aplicaciones web completas. En este artículo, exploraremos cómo combinar Spring Boot 3 con tecnologías frontend modernas para crear aplicaciones eficientes y mantenibles.
Configuración inicial de Spring Boot 3
Para comenzar, necesitamos configurar un proyecto de Spring Boot 3. Asegúrate de tener instalado Spring Boot 3 y JDK 17 o superior. Puedes crear un nuevo proyecto utilizando Spring Initializr:
curl https://start.spring.io/starter.zip \
-d dependencies=web \
-d javaVersion=17 \
-d bootVersion=3.0.0 \
-d groupId=com.ejemplo \
-d artifactId=integracion-spring-frontend \
-d name=IntegracionSpringFrontend \
-o integracion-spring-frontend.zip
unzip integracion-spring-frontend.zip -d integracion-spring-frontend
cd integracion-spring-frontend
Creación de un controlador REST
Una vez configurado el proyecto, crearemos un controlador REST para manejar las peticiones HTTP desde el frontend:
package com.ejemplo.integracionspringfrontend.controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class HolaMundoController {
@GetMapping("/api/hola")
public String holaMundo() {
return "Hola, mundo!";
}
}
Configuración de CORS
Para permitir que el frontend se comunique con el backend, es necesario configurar CORS (Cross-Origin Resource Sharing):
package com.ejemplo.integracionspringfrontend.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://localhost:3000")
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS");
}
};
}
}
Integración con un frontend en React
Para la parte del frontend, usaremos React. Asumiendo que ya tienes un proyecto React configurado, puedes utilizar fetch
para consumir la API de Spring Boot:
import React, { useEffect, useState } from 'react';
function App() {
const [mensaje, setMensaje] = useState('');
useEffect(() => {
fetch('http://localhost:8080/api/hola')
.then(response => response.text())
.then(data => setMensaje(data));
}, []);
return (
<div>
<h1>{mensaje}</h1>
</div>
);
}
export default App;
Ejecutar y probar la integración
Para probar la integración, primero inicia el backend de Spring Boot:
./mvnw spring-boot:run
Luego, inicia el servidor de desarrollo de React:
npm start
Visita http://localhost:3000
en tu navegador y deberías ver "Hola, mundo!" renderizado en la página.
Lecciones de este módulo de SpringBoot
Lecciones de programación del módulo Integración Frontend del curso de SpringBoot.
Ejercicios de programación en este módulo de SpringBoot
Evalúa tus conocimientos en Integración Frontend con ejercicios de programación Integración Frontend de tipo Test, Puzzle, Código y Proyecto con VSCode.