Best Way to Start a Laravel Project with Breeze and Bootstrap

Laravel is one of the most popular PHP frameworks, known for its elegant syntax and developer-friendly features. If you're planning to start a new Laravel project and want to integrate authentication with Breeze and Bootstrap, this guide will walk you through the process step by step.

Prerequisites

Before starting, make sure you have the following installed:

1. PHP (>=8.0 recommended)
2. Composer
3. Node.js and npm
4. MySQL or SQLite database
5. Laravel Installer (optional but recommended)

Step 1: Create a New Laravel Project

To create a new Laravel project, run the following command in your terminal:

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

Alternatively, if you have the Laravel installer installed, you can use:

laravel new myProject

Navigate to your project directory:

cd myProject

Step 2: Install Laravel Breeze

Laravel Breeze is a simple and lightweight authentication starter kit. Install it using Composer:

composer require laravel/breeze --dev

After installation, run the Breeze installation command:

php artisan breeze:install

By default, Breeze uses Tailwind CSS, but we want Bootstrap. So, use the following command instead:

php artisan breeze:install --bootstrap

Step 3: Install Dependencies

Once Breeze is installed, install the frontend dependencies using npm:

npm install && npm run dev

This will compile your assets, including Bootstrap, and set up your project with authentication views.

Step 4: Run Database Migrations

Breeze comes with pre-built authentication scaffolding, which requires database tables. Run the migrations:

php artisan migrate

Make sure your .env file is properly configured with the database connection settings.

Step 5: Serve the Application

Start the Laravel development server:

php artisan serve

Now, open your browser and navigate to http://127.0.0.1:8000. You should see your Laravel application with authentication already set up.

Step 6: Customize Your UI

Since you installed Breeze with Bootstrap, you can now customize your authentication views located in resources/views/auth/. You can modify these Blade templates to match your design requirements.

To customize Bootstrap styles, update the SCSS files in resources/css/ or add your own custom styles to resources/css/app.css.

Conclusion

Setting up Laravel with Breeze and Bootstrap is a quick and efficient way to start a new project with authentication in place. With this setup, you get a clean and extendable authentication system without the complexity of heavy frontend frameworks like Vue or React. Happy coding!

If you found this guide helpful, consider sharing it with others or leaving a comment below with your experience using Laravel Breeze with Bootstrap!