Laravel Fortify
AJA • March 12, 2022
laravelLaravel is a web application framework.
It provides the perfect starting point for a Laravel application and includes login, registration, email verification, two-factor authentication, session management,...
Requirements
Install Laragon according to this post.
Composer
Use composer to install laravel project.
cd c:\laragon\www\
composer create-project laravel/laravel fortify
cd fortify
npm install
Install Tailwind CSS Install tailwindcss and its peer dependencies via npm, and create your tailwind.config.js file.
npm install -D tailwindcss postcss autoprefixer @tailwindcss/forms postcss-import alpinejs
Configure your template paths Add the paths to all of your template files in your tailwind.config.js file.
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [require('@tailwindcss/forms')],
};
Add Tailwind to your Laravel Mix configuration In your webpack.mix.js file, add tailwindcss as a PostCSS plugin.
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
Add the Tailwind directives to your CSS Add the @tailwind directives for each of Tailwind’s layers to your ./resources/css/app.css file.
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Add the Alpinejs directives to your ./resources/js/app.js file.
require('./bootstrap');
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
composer require livewire/livewire
composer require laravel/fortify
php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"
npm install
npm run dev
Add to config/app.php
App\Providers\FortifyServiceProvider::class,
Database
Create a mysql database jetsream with Phpmyadmin.
Change database mysql parameters in c:\laragon\www\fortify\.env file.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=fortify
DB_USERNAME=root
DB_PASSWORD=password
Run laravel migrate
php artisan migrate
Views and components
Add the folowing files
app\Http\Livewire\NavigationMenu.php
app\Providers\FortifyServiceProvider.php
app\Providers\RouteServiceProvider.php
app\View\Components\AppLayout.php
app\View\Components\GuestLayout.php
config\app.php
resources\views\dashboard.blade.php
resources\views\navigation-menu.blade.php
resources\views\welcome.blade.php
resources\views\auth\confirm-password.blade.php
resources\views\auth\forgot-password.blade.php
resources\views\auth\login.blade.php
resources\views\auth\register.blade.php
resources\views\auth\reset-password.blade.php
resources\views\auth\two-factor-challenge.blade.php
resources\views\auth\verify-email.blade.php
resources\views\components\action-message.blade.php
resources\views\components\action-section.blade.php
resources\views\components\application-logo.blade.php
resources\views\components\application-mark.blade.php
resources\views\components\authentication-card-logo.blade.php
resources\views\components\authentication-card.blade.php
resources\views\components\banner.blade.php
resources\views\components\button.blade.php
resources\views\components\checkbox.blade.php
resources\views\components\confirmation-modal.blade.php
resources\views\components\confirms-password.blade.php
resources\views\components\danger-button.blade.php
resources\views\components\dialog-modal.blade.php
resources\views\components\dropdown-link.blade.php
resources\views\components\dropdown.blade.php
resources\views\components\form-section.blade.php
resources\views\components\input-error.blade.php
resources\views\components\input.blade.php
resources\views\components\label.blade.php
resources\views\components\modal.blade.php
resources\views\components\nav-link.blade.php
resources\views\components\responsive-nav-link.blade.php
resources\views\components\secondary-button.blade.php
resources\views\components\section-border.blade.php
resources\views\components\section-title.blade.php
resources\views\components\switchable-team.blade.php
resources\views\components\validation-errors.blade.php
resources\views\components\welcome.blade.php
resources\views\layouts\app.blade.php
resources\views\layouts\guest.blade.php
routes\web.php