Postei recentemente um vídeo no X onde configurei um projeto Laravel React com autenticação e uma página de perfil de usuário em menos de um minuto! Achei que seria útil compartilhar uma versão escrita para quem preferir acompanhar um guia detalhado.

Neste guia, mostrarei como configurar rapidamente um novo projeto Laravel com um frontend React e autenticação integrada, tudo usando o Laravel Breeze . Teremos um painel de usuário funcional com edição de perfil em apenas alguns passos.

Por que Laravel?

Laravel é um framework PHP popular usado para construir aplicações web modernas. Na verdade, está ganhando força rapidamente, na verdade, em setembro de 2024, a Accel anunciou um investimento de US$ 57 milhões no Laravel.

De acordo com o site oficial, Laravel é “O Framework PHP para Web Artisans” e realmente faz jus a essa descrição.

Não vou perder muito tempo explicando o que é o Laravel, há muitas informações disponíveis em seu site e documentação oficial. Em vez disso, vamos direto à configuração do seu projeto.

Configuração do projeto

Pilha de tecnologia

Usaremos:

• Laravel (para APIs de back-end)

• SQLite que é o banco de dados padrão para projetos Laravel (embora você possa mudar para outro banco de dados facilmente)

• React para o frontend (com Inertia.js)

• Laravel Breeze para lidar com autenticação e gerenciamento de usuários

Requisitos

Para seguir este guia, certifique-se de ter:

• PHP 8 (de preferência 8.3)

• Compositor

• Node.js (v21)

Preparar? Vamos começar!

Etapa 1: Crie um novo projeto Laravel

Primeiro, use o Composer para criar um novo projeto Laravel:

composer create-project laravel/laravel laravel-project

Isso criará um novo diretório com a configuração padrão do Laravel. Vá para o diretório do projeto e sirva o aplicativo:

cd laravel-project
php artisan serve

Se você visitar http://localhost:8000, verá a página de boas-vindas do Laravel.

Parabéns, você criou seu primeiro projeto Laravel! ✅

Por padrão, o Laravel usa um banco de dados SQLite, que já foi configurado para você. Você pode encontrar o arquivo do banco de dados em database/database.sqlite.

Passo 2: Instale o Laravel Breeze

Em seguida, adicionaremos o Laravel Breeze, que fornece uma implementação mínima de autenticação, incluindo:

• Conecte-se

• Inscrição

• Redefinição de senha

• Verificação de e-mail

• Confirmação de senha

Além disso, o Breeze inclui uma página de perfil simples onde os usuários podem atualizar suas informações.

Adicione o pacote Breeze executando:

composer require laravel/breeze --dev

Agora, instale o Breeze em seu projeto:

php artisan breeze:install

Durante a instalação, o Breeze solicitará algumas opções:

• Eu escolho React para o frontend, mas existem algumas alternativas:

  • Lâmina
  • Livewire
  • Ver
  • Somente API

• Opcionalmente, você pode ativar o Modo escuro, Renderização do lado do servidor (SSR), Typescript e ESLint .

• Quando questionado sobre uma estrutura de teste, você pode escolher entre Pest ou PHPUnit. Usarei Pest.

Assim que o processo for concluído, o Breeze terá adicionado tudo que você precisa para autenticação e gerenciamento de usuários.

Está feito! ?

Etapa 3: execute seu aplicativo

Agora que o Breeze está configurado, seu aplicativo está pronto e você pode executá-lo novamente:

php artisan serve

Visite http://localhost:8000/register para criar um novo usuário.

Você começará com um painel vazio e poderá navegar até sua página de perfil para editar seus detalhes de usuário e atualizar sua senha.

Os dados já estão armazenados em seu banco de dados SQLite e seu aplicativo está essencialmente pronto para ser implantado!

Conclusão

Seguindo essas etapas, você inicializou com sucesso um aplicativo web full-stack usando Laravel e React, completo com autenticação e um sistema de gerenciamento de perfil de usuário.

O Breeze oferece um excelente ponto de partida, mas a partir daqui você pode se concentrar em adicionar lógica de negócios personalizada, melhorar UI/UX ou integrar serviços de terceiros, tudo isso enquanto se apoia no ecossistema do Laravel.