Laravel 9 still can't find App.css and App.js, even after running npm run dev

Question

Quite new to Laravel, I made sure I actually looked at the documentation for Laravel 9 before diving in, but in case I missed one, I ran into this issue of app.css not being found on the link provided by artisan and app.js. The Boostrap scaffolding is now in the views folder, but it seems (very unsure about this) that app.js and app.css are still inaccessible, so bootstrap doesn't work. I made sure to run npm install and npm run dev after installing bootstrap and boostrap --auth from artisan . As of now, the project is brand new so it works, it's just that boostrap won't load due to a 404 error. Here are some snapshots of the project, including a running terminal session.

Commands to use in order:

1. composer requires laravel/ui --dev
2. php artisan ui bootstrap
3. php artisan ui boostrap --auth
4. npm install
5. npm run dev

All the threads I've looked at here indicate that they are not running npm dev which I already have running, but I still haven't found a working solution.

Answer 1

You can follow the steps below:

Create a project using laravel

composer create-project laravel/laravel "project name"

Install Laravel UI for Bootstrap 5

composer require laravel/ui

Use bootstrap 5 to generate login/registration scaffolding

php artisan ui bootstrap --auth

Import bootstrap 5 path in vite.config.js

import path from 'path';

resolve:{
       alias:{
           '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
       }
   }

Import bootstrap 5 scss in the js folder

import '../sass/app.scss';

 import * as bootstrap from 'bootstrap';

Use @vite Blade directive in template

@vite(['resources/js/app.js'])

Finally build your asset file.

npm run build

Then use the artisan command to run the project.

php artisan serve