Jetstrap is a lightweight laravel 8 package that focuses on the VIEW side of Jetstream / Breeze package installed in your Laravel application

Overview

Jetstrap

Latest Stable Version Total Downloads License

Description

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

Table of Content

Installation

Installing Jetstream

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

composer require laravel/jetstream

If you choose to install Jetstream through Composer, you should run the jetstream:install Artisan command. This command accepts the name of the stack you prefer (livewire or inertia). You are highly encouraged to read through the entire documentation of Livewire or Inertia before beginning your Jetstream project. In addition, you may use the --teams switch to enable team support:

Install Jetstream With Livewire

php artisan jetstream:install livewire --teams

Or, Install Jetstream With Inertia

php artisan jetstream:install inertia --teams

Install Jetstrap

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

composer require nascent-africa/jetstrap --dev

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

It is important you install and configure Laravel Jetstream before performing a swap.

You are highly encouraged to read through the entire documentation of Jetstream before beginning your Jetstrap project. In addition, you may use the --teams switch to swap team assets just like you would in Jetstream:

php artisan jetstrap:swap livewire

or

php artisan jetstrap:swap livewire --teams

php artisan jetstrap:swap inertia --teams

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

Finalizing The Installation

After installing Jetstrap 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:

npm install && npm run dev

php artisan migrate

Extras

Pagination

It is also important to point out that Laravel 8 still includes pagination views built using Bootstrap CSS. To use these views instead of the default Tailwind views, you may call the paginator's useBootstrap method within your AppServiceProvider:



namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Paginator::useBootstrap();
    }
}

Presets

Presets are custom third party templates built using bootstrap. We've thought about it, what are the chances that you're going to use the default template provided by Laravel or Laravel Jetstream.

With the assumption you already know which way you want to go before running any type of scaffolding, so if you want to use CoreUi or AdminLte presets then the choice should be specified in your service provider (JetstrapFacade::useCoreUi3() or JetstrapFacade::useAdminLte3()) the first time you run any swap command.

And if you change your mind after you've run a swap command and decide to use a preset, then run the jetstrap:swap command again.

Core Ui

Core Ui lets you save thousands of priceless hours because it offers everything you need to create modern, beautiful, and responsive applications as stated on their website.

Please visit the CoreUI documentation for more details on how to use it.

To use Core Ui presets, simply call the useCoreUi3 method within your AppServiceProvider:



namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use NascentAfrica\Jetstrap\JetstrapFacade;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        JetstrapFacade::useCoreUi3();
    }
}

AdminLTE

AdminLTE is an open source admin dashboard & control panel theme. Built on top of Bootstrap, AdminLTE provides a range of responsive, reusable, and commonly used components.

Please visit the AdminLTE documentation for more details on how to use it.

To use AdminLte presets, simply call the useAdminLte3 method within your AppServiceProvider:



namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use NascentAfrica\Jetstrap\JetstrapFacade;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        JetstrapFacade::useAdminLte3();
    }
}

Breeze

Warning!!!: Jetstrap resources has been updated to work with the current version of Breeze but does not support swap for inertia-react resources. Feel free to make a PR with this feature if you can.

According to the documentation, "Breeze provides a minimal and simple starting point for building a Laravel application with authentication.", but personally I'd like to think of it as Laravel Ui without Vue and Bootstrap. Recently I worked on a project that didn't use Vue or require a complex authentication system, so Breeze seemed like a good idea, but again I was faced with the TailwindCSS problem, so I figured why not include it to the Jetstrap package.

Before proceeding please familiarize yourself with the Breeze via the official documentation documentation.

Again Jetstrap does not affect the Model / Controller portion of Breeze, just the View.

Swapping Breeze resources

To swap tailwind resource for bootstrap in a breeze configured laravel, simply run:

php artisan jetstrap:swap breeze

Swapping Breeze inertia resources

Laravel Breeze now comes with stubs for inertia scaffolding and so dose Jetstrap. To use a Bootstrap scaffold for your laravel project running on Breeze alongside inertia, simply run the code below:

php artisan jetstrap:swap breeze-inertia

Next you have to clean up your package.json file to make sure we don't install unnecessary packages.

After that run:

npm install && npm run dev

...and you're done!

Using the JetstrapFacade::useCoreUi3() or JetstrapFacade::useAdminLte3(); in your service provider while swapping breeze assets will work as expected.

Testing

Run the tests with:

vendor/bin/phpunit

or

composer tests

License

Jetstrap is open-sourced software licensed under the MIT license.

Comments
  • Admin lte3 sidebar menu

    Admin lte3 sidebar menu

    I think there is a bug. Adminlte3 Main Sidebar Component toggling does not work on the first login attempt. It requires reloading the page. After reloading it works. Can you please help me to fix that? screenshot

    opened by unknown-coder-1 13
  • [Request] Simple guide to migrate to BS5

    [Request] Simple guide to migrate to BS5

    A simples guide in Readme to migrate to BS5

    I have been tried to updagra to BS5.

    I remove all dependencies of Tailwind, BS4, Popper.js.

    Install Popper js2, BS5 through NPM.

    Change bootstrap. js to looks like this:

    `window._ = require('lodash');

    import 'bootstrap'

    window.axios = require('axios');

    window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

    window.axios = require('axios');

    window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';`

    But when a run npm install && npm run dev I got this error about the $sizes variable.

    ` Compiled with some errors in 20.33s

    ERROR in ./resources/sass/app.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable. ╷ 14 │ @each $size, $length in $sizes { │ ^^^^^^ ╵ resources/sass/app.scss 14:31 @content node_modules/bootstrap/scss/mixins/_breakpoints.scss 68:5 media-breakpoint-up() resources/sass/app.scss 11:3 root stylesheet at processResult (/var/www/html/node_modules/webpack/lib/NormalModule.js:713:19) at /var/www/html/node_modules/webpack/lib/NormalModule.js:819:5 at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:399:11 at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:251:18 at context.callback (/var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:124:13) at /var/www/html/node_modules/sass-loader/dist/index.js:54:7 at Function.call$2 (/var/www/html/node_modules/sass/sass.dart.js:93948:16) at _render_closure1.call$2 (/var/www/html/node_modules/sass/sass.dart.js:82175:12) at _RootZone.runBinary$3$3 (/var/www/html/node_modules/sass/sass.dart.js:27558:18) at _FutureListener.handleError$1 (/var/www/html/node_modules/sass/sass.dart.js:26107:19)

    1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) webpack compiled with 2 errors`

    I tried like 10 guide but no one works.

    Can anyone help?

    opened by mateuslecchi 8
  • Modal Open and Close error

    Modal Open and Close error

    Tank you for your greatest job.

    In my page I have many model. In jetstream I can use the same variable name for open the different modal, all modal start from event emit from parent page and are located in different modal child. With your implementation I need to use different name between child modal for toogle show variable.

    About this not big problem, I will rename the variable to be unique.

    The big problem is when i close the model. If I use the bottom button there's no problem for close and reopen the same or another modal, but if I click on the X on top of the modal or I click outside I can't reopen any modal.

    I have the same problem in profile page with the "Two Factor Authentication" modal and "Browser Sessions" modal.

    Sorry but I can't help you to fix issue, I'm beginner.

    opened by arnaldovalente 8
  • 2 Factor Authentication Ignored

    2 Factor Authentication Ignored

    Describe the bug 2 Factor Authentication is skipped completely

    To Reproduce Steps to reproduce the behavior: Register an account in application Proceed to Profile section Enable 2 factor auth Sign out Log in again

    • 2 Factor Authentication is ignored. And user proceed without challenge.

    Expected behavior 2 Factor Challenge should be prompted

    Additional context I did check all enabled features, updated the

               action="{{ route('two-factor.login') }}
    

    I'm not familiar enough with the fortify to know whats happening.

    opened by klexas 8
  • Confirm password modal on

    Confirm password modal on "Browser Sessions" and "Delete Account" dont show error message when submit empty password.

    Describe the bug .

    To Reproduce Steps to reproduce the behavior:

    1. Go to profile page
    2. Click on "Logout other browser session" and leave empty password.
    3. Click "Logout Other Browser Sessions" button
    4. See error

    Expected behavior Show error message when submit empty password

    Desktop (please complete the following information):

    • OS: ubuntu 20
    • Browser: Chrome
    opened by vanthao03596 8
  • Uncaught (in promise) TypeError: Cannot read property 'aside' of undefined

    Uncaught (in promise) TypeError: Cannot read property 'aside' of undefined

    Describe the bug I am receiving this error on the console and the page is not loaded

    Uncaught (in promise) TypeError: Cannot read property 'aside' of undefined at Proxy.hasSlot (app.js:16985) at Proxy.render (app.js:19968) at renderComponentRoot (app.js:6300) at componentEffect (app.js:9784) at reactiveEffect (app.js:4644) at effect (app.js:4619) at setupRenderEffect (app.js:9767) at mountComponent (app.js:9726) at processComponent (app.js:9686) at patch (app.js:9313)

    To Reproduce Steps to reproduce the behavior: Fresh installation of jetstream with inertia and --teams options Register a user and will be redirect to /dashboard and then the page is not loaded and this error appears at the console

    opened by samuelhgf 7
  • can not be installed laravel 8 (install composer error)

    can not be installed laravel 8 (install composer error)

    This is error

    Your requirements could not be resolved to an installable set of packages.

    Problem 1 - nascent-africa/jetstrap[v2.3, ..., v2.x-dev] require inertiajs/inertia-laravel ^0.3 -> found inertiajs/inertia-laravel[v0.3.0, ..., v0.3.6] but it conflicts with your root composer.json require (^0.4.2). - Root composer.json requires nascent-africa/jetstrap ^2.3 -> satisfiable by nascent-africa/jetstrap[v2.3, v2.3.1, v2.3.2, v2.x-dev].

    Use the option --with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages currently locked to specific versions.

    Installation failed, reverting ./composer.json and ./composer.lock to their original content.

    opened by rumeshdezoysa 6
  • Error: Cannot find module 'node-sass'

    Error: Cannot find module 'node-sass'

    Every time I try a fresh install of laravel, jetstream and jetstrap I get a node-sass error. (I don't get this without jetstrap)

    ERROR in ./resources/sass/app.scss
    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
    ModuleBuildError: Module build failed (from ../../node_modules/sass-loader/lib/loader.js):
    Error: Cannot find module 'node-sass'
    
    

    To Reproduce Steps to reproduce the behavior:

    1. install laravel
    2. install jetstream +livewire
    3. install jetstrap
    4. perform swap
    5. npm install
    6. npm run dev
    opened by deanzod 6
  • I can't enter the dashboard

    I can't enter the dashboard

    Install Jetstream With Inertia and 1.) Uncaught TypeError: Cannot read property 'classList' of undefined at dashboard.js:551

    2.)Uncaught (in promise) TypeError: Cannot read property 'name' of undefined at app.js:19844 Laravel

    opened by yalcincoruh 5
  • Class

    Class "Inertia\Inertia" not found

    Hi.

    I create a raw Laravel project and then I came to the nascent-africa/jetstrap package tutorial. I executed all the commands in order until the "Finalizing The Installation" section.

    It means as follows:

    composer require laravel/jetstream

    composer require nascent-africa/jetstrap --dev

    php artisan jetstrap:swap livewire or php artisan jetstrap:swap inertia

    npm install && npm run dev

    php artisan migrate

    But not existing login or register controller or blade files on project. And then I again run all above commands and this time encounter this error message:

    image

    Please help me.

    Thaks a lot.

    opened by enaeim 4
  • Undefined variable: header

    Undefined variable: header

    Hi!! image

    dashboard blade

    <x-app-layout>
        <x-slot name="header">
            <h2 class="h4 font-weight-bold">
                {{ __('Dashboard') }}
            </h2>
        </x-slot>
    </x-app-layout>
    

    Test blade

    <x-app-layout>
        <x-slot name="header">
            <h2 class="h4 font-weight-bold">
                {{ __('Test') }}
            </h2>
        </x-slot>
    </x-app-layout>
    

    I debug $header in Dashboard and Test, its the same. Its not different, but why is it doesn't run?

    opened by nhoxbin 4
  • Update Laravel 9 Jetstream

    Update Laravel 9 Jetstream

    In this change i made an adaptation so that the code worked in the following configurations:

    Project Configuration: Laravel Framework 9.24.0 PHP 8.1.9

    Focusing only on Liveware based on Tech Chess Youtube video.

    opened by Felipe-PS-95 0
  • V3.x

    V3.x

    In this change i made an adaptation so that the code worked in the following configurations:

    Project Configuration: Laravel Framework 9.24.0 PHP 8.1.9

    Focusing only on Liveware based on Tech Chess Youtube video.

    opened by Felipe-PS-95 0
  • Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

    To Reproduce Hi, I'm installing laravel 8 and try to swap the jetstream from tailwind to bootstrap, but when I run 'npm run dev', it produce these errors

    ERROR in ./resources/sass/app.scss
    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
    ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
    TypeError: Cannot read property 'config' of undefined
        at getTailwindConfig (/projects/la/backoffice/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:87:63)
        at /projects/la/backoffice/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:129:92
        at /projects/la/backoffice/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11
        at plugins (/projects/la/backoffice/node_modules/tailwindcss/lib/index.js:33:63)
        at LazyResult.runOnRoot (/projects/la/backoffice/node_modules/postcss/lib/lazy-result.js:339:16)
        at LazyResult.runAsync (/projects/la/backoffice/node_modules/postcss/lib/lazy-result.js:393:26)
        at LazyResult.async (/projects/la/backoffice/node_modules/postcss/lib/lazy-result.js:221:30)
        at LazyResult.then (/projects/la/backoffice/node_modules/postcss/lib/lazy-result.js:206:17)
        at processResult (/projects/la/backoffice/node_modules/webpack/lib/NormalModule.js:758:19)
        at /projects/la/backoffice/node_modules/webpack/lib/NormalModule.js:860:5
        at /projects/la/backoffice/node_modules/loader-runner/lib/LoaderRunner.js:400:11
        at /projects/la/backoffice/node_modules/loader-runner/lib/LoaderRunner.js:252:18
        at context.callback (/projects/la/backoffice/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
        at Object.loader (/projects/la/backoffice/node_modules/postcss-loader/dist/index.js:142:7)
    
    1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
    webpack compiled with 2 errors
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! @ development: `mix`
    npm ERR! Exit status 1
    npm ERR! 
    npm ERR! Failed at the @ development script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /home/xdemia/.npm/_logs/2022-08-03T08_58_48_872Z-debug.log
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! @ dev: `npm run development`
    npm ERR! Exit status 1
    npm ERR! 
    npm ERR! Failed at the @ dev script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /home/xdemia/.npm/_logs/2022-08-03T08_58_48_981Z-debug.log
    

    this is my package version

    "php": "^7.3|^8.0",
            "fruitcake/laravel-cors": "^2.0",
            "guzzlehttp/guzzle": "^7.0.1",
            "laravel/framework": "^8.75",
            "laravel/jetstream": "^2.9",
            "laravel/sanctum": "^2.11",
            "laravel/tinker": "^2.5",
            "livewire/livewire": "^2.5"
    
    opened by abanghendri 7
  • npm run dev warning:  (Use 'stats.children: true' resp. '--stats-children' for more details

    npm run dev warning: (Use 'stats.children: true' resp. '--stats-children' for more details

    I'm getting this issue after installing the jetstrap pakcage. Before laravel jetstream npm run dev was not giving any warning but after installing the jetstrap it gives a warning.

    WARNING in ./resources/css/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]
    
    opened by Neeraj1005 3
  • $watch not work in x-init within the modal component

    $watch not work in x-init within the modal component

    Describe the bug I found that modals are not working because they $watch not work in x-init if it is removed if it works

    Solution

    ` x-init="() => {

        let el = document.querySelector('#modal-id-{{ $id }}')
    
        let modal = new bootstrap.Modal(el);
    
        
            if (show) {
                modal.show()
            } else {
                modal.hide()
            }
       
    
        el.addEventListener('hide.bs.modal', function (event) {
          show = false
        })
    }"`
    

    Desktop (please complete the following information):

    • OS: W11
    • Browser Edge
    • Version 101.0.1210.53
    opened by armandoperez083 1
Releases(v2.5.4)
Nachricht is an message dispatcher which focuses on distributing workloads

Nachricht Nachricht is a message dispatcher which focuses on distributing workloads. Features Directly dispatch messages Dispatch messages via AMQP au

JTL Software 1 Jan 18, 2022
View themes is a simple package to provide themed view support to Laravel.

Laravel View Themes View themes is a simple package to provide themed view support to Laravel. Installation Add alexwhitman/view-themes to the require

Alex Whitman 16 Dec 19, 2020
Laravel Composable View Composers Package - Compose View Composers from Component Composers

Laravel Virtuoso Laravel Composable View Composers Package Increase flexibility and reduce code duplication by easily composing complex View Composers

Yitzchok Willroth 68 Dec 29, 2021
Laravel Jetstream is a beautifully designed application scaffolding for Laravel.

Laravel Jetstream is a beautifully designed application scaffolding for Laravel. Jetstream provides the perfect starting point for your next Laravel application and includes login, registration, email verification, two-factor authentication, session management, API support via Laravel Sanctum, and optional team management.

The Laravel Framework 3.4k Sep 30, 2022
A quiz application with laravel 8, spatie permissions, livewire, jetstream, chartjs, tailwindcss and more!

Todo Currently busy with some other important things, will definately would like to imporove the app with 1. Multiple choices selection and mapping to

Baig 61 Sep 21, 2022
Laravel Real-time chat app demo with React, Laravel Echo, Breeze, Socket.io, Redis, Inertia.js, TailwindCSS stack.

Laravel Real-time Chat App You can build yours from scratch with the following Medium article https://medium.com/@sinan.bekar/build-a-real-time-chat-a

Sinan Bekar 8 May 24, 2022
Laravel breeze is a PHP Laravel library that provides Authentication features such as Login page , Register, Reset Password and creating all Sessions Required.

About Laravel breeze To give you a head start building your new Laravel application, we are happy to offer authentication and application starter kits

null 3 Jul 30, 2022
Specially customized Laravel jetstream's scaffolding for Frest html + laravel admin Template

frest-html-laravel-jetstream Specially customized Laravel jetstream's scaffolding for Frest html + laravel admin Template. It'll not work with any oth

PIXINVENT CREATIVE STUDIO 0 Apr 5, 2022
A simple Socialite implementation for Laravel Jetstream.

Introduction Socialstream is a third-party package for Laravel Jetstream. It replaces the published authentication and profile scaffolding provided by

Joel Butcher 323 Sep 20, 2022
Utilizamos select2 con MySQL - Laravel 8 - livewire y jetstream

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Informática DP 1 Jan 4, 2022
Part of the Vagento framework. Can be installed independently.

Vagento - Enable Patching This package adds { 'extra': { 'enable-patching': true } } to the composer.json file. Needed for the cweagans/composer-patch

Vagento 1 Dec 11, 2021
Dashboard to view your http client requests in laravel application

Laravel Blanket is a package with wraps laravel http client requests and provide logs for request and response, also give option to retry any request from dashboard and more...

Ahmed waleed 210 Aug 21, 2022
This package provides a Logs page that allows you to view your Laravel log files in a simple UI

A simplistics log viewer for your Filament apps. This package provides a Logs page that allows you to view your Laravel log files in a simple UI. Inst

Ryan Chandler 9 Sep 17, 2022
View your Laravel routes on the browser.

View your Laravel routes on the browser. This package adds a route to your Laravel application. Once you've installed this package, enter /route-list

Patompong Savaengsuk 21 Apr 16, 2022
Is an Extension of Laravel View Class which compiles String Template on the fly. It automatically detects changes on your string template and recompiles it if needed.

Laravel-fly-view Is an Extension of Laravel View Class which compiles String Template on the fly. It automatically detects changes on your string temp

John Turingan 16 Jul 17, 2022
Filament-spatie-laravel-activitylog - View your activity logs inside of Filament. ⚡️

View your activity logs inside of Filament. This package provides a Filament resource that shows you all of the activity logs created using the spatie

Ryan Chandler 35 Sep 21, 2022
This is a laravel 4 package for the server and client side of datatables at http://datatables.net/

Datatable Important This package will not receive any new updates! You can still use this package, but be preparared that there is no active developme

Nils Plaschke 392 Aug 24, 2022
Data Table package with server-side processing, unlimited exporting and VueJS components

Data Table package with server-side processing, unlimited exporting and VueJS components. Quickly build any complex table based on a JSON template.

Laravel Enso 621 Sep 13, 2022
Stash view is a composer package for Laravel which caches views using Russian Doll Caching methodology.

Stash View Stash view is a composer package for Laravel which caches views using Russian Doll Caching methodology. What is Russian Doll Caching ? It i

Bhushan Gaikwad 16 Sep 20, 2022