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
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
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.
Completa SpringBoot y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs