Laravel 8 has released with a bang! and with it , brought sweeping changes. One such remarkable yet controversial change is Laravel Jetstream. Laravel Jetstream is a beautifully designed application scaffolding and comes with two stacks for Authentication system -
1) Tailwind CSS + Livewire
2) Tailwind CSS + Inertia.js
Now, these two stacks are great, beautiful but very different from Bootstrap/jQuery based stack which developers are used to. So, there is a learning curve for developers if they want to use Laravel's Auth scaffolding which is sad because Laravel does not comes with Bootstrap based Auth scaffolding anymore.
But, that's the beauty of Open Source world. Anyone can modify these systems to their liking or build new plugins or integrations.
Today, we will learn how we can still use Bootstrap based Auth Scaffolding for new Laravel 8 app. We will be using our favourite Laravel/UI package to bring back old Bootstrap based Auth Scaffolding.
1) Create Laravel Project
If you have installed Laravel Installer (You can follow instructions from our Laravel Beginner Tutorial) then simply execute below command:
laravel new laravelauth
else, execute below command:
composer create-project laravel/laravel --prefer-dist laravelauth
then go to your project folder :
cd laravelauth
2) Install Laravel/UI
Laravel UI is an official package that offers basic Auth Scaffolding built on the Bootstrap CSS framework. Latest version of Laravel/UI supports Laravel 8 so we will use this package to import authentication pages, controllers, and other components.
Run below command:
composer require laravel/ui
3) Install Bootstrap in Laravel
Laravel UI offers three options for Auth Scaffolding - 1) Bootstrap, 2) Vue and 3) React. So, we will install bootstrap for our case.
Run below command:
php artisan ui bootstrap --auth
You can observe that we have used —auth flag here. Without that flag, above command will only install bootstrap and basic scaffolding. The —auth flag installs login and registration scaffolding as well.
4) Install NPM packages
We have configured bootstrap and other related dependancies in package.json in previous step, so now we will actually install it.
Before moving forward, make sure you have node installed in your system. You can check node version via below command:
# for node
node -v
# for npm
npm -v
Now, let's install the dependencies and compile our assets.
npm install && npm run dev
5) Database Migration
First, we should configure our database settings. In your .env file located at the root of your project, udpate the database config as per your system. [If you don't find .env file, simply create new one and add the credentials as per the example below] :
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret
Then, we will create database tables via migration by executing below command:
php artisan migrate
6) Run Development Server
Finally, it's time to test your Laravel Application with Bootstrap based scaffolding. Sometimes, OLD IS GOLD.
php artisan serve
Screenshots:
I hope this article helped you. There is no clear winner in Bootstrap vs Tailwind. It's all about preference. Since, Laravel 8 prefers Tailwind with Livewire or Inertia stack, it might be confusing for developers who wants to use Bootstrap instead. So, start working on your next project.
Adios!
For more tips & tutorial, join my newsletter
Top comments (5)
I like it how simple it is.
I would love to see some end screenshots of how the UI looks in your tutorial :)
something to base it on for beginners
Thanks for the feedback, made my morning ;)
I have added the screenshot (it still looks the same as old Laravel Auth)
NICE !!!
I like it :D
I have some questions about Laravel 8. Could you answer me?
Why Laravel 8 choose Tailwind CSS over BootStrap?
Can I use Laravel Jetstream (inertia) with BootStrap instead of Tailwind?
Is Laravel Jetstream (inertia) can be useable with API also, Just calling the same URL from api.php?
thx <3