A Laravel 8 package to easily switch TailwindCSS resources generated by Laravel Jetstream and Breeze to Bootstrap 4.

  • By null
  • Last update: Dec 28, 2022
  • Comments: 15

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.

Github

https://github.com/nascent-africa/jetstrap

Comments(15)

  • 1

    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

  • 2

    [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?

  • 3

    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.

  • 4

    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.

  • 5

    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
  • 6

    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

  • 7

    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.

  • 8

    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
  • 9

    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.

  • 10

    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

  • 11

    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?

  • 12

    Migrating to CoreUi v4 from CoreUi v3

    Is your feature request related to a problem? Please describe. Is there room to include support for CoreUi v4 in the future?

    Describe the solution you'd like I feel like it would be nice to simply include JetstrapFacade::useCoreUi4(); in the boot() method of app/Providers/AppServiceProvider.php.

    Describe alternatives you've considered I'm currently moving away from JetstrapFacade::useCoreUi3(); to CoreUi v4, I'm trying to follow the official migration guide though I haven't had any success yet. My previously working CoreUi v3 User Interface is messed up due to the upgrade.

    Additional context Add any other context or screenshots about the feature request here.

  • 13

    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.

  • 14

    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.

  • 15

    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"

Popular Tag

Related