Установка каркаса аутентификации Bootstrap 4 в Laravel 8

Проблема замены Jetstream на Bootstrap в Laravel 8 обычно сводится к нескольким практическим шагам: подключить Laravel UI, интегрировать Bootstrap 4, собрать ассеты и выполнить миграции, чтобы формы и маршруты аутентификации работали корректно. Статья даёт последовательные команды и описывает нюансы сборки npm‑пакетов и миграций для реального проекта.

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

Сергей Бензенкоавтор материала

Создаем новый проект 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»

Комментарии

Оставьте свой комментарий
Пока никто не оставил комментариев