Использование каркаса аутентификации 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 можно работать над проектами, как раньше.
Комментарии