laravel react sample app

Aplicativo Laravel React para BigCommerce

Este é um aplicativo básico do BigCommerce com duas telas, uma visualização resumida do catálogo e uma lista de pedidos que podem ser cancelados, construído usando Laravel e React.

O objetivo é acelerar sua capacidade de transformar o conceito de um aplicativo em algo utilizável no painel de controle do BigCommerce. Uma loja ativa pode instalar este aplicativo enquanto ele é executado localmente.

Um passo a passo sobre as etapas executadas para produzir este aplicativo, juntamente com as etapas necessárias para criar o aplicativo no BigCommerce, pode ser lido aqui.

Pré-requisitos e instalação

Antes de começar, você vai querer ter certeza de que os requisitos do sistema são atendidos:

• PHP (Guia de Instalação)
• Compositor (Guia de Instalação)
• Laravel (Guia de Instalação)

Para facilitar o desenvolvimento de PHP e permitir que o aplicativo desenvolvido seja facilmente compartilhado, você desejará usar Valet ou Homestead, dependendo do seu sistema operacional:

• Certificado SSL local (recomende Valet ou Homestead para facilitar a configuração)
  • Mac OS: Valet (Guia de instalação)
  • Windows/Linux: Homestead (Guia de Instalação)

Usaremos o Valet para algumas das etapas abaixo, mas a funcionalidade para hospedar e compartilhar sites é semelhante no Valet e no Homestead. O que é mais importante neste tutorial é como configurar o Laravel para usar React e conectar-se ao BigCommerce.

Para instalar dependências PHP:

composer install

E dependências JS:

npm install

Para testar em uma loja BigCommerce, você pode criar uma avaliação gratuita em bigcommerce.com ou solicitar uma loja sandbox gratuita inscrevendo-se para ser um parceiro de tecnologia.

Fazendo o Laravel e o React funcionarem juntos

É aqui que criaremos uma linha de base para desenvolvimento futuro: uma aplicação simples que carrega em uma URL específica em seu navegador e carrega um componente React em vez da tela padrão do Laravel.

Crie uma nova base de código do Laravel Você pode usar o comando Laravel que cria o padrão inicial para um aplicativo no diretório ~/Sites ou usar o Composer:

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

ou

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

Visite o endereço do aplicativo para garantir que ele esteja ativo localmente:

Após a conclusão do comando acima, precisaremos configurar o diretório para que o Valet possa servir o aplicativo com segurança.

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

Agora você deve conseguir visitar o seguinte URL em seu navegador e ver a tela de boas-vindas padrão do Laravel:

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

Configure o React como a estrutura JS usando Breeze e Inertia

Larvel Breeze fornece um ponto de partida mínimo e simples para construir uma aplicação Laravel, com recursos de autenticação. É alimentado por Blade e Tailwind, mas pode ser configurado como SPA usando Inertia. Neste exemplo, iremos potencializar nosso frontend com react.

Primeiro vamos instalar o Breeze:

composer require laravel/breeze --dev

Em seguida, instalamos o andaime de reação:

php artisan breeze:install react

Nota: este último comando executou npm install portanto não há necessidade de executar este comando.

Por último, coloque o aplicativo em execução:

npm run dev

um URL Local agora deve estar disponível em seu console para visitar seu aplicativo react

http://127.0.0.1:5173/

Referências

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

Contribuindo

Solicitações pull são bem-vindas. Para mudanças importantes, abra primeiro uma edição para discutir o que você gostaria de mudar.

Licença

MIT