Configuration with vite

[japasanto]

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]

@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]

Hi povilas It’s kinda odd why they don’t fix this, because meanwhile one can use the breeze starter kit and everything works, but it adds tailwind and alpine js and innertia, which I don’t want to use, I prefer it simple. Thanks for answering. João santo No dia 12/07/2022, às 19:55, PovilasKorop ***@***.***> escreveu:  @japasanto<https://github.com/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<#78> — Reply to this email directly, view it on GitHub<#80 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AGBMS2QYKYNSE5QRQKN5EBTVTW5RJANCNFSM53LFJMSA>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[PovilasKorop]

@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]

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]

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]

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]

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]

@RoduanKD can you make pr?

[PovilasKorop]

@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]

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