Laravel Fortify

AJA • March 12, 2022

laravel

Laravel 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