Introduction

Laravel Jetstream is a beautifully designed application starter kit for Laravel and provides the perfect starting point for your next Laravel application. Jetstream provides the implementation for your application's login, registration, email verification, two-factor authentication, session management, API via Laravel Sanctum, and optional team management features.

Jetstream is designed using Tailwind CSS and offers your choice of Livewire or Inertia scaffolding.

We have removed the Tailwind CSS dependency and modified the Livewire scaffolding as per our template.

What is Livewire?

Laravel Livewire is a library that makes it simple to build modern, reactive, dynamic interfaces using Laravel Blade as your templating language. This is a great stack to choose if you want to build an application that is dynamic and reactive but don't feel comfortable jumping into a full JavaScript framework.

You are encouraged to review the entire Livewire

What is Frest Jetstream? Why do we need it?

Laravel Jetstream is designed using Tailwind CSS and offers your choice of Livewire or Inertia scaffolding. We have removed the Tailwind CSS dependency and modified the Livewire scaffolding as per our template

Frest Jetstream is a lightweight laravel package that focuses on the VIEW side of Jetstream package installed in your Laravel application, so when a swap is performed, the ACTION, MODEL, CONTROLLER and COMPONENT classes of your project is still 100% handled by Laravel development team with no added layer of complexity.

Installation

Installing Jetstream

You are highly encouraged to read through the entire documentation of Jetstream

You may use Composer to install Jetstream into your new Laravel project:

composer require laravel/jetstream:4.1.0

Install Jetstream With Livewire

If you choose to install Jetstream through Composer, you should run the jetstream:install Artisan command that accepts the name of the stack you prefer (livewire).

You are highly encouraged to read through the entire documentation of Livewire before beginning your Jetstream project.

Important:

• Using following command will give you npm error as it's trying to compile using Vite but we are using webpack mix.
• We are going to replace Vite configurations, so that won't affect your work

Toggle Error Image

php artisan jetstream:install livewire

In addition, you may use the --teams switch to enable team support:

php artisan jetstream:install livewire --teams

Utilize the Jetstream-compatible version of Livewire (required):

composer require livewire/livewire:3.2.1

Frest Jetstream

To make jetstream compatible with bootstrap, we have used Frest Jetstream to replace/swap default tailwind scaffolding with modified Bootstrap scaffolding.

Use Composer to install Frest Jetstream into your new Laravel project as dev dependency:

composer require pixinvent/frest-html-laravel-jetstream --dev

Regardless how you install Jetstream, Frest Laravel Bootstrap Jetstream commands are very similar to that of Jetstream as it accepts the name of the stack you would like to swap (livewire).

To swap before beginning your Frest Laravel Jetstream project using Livewire:

php artisan jetstream_frest:swap livewire

In addition, you may use the --teams switch to swap team assets just like you would in Jetstream:

php artisan jetstream_frest:swap livewire --teams

This will publish overrides to enable Bootstrap like the good old days!

Finalizing The Installation

After installing Frest jetstream and swapping Jetstream resources, remove tailwindCSS and its dependencies if any from your package.json and then install and build your NPM dependencies and migrate your database:

Use YARN or NPM :

yarn
yarn dev

npm install --legacy-peer-deps
npm run dev

php artisan migrate

Blank Layout Usage

Frest Jetstream provides authentication pages UI to match with Frest Laravel Auth pages. For Frest, we have not updated controller to pass the blank layout for authentication pages.

But you can update Jetstream controller, and set view to select Blank Layout. You can check usage of blank layout from controller, from Page level configuration.

In that case, We need to extended Master Layout, layoutMaster not blankLayout.

Features

Jetstream provides below features:

• Authentication
• Registration
• Profile Management
• Password Update
• Password Confirmation
• Two Factor Authentication
• Browser Sessions
• API
• Teams

Under the hood, the authentication portions of Jetstream are powered by Laravel Fortify, which is a front-end agnostic authentication backend for Laravel.

To enable or disable the Jetstream features, We have two config files inside config/ folder. Note: You will get these files after installing Jetstream :)

• fortify.php
• jetstream.php

'features' => [
  Features::registration(),
  Features::resetPasswords(),
  // Features::emailVerification(),
  Features::updateProfileInformation(),
  Features::updatePasswords(),
  Features::twoFactorAuthentication([
    // 'confirm' => true,
    'confirmPassword' => true,
  ]),
],

'features' => [
  // Features::termsAndPrivacyPolicy(),
  // Features::profilePhotos(),
  // Features::api(),
  Features::teams(['invitations' => true]),
  Features::accountDeletion(),
],

Protect Routes

Use middleware ['auth:sanctum', 'verified'] to protect your routes. You need to wrap routes with this middleware to protect routes:

Route::group(['middleware' => 'auth:sanctum', 'verified'],function(){
  Route::get('/', [StaterKitController::class, 'home'])->name('home');
  .....
  ....
});