Недавно я опубликовал видео на X, где я менее чем за минуту настроил проект Laravel React с аутентификацией и страницей профиля пользователя! Я подумал, что было бы полезно поделиться письменной версией для всех, кто предпочитает следовать вместе с подробным руководством.

В этом руководстве я покажу вам, как быстро настроить новый проект Laravel с интерфейсом React и встроенной аутентификацией, используя Laravel Breeze . Всего за несколько шагов у нас будет функциональная панель пользователя с редактированием профиля.

Почему Ларавель?

Laravel — это популярный PHP-фреймворк, используемый для создания современных веб-приложений. Он быстро набирает обороты: в сентябре 2024 года Accel объявила об инвестициях в Laravel в размере 57 миллионов долларов.

Согласно официальному сайту, Laravel — это «PHP Framework для веб-мастеров», и он действительно соответствует этому описанию.

Я не буду тратить слишком много времени на то, что такое Laravel, на его официальном сайте и в документации можно найти массу информации. Вместо этого давайте приступим к настройке вашего проекта.

Настройка проекта

Технический стек

Мы будем использовать:

• Laravel (для серверных API)

• SQLite — база данных по умолчанию для проектов Laravel (хотя вы можете легко переключиться на другую базу данных)

• React для интерфейса (с Inertia.js)

• Laravel Breeze для аутентификации и управления пользователями

Требования

Чтобы следовать этому руководству, убедитесь, что у вас есть:

• PHP 8 (предпочтительно 8.3)

• Композитор

• Node.js (v21)

Готовый? Давайте начнем!

Шаг 1. Создайте новый проект Laravel

Сначала используйте Composer для создания нового проекта Laravel:

composer create-project laravel/laravel laravel-project

Это создаст новый каталог с настройками Laravel по умолчанию. Перейдите в каталог проекта и обслужите приложение:

cd laravel-project
php artisan serve

Если вы посетите http://localhost:8000, вы увидите страницу приветствия Laravel.

Поздравляем, вы создали свой первый проект на Laravel! ✅

По умолчанию Laravel использует базу данных SQLite, которая уже настроена для вас. Вы можете найти файл базы данных по адресу data/database.sqlite.

Шаг 2. Установите Laravel Breeze

Далее мы добавим Laravel Breeze, который обеспечивает минимальную реализацию аутентификации, включая:

• Авторизоваться

• Регистрация

• Сброс пароля

• Подтверждение электронной почты

• Подтверждение пароля

Кроме того, Breeze включает простую страницу профиля, на которой пользователи могут обновлять свою информацию.

Добавьте пакет Breeze, выполнив:

composer require laravel/breeze --dev

Теперь установите Breeze в свой проект:

php artisan breeze:install

Во время установки Breeze предложит вам несколько вариантов:

• Я выбираю React для интерфейса, но есть несколько альтернатив:

  • Лезвие
  • Живой провод
  • Вью
  • Только API

• При желании вы можете включить Темный режим, Рендеринг на стороне сервера (SSR), Typescript и ESLint .

• Когда вас спросят о платформе тестирования, вы можете выбрать между Pest или PHPUnit. Я буду использовать Pest.

После завершения процесса Breeze добавит все необходимое для аутентификации и управления пользователями.

Готово! ?

Шаг 3. Запустите ваше приложение

Теперь, когда Breeze настроен, ваше приложение готово, и вы можете запустить его снова:

php artisan serve

Посетите http://localhost:8000/register, чтобы создать нового пользователя.

Вы начнете с пустой панели управления и сможете перейти на страницу своего профиля, чтобы отредактировать данные пользователя и обновить пароль.

Данные уже хранятся в вашей базе данных SQLite, и ваше приложение практически готово к развертыванию!

Заключение

Следуя этим шагам, вы успешно загрузили полнофункциональное веб-приложение с использованием Laravel и React с аутентификацией и системой управления профилями пользователей.

Breeze дает вам отличную отправную точку, но отсюда вы можете сосредоточиться на добавлении собственной бизнес-логики, улучшении пользовательского интерфейса/UX или интеграции сторонних сервисов, опираясь при этом на плечи экосистемы Laravel.