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)”.
Instalar Laravel
Para instalar Laravel 10 ejecutamos el siguiente comando:
composer create-project laravel/laravel react-app
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
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
Al momento de instalar Laravel Breeze, nos ofrece las siguientes opciones:
- Escoger el framework del Frontend: en esta oportunidad seleccionamos React con Inertia.
- Escoger las siguientes opciones, Modo oscuro, Inertia SSR y TypeScript (experimental), no seleccionamos ninguna.
- Escoger el tipo de pruebas (PHPUnit o Pest) : Seleccionamos las pruebas PHPUnit.
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.
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
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
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
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.
¿Quieres aprender Laravel? Aquí tienes un curso básico de Laravel.
Saludos y éxitos.