laravel react sample app

Aplicación Laravel React para BigCommerce

Esta es una aplicación básica de BigCommerce con dos pantallas, una vista de resumen del catálogo y una lista de pedidos que se pueden cancelar, creada con Laravel y React.

Su objetivo es acelerar su capacidad para convertir un concepto de aplicación en algo utilizable dentro del panel de control de BigCommerce. Una tienda en vivo puede instalar esta aplicación mientras se ejecuta localmente.

Aquí se puede leer un tutorial que repasa los pasos seguidos para producir esta aplicación, junto con los pasos necesarios para crear la aplicación en BigCommerce.

Requisitos previos e instalación

Antes de comenzar, querrás asegurarte de cumplir con los requisitos del sistema:

• PHP (Guía de instalación)
• Composer (Guía de instalación)
• Laravel (Guía de instalación)

Para facilitar el desarrollo de PHP y permitir que la aplicación que desarrolle se pueda compartir fácilmente, querrá utilizar Valet o Homestead, según su sistema operativo:

• Certificado SSL local (se recomienda Valet o Homestead para facilitar la configuración)
  • Mac OS: Valet (Guía de instalación)
  • Windows/Linux: Homestead (Guía de instalación)

Usaremos Valet para algunos de los pasos siguientes, pero la funcionalidad para alojar y compartir sitios es similar tanto en Valet como en Homestead. Lo más importante de este tutorial es cómo configurar Laravel para usar React y conectarse con BigCommerce.

Para instalar dependencias de PHP:

composer install

Y dependencias de JS:

npm install

Para probar en una tienda BigCommerce, puede crear una prueba gratuita en bigcommerce.com o solicitar una tienda sandbox gratuita registrándose como socio tecnológico.

Hacer que Laravel y React funcionen juntos

Aquí es donde crearemos una base para el desarrollo futuro: una aplicación simple que se carga en una URL específica en su navegador y carga un componente React en lugar de la pantalla predeterminada de Laravel.

Cree una nueva base de código Laravel. Puede usar el comando Laravel que crea el texto estándar inicial para una aplicación en el directorio ~/Sites o usar Composer:

composer global require laravel/installer
laravel new laravel-react-bigcommerce-app

o

composer create-project laravel/laravel laravel-react-bigcommerce-app

Visita la dirección de la aplicación para asegurarte de que esté activa localmente:

Una vez que se complete el comando anterior, necesitaremos configurar el directorio para que Valet pueda servir la aplicación de forma segura.

 cd laravel-react-bigcommerce-app
valet link
valet secure

Ahora debería poder visitar la siguiente URL en su navegador y ver la pantalla de bienvenida predeterminada de Laravel:

https://laravel-react-bigcommerce-app.test

Configure React como marco JS usando Breeze e Inertia

Larvel Breeze proporciona un punto de partida mínimo y sencillo para crear una aplicación Laravel, con funciones de autenticación. Funciona con Blade y Tailwind, pero se puede configurar como SPA mediante Inertia. En este ejemplo potenciaremos nuestra interfaz con reaccionar.

Primero instalemos Breeze:

composer require laravel/breeze --dev

Luego instalamos el andamio de reacción:

php artisan breeze:install react

Nota: este último comando ejecutó npm install , por lo que no es necesario ejecutar este comando.

Por último, ejecute la aplicación:

npm run dev

Una URL Local ahora debería estar disponible en su consola para visitar su aplicación de reacción.

http://127.0.0.1:5173/

Referencias

https://laravel.com/docs/10.x/installation#your-first-laravel-project https://laravel.com/docs/10.x/starter-kits

Contribuyendo

Las solicitudes de extracción son bienvenidas. Para cambios importantes, primero abra un problema para discutir lo que le gustaría cambiar.

Licencia

MIT