Laravel Frontend

Adding Bootstrap plus Login & Registration

First require Laravel UI

composer require laravel/ui

Then you need to choose what front end to include: Bootstrap, Vue or React

php artisan ui bootstrap

For react you need first:

php artisan ui scaffolding

Do bootstrap for this version though.

Now it’ll ask you to run (You’ll need to run from Git Bash):

npm install && npm run dev
php artisan serve

php artisan serve

Create the webpack config file:

touch webpack.mix.js
npm install sass-loader@^12.1.0 resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps

Open the file and add:

let mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

Now compile your css and js to the public folder:

npm install laravel-mix@latest
npx mix

We can’t see bootstrap yet. We’ll need to add to welcome.blade.php

Add link:css and tab to the top of document and then href="{{asset('css/app.css')}}" which will link to the public folder automatically.

Now add this button anywhere to body:

<button class="btn btn-danger">Hi</button>

You should now see a red styled button which means bootstrap css is working.

Add login and registration page

php artisan ui bootstrap --auth

Then after run:

npm install && npm run dev

Now if you go to /login you’ll see a login page.

How to add templates to Laravel projects

Move js, css and vendor folder into the public folder in Laravel project.

Then copy the contents blank.html and put into layouts/admin.blade.php. Then update the <h1> tag below <!– Page Heading –> with @yield('content')

Create another template under admin/index.blade.php and paste this into it:

@extends('layouts.admin')

@section('content')

<h1>Admin</h1>

@endsection

Create a route:

Route::get('/admin', function () {
    return view('admin.index');
});

Check /admin to see if you see your Admin template.

Now update your admin.blade.php with dynamic asset links: {{asset('vendor/fontawesome-free/css/all.min.css')}}

Create admin/partials/_navbar.blade.php. Then cut out sidebar from admin.blade.php and paste into this file.

Go back to admin.blade.php and in its place paste:

@include('admin.partials._navbar')

Refresh to view

This is how to take a template and break it out into parts in Laravel.