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

Восьмая версия Laravel была встречена с энтузиазмом. Данный выпуск отмечен несколькими радикальными изменениями. Одним из наиболее примечательных, хотя и спорных новшеств стала замена Bootstrap на Jetstream. Laravel Jetstream – каркас аутентификации со стильным дизайном. Скаффолдинг включает два стека для создания системы авторизации:

  • Tailwind CSS и Livewire;
  • Tailwind CSS и Inertia.js.

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

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

Создаем новый проект 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» , подготовленная редакцией проекта.

Меню