LaravelDaily/Larastarters

Configuration with vite

japasanto opened this issue · 10 comments

japasanto commented

I use Larastarters all the time, it gets me running with a new project in no time, but now with vite i don´t understand what kind of configuration i should use because if i go to the documentation and follow all those steps AFTER install this package i always get:

Configuration "resources/js/app.js" does not exist.

but it´s there!.

@PovilasKorop could you help with this one?

PovilasKorop commented

@japasanto larastarters bootstrap is based on Laravel UI which is currently not working with Vite at all, we can't do much until that fix is released. See issue #78

japasanto commented
PovilasKorop commented

@japasanto they officially support only Breeze and Jetstream, Laravel UI based on Bootstrap is the old method which they promised to "keep alive" but it's never even mentioned in the docs.

So we need to wait when they have time to work on Laravel UI, which is totally not their priority.

That said, it's open source and everyone can contribute, so you can join the discussion there: laravel/ui#228

irfnrdh commented

After Install with volt, CSS does not exist.
I replace <link rel="stylesheet" href="{{ asset('css/app.css') }}"> <script src="{{ asset('js/app.js') }}" defer></script>
with @vite(['resources/sass/app.scss', 'resources/js/app.js'])

on vite.config.js change the folder from css to scss copy from vendor\laraveldaily\larastarters\resources\stubs\ui\voltbs5\sass folder

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
   optimizeDeps: {
		exclude: [ "@fortawesome/fontawesome-free" ]
	},
    plugins: [
        laravel([
            'resources/sass/app.scss',
            'resources/js/app.js',
        ]),
    ],
});

run with npm run build and get some error
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

works but some font-awesome cannot load the font
and fix with @fortawesome/fontawesome-free ^5.15.4 → ^6.1.1
npx npm-check-updates --filter "/@fortawesome.*/" --target greatest --upgrade
npm install

japasanto commented

Hi everyone

I think i manage something interesting, so here are the steps i took:

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel([
            'resources/sass/app.scss',
            'resources/js/app.js',
        ]),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        }
    },
});

app.js

import('@tabler/core/src/js/tabler.js');
import('./bootstrap');

app.scss

// Tabler

$assets-base: "../../../dist" !default;

@import '@tabler/core/src/scss/tabler';

guest.blade and app.blade

{{--    <link href="{{ asset('css/app.css') }}" rel="stylesheet">--}}
@vite(['resources/sass/app.scss', 'resources/js/app.js'])

In my bootstrap.js i changed require bootstrap to import bootstrap, but it is complaning about axios:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'headers')

can you help with this last one?

jrd-lewis commented

Until that PR's merged, you could set laravel/ui to use "dev-vite" in composer.json and then update it with composer to get the changes.

Update: the PR was merged and the vite branch was deleted, but there's no new tagged release yet with it; so, you can use the "dev-master" branch in the interim.

RoduanKD commented

Update: Laravel/UI v4 is released
here's what I did to make it work:

  • composer require laraveldaily/larastarters
  • php artisan larastarter:install
  • in my case I used Laravel UI with Tabler
  • update laravel ui version with composer require laravel/ui:^4.0
  • after that, an error occurred from bootstrap that can be fixed by downgrading it to exactly v5.3.1 link
  • then all that is left is npm i && npm run dev

you can also check this commit

krekas commented

@RoduanKD can you make pr?

PovilasKorop commented

@krekas I think it would be better if you take care of it a bit deeper: try to make a PR from @RoduanKD commit - RoduanKD/markit@e217025 - and also we need to test ALL the Bootstrap-based themes with it, cause some of them may not work at all, with the new changes.

So please dive a bit deeper, and fingers crossed this will be an easy PR with no "surprises" :)

RoduanKD commented

I've created a pull request. We can work on it together. @PovilasKorop @krekas

  • ❤️1