Использование каркаса аутентификации Bootstrap 4 в Laravel 8 вместо Tailwind

Переход на Laravel 8 может быть сложным для разработчиков, привыкших к Bootstrap, особенно если проект использует стандартный Jetstream с Tailwind. Понимание различий и особенностей каркаса аутентификации помогает оценивать преимущества каждого подхода.

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

Обновлено: 2024-10-22 11:18:45 Сергей Бензенкоавтор материала

Создаем новый проект Laravel

Если вы уже установили Laravel Installer (инструкцию по инсталляции можно посмотреть здесь),выполните команду:

laravel new laravelauth

Если Laravel еще не установлен, команда будет выглядеть так:

composer create-project laravel/laravel --prefer-dist laravelauth

Затем перейдите в каталог с проектом командой:

cd laravelauth

Устанавливаем Laravel UI

Laravel UI – официальный пакет, предусматривающий генерацию страниц авторизации на основе CSS стилей фреймворка Bootstrap. Последняя редакция Laravel UI поддерживает Laravel 8, что дает нам возможность импортировать страницы аутентификации, контроллеры и другие необходимые компоненты. Для установки Laravel UI выполните приведенную ниже команду:

composer require laravel/ui

Добавляем Bootstrap в Laravel

Laravel UI предусматривает три опции для создания каркаса аутентификации: Bootstrap, Vue и React. Нам понадобится Bootstrap. Давайте установим соответствующий компонент с помощью следующей команды:

php artisan ui bootstrap --auth

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

Устанавливаем нужные пакеты npm

Параметры конфигурации Bootstrap были внесены в файл package.json на предыдущем этапе, теперь все готово к установке npm пакетов. Убедитесь, что Node.js и менеджер пакетов npm установлены в вашей системе, используя следующие команды:

# for node
node -v

# for npm
npm -v

Если все в порядке, устанавливаем пакеты:

npm install && npm run dev

Миграция базы данных

Прежде всего, укажите конфигурационные параметры базы данных в файле окружения .env, который находится в корневом каталоге проекта. Если соответствующего файла там не оказалось, создайте его вручную и внесите в него ваши данные по приведенному образцу:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

С помощью приведенной ниже команды мы создадим таблицы в базе данных:

php artisan migrate

Запускаем сервер в производство

Мы, наконец, готовы запустить Laravel с поддержкой скаффолдинга на основе Bootstrap: иногда старые технологии лучше новых:

php artisan serve

Надеюсь, эта статья вам пригодилась. Трудно сказать, что лучше – Bootstrap или Tailwind. На самом деле это вопрос личных предпочтений. Но поскольку Laravel 8 по умолчанию использует только Tailwind в связке с Livewire или Inertia, это обескураживает разработчиков, привыкших к Bootstrap. После интеграции Bootstrap в Laravel 8 можно работать над проектами, как раньше.

Сергей Бензенкоавтор-переводчик статьи «Laravel 8 Authentication using Bootstrap 4 instead of Tailwind»