SpringBoot: Integración Frontend

SpringBoot
SpringBoot
Actualizado: 14/02/2025

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

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.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

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

⭐⭐⭐⭐⭐
4.9/5 valoración