Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
- Simple, fast routing engine.
- Powerful dependency injection container.
- Multiple back-ends for session and cache storage.
- Expressive, intuitive database ORM.
- Database agnostic schema migrations.
- Robust background job processing.
- Real-time event broadcasting.
Laravel is accessible, powerful, and provides tools required for large, robust applications.
git clone https://github.com/Santhiveerapandi/laravel10-bootstrap5-vite.git
cd laravel10-bootstrap5-vite
composer install --ignore-platform-reqs
npm install
composer run post-autoload-dump
composer run post-update-cmd
composer run post-root-package-install
composer run post-create-project-cmd
.env file ---- Database settings
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
QUEUE_CONNECTION=redis
php artisan migrate
php artisan serve
npm run dev
php artisan queue:work --timeout=0
Installing a fresh new laravel application, so head over to the terminal, type the command, and create a new laravel app.
composer create-project laravel/laravel laravel10-bootstrap5-vite
or, if you have installed the Laravel Installer as a global composer dependency:
laravel new laravel10-bootstrap5-vite
Next, you need to run the below command in your terminal
composer require laravel/ui
php artisan ui bootstrap --auth
Run the following command to install frontend dependencies:
npm install
npm install loadash
First, you need to change vite.config.js and add the bootstrap 5 path & remove resources/css/app.css
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'
export default defineConfig({
plugins: [
laravel([
'resources/js/app.js',
]),
],
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
});
We need to use import instead of require.
import loadash from 'lodash'
window._ = loadash
import * as Popper from '@popperjs/core'
window.Popper = Popper
import 'bootstrap'
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
import axios from 'axios'
window.axios = axios
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo';
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// forceTLS: true
// });
Now you need to import bootstrap 5 SCSS path in you resources/js/app.js or resources/js/bootstrap.js
resources/js/app.js
import './bootstrap';
import '../sass/app.scss'
When using Vite, you will need to use the @vite Blade directive instead of the mix() helper. remove mix helper and add @vite directive.
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>
use @vite directive
@vite(['resources/js/app.js'])
views/layouts/app.blade
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
@vite(['resources/js/app.js'])
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav me-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ms-auto">
<!-- Authentication Links -->
@guest
@if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@endif
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
You need to npm run build command to create asset bootstrap 5.
npm run build
Now open a new terminal and execute the following command from your terminal to run the development server.
php artisan serve
and navigate to the following link http://localhost:8000/
Thank you
npm install jquery
// resources/js/app.js
import jQuery from 'jquery';
window.$ = jQuery;
JavaScript
// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
],
resolve: {
alias: {
'$': 'jQuery',
},
},
});
> npm run build
windows 11
composer require laravel/horizon --ignore-platform-reqs
php artisan horizon:install
Redis install:
-------------
ref: https://github.com/tporadowski/redis/releases
download redis.msi
redis GUI:
----------
ref:https://www.npmjs.com/package/redis-commander
npm install -g redis-commander
redis-commander
composer require predis/predis --ignore-platform-reqs
php artisan make:mail SendTestEmail --markdown=emails.testwelcomeemail
php artisan make:job SendEmailJob
handle()
{
\Mail::to('chitrabe06@gmail.com')->send(new \App\Mail\SendTestEMail());
}
web.php
-------
Route::get('/', function () {
dispatch(new \App\Jobs\SendEmailJob());
return view('welcome');
});
//Send email through dispatch method in web.php
php artisan queue:listen --timeout=0
php artisan serve