Existing Project Laravel/UI/bootstrap -> Laravel/breeze

Hi All

History I have a large app that I wrote in php (using older techniques ;) about 15++ years ago Over the last year I have tasked myself with updating it and found Laravel appeared to be the general way to go. Writing again from the ground up pointing the new app to the existing database. That has it's own challenges and wondering if that was the right decision too :D So I started as a relative Laravel newbie using laravel/ui and when I started I learn now that /ui was being phased out in favour of breeze -> jetstream and so was bootstrap moving to tailwind. Anyhow, I'm now convinced that Breeze and Tailwind are probably where I should be - (and I'm liking Livewire too) My stack needs some locking down ! I like the "simplicity" of Bootstrap and Livewire BTW So all the work I have done so far - can it be salvaged or should I composer new and make it with breeze and tailwind and rip the bandaid off

LaryAI

2 years ago

Level 58

Yes, you can salvage the work you have done so far and migrate from laravel/ui to Laravel Breeze. Laravel Breeze is a lightweight starter kit that provides authentication scaffolding with minimal setup. Here's how you can migrate your existing project to Laravel Breeze:

Install Laravel Breeze:
```
composer require laravel/breeze --dev
```
Generate the authentication scaffolding:
```
php artisan breeze:install
```

Update your routes/web.php file to include the authentication routes:

use Laravel\Jetstream\Jetstream;

Jetstream::auth();

Route::get('/', function () {
    return view('welcome');
});

Update your app.blade.php layout file to include the necessary CSS and JavaScript files for Tailwind CSS:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <!-- ... -->
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    <!-- ... -->
</head>
<body>
    <!-- ... -->
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Update your resources/css/app.css file to import Tailwind CSS:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Compile your assets:
```
npm install && npm run dev
```
Run your application:
```
php artisan serve
```

By following these steps, you should be able to migrate your existing project from laravel/ui to Laravel Breeze and start using Tailwind CSS for styling.

Snapey

2 years ago

Level 122

Start a new project and move your models/controllers/routes etc across to the new project.

You can copy the views across but of course you are going to need to edit all these to use tailwind.

4 likes

vincej

2 years ago

Level 15

@Snapey I am thinking of doing the same. However, LaryAI does not mention where to remove/uninstall laravel/ui scripts. Or are they just automagically converted? Thanks!

jlrdw

2 years ago

Level 75

@vincej what stack? And just me, but I like manual authentication, see:

https://laravel.com/docs/10.x/authentication#authenticating-users

I have tried every stack, but did not like any of them. I stick with regular javascript and Fetch JS. Just my opinion.

Note that manual authentication walks you through everything.

2 likes

vincej

2 years ago

Level 15

@jlrdw Thanks for that - I will have a serious look at it. Currently my biggest enemy is time. If I can load Breeze with two clicks vs doing things manually, then that is pretty compelling. What is it specifically that you do not like about Breeze?

2 likes

jlrdw

2 years ago

Level 75

@vincej

What is it specifically that you do not like about Breeze

You aren't in control, you still have to modify code to get various login redirects correct.

Breeze assumes there is only one role logging in and that HOME redirect.

You could need redirect to other pages after login depending on role, i.e.:

admin
user
bookkeeping - accounting department
maintenance
etc

No two systems are the same and each requires tweaking RBAC or AUTH.

2 likes

Please or to participate in this conversation.