Instalar Laravel Breeze React

Instalar Laravel Breeze React

Para llevar a cabo la instalación de Laravel Breeze React en nuestro servidor local, siga los pasos detallados a continuación para garantizar un proceso exitoso.

“Daremos por hecho que ya tienes montado tu entorno de trabajo tanto en herramientas como lenguajes de programación (Composer, PHP 8.1 o superior, un servidor local Apache, base de datos como MySQL, PostgreSQL, SQLite, PHPStorm o Visual Studio Code, Node.js y npm para el frontend)”.

Desplegar tu proyecto Laravel a producción

Adquiere la guía en formato PDF

Instalar Laravel

Para instalar Laravel 10 ejecutamos el siguiente comando:

composer create-project laravel/laravel react-app
Instalar Laravel React

Ingresamos al proyecto rect-app

cd react-app

Instalación de Laravel Breeze

Seguidamente, vamos a instalar el paquete de Laravel Breeze con el siguiente comando:

composer require laravel/breeze --dev
Composer instalar Laravel Breeze React

Instalación y configuración de Laravel Breeze React

A continuación, procederemos a la instalación del componente Frontend, esta vez utilizaremos React con Inertia. Para ello, ejecutamos el siguiente comando:

php artisan breeze:install
Seleccionar tecnologia del frontend React

Al momento de instalar Laravel Breeze, nos ofrece las siguientes opciones:

  1. Escoger el framework del Frontend: en esta oportunidad seleccionamos React con Inertia.
  2. Escoger las siguientes opciones, Modo oscuro, Inertia SSR y TypeScript (experimental), no seleccionamos ninguna.
  3. Escoger el tipo de pruebas (PHPUnit o Pest) : Seleccionamos las pruebas PHPUnit.
Instalación de Laravel React con Inertia

Creación y Configuración de la base de datos

Llegó el momento de crear y configurar la base de datos. En primer lugar, crearemos la base de datos denominada “react-db” en el sistema de gestión de bases de datos que estemos utilizando.

Creación y Configuración de la base de datos Laravel React

Seguidamente en el archivo .env de nuestro proyecto configuramos la conexión a la base de datos:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=react-db
DB_USERNAME=root
DB_PASSWORD=

Por último, ejecutamos las migraciones con el siguiente comando:

php artisan migrate
Ejecutamos las migraciones Laravel React

Compilar los recursos del frontend

Ahora es necesario compilar los recursos del frontend a fin de generar la estructura inicial de las vistas de usuario de la aplicación web con React con Inertia. Para llevar a cabo este proceso, ejecutamos los siguientes comandos de npm (ejecutamos npm porque esta parte del sistema es el frontend de nuestra aplicación):

npm install
npm run dev
Compilar los recursos del frontend Laravel React

Iniciar el servidor de desarrollo de Laravel

Finalmente, iniciamos el servidor de desarrollo local de Laravel en una nueva Terminal con el siguiente comando:

php artisan serve
Iniciar el servidor de desarrollo de Laravel React

El proyecto de Laravel Breeze React con Inertia ya está instalado y listo para ser utilizado, podemos ingresar en nuestro navegador y ingresar a la siguiente ruta: http://127.0.0.1:8000.

Proyecto de Laravel Breeze Blade

¿Quieres aprender Laravel? Aquí tienes un curso básico de Laravel.

Saludos y éxitos.

Desplegar tu proyecto Laravel a producción

Adquiere la guía en formato PDF

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *