Aprender SpringBoot Integración Frontend

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.