Instalando o Bootstrap no Laravel 10

Frank K Hosaka · Abril 4, 2023

O manual oficial do Laravel 10 começa apresentando o projeto Chirps ou o Kit Start, ambos instalam o Breeze no projeto, ele é um "facilitador" que loga, valida, cadastra novo usuário ou exclui o usuário. O problema é entender a gramática do blade.php, ele usa o estilo da Tailwind, e como eu não estou familiarizado com esse estilo, não sei o que posso mexer.

Estou mais familiarizado com o estilo do Bootstrap. Por exemplo, para azular um texto eu faço assim <td class=text-primary>, pelo menos eu acho bem fácil consultar o Bootstrap na internet. Para usar o Bootstrap no meu projeto, eu criei um link dentro do menu.blade.php que é usado em todo o projeto.

Ontem, no entanto, eu encontrei um tutorial, ensinando a instalar o Bootstrap no Laravel 9. O endereço dele é esse: https://www.itsolutionstuff.com/post/how-to-install-bootstrap-in-laravelexample.html

Esse tutorial não funciona no Laravel 10. Eu criei um projeto chamado laravel no diretório downloads, esses foram os comandos que eu usei:

cd downloads
composer create-project laravel/laravel
cd laravel
composer require laravel/ui
php artisan ui bootstrap
php artisan ui bootstrap --auth
npm install
npm run build

No tutorial, ele não diz para você mudar de diretório na linha de comando, depois que você cria o projeto. Ele também usa a gramática "npm run production", coisa que não funciona na versão que eu tenho. Com o que eu aprendi ontem, acredito que o "npm run dev" atualiza o navegador de tempo em tempo, já o "npm run build" obriga você a atualizar a tela do navegador, se você quiser ver o resultado das modificações que fez no código.

Outra coisa que não funciona no tutorial é o theme.blade.php, eu tive que mudar assim:

<!doctype html>
<html>
<head>
    <!-- Scripts -->
    <!--script src="{{ asset('js/app.js') }}" defer></script -->
   
    <!-- Styles -->
    <!-- link href="{{ asset('css/app.css') }}" rel="stylesheet" -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
    <p class="h1 text-primary">This is example from ItSolutionStuff.com</p>
</body>
</html>

Ou seja, eu comentei os links, e introduzi um novo comando Blade @vite, principalmente porque não tem nada dentro do arquivo 'css/app.css'.

O tutorial não explica como rodar o theme.blade.php - eu criei esse arquivo na pasta views, e alterei o routes/web.php assim:

<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {return view('theme');});
Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

Pelo menos a gramática do route não é tão assustador quanto o que aparece no projeto Chirps ou na hora de instalar o Breeze. Pelo que eu entendi nesse código, qualquer usuário pode ver a página theme, mas para ver os demais, primeiro o usuário precisa ser cadastrado.

Editado Abril 4, 2023 por Frank K Hosaka

Frank K Hosaka · Abril 4, 2023

Falei besteira no final da mensagem anterior. Eu disse que o route do tutorial estava mais legível, mas não está não. Eu tentei colocar o view('theme') depois do Auth::routes( ); mas isso não mudou em nada. Não sei exatamente para que serve a instrução Auth::routes( ).

Para bloquear o acesso ao view('theme') eu tive que mudar o route e criar um controller para essa função, assim:

routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Auth::routes();
Route::get('/', [App\Http\Controllers\TesteController::class,'theme']);
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

app/Http/Controllers/TesteController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class TesteController extends Controller {
public function __construct(){$this->middleware('auth');}
public function theme(){return view('theme');}}

Hoje, eu aprendi como barrar o usuário. Tudo indica que a function __construct( ) tem prioridade maior do que a função que foi originalmente chamada, se ele estiver dentro da mesma classe.

Entrar

Instalando o Bootstrap no Laravel 10

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades