Jericho
Jericho

Reputation: 174

App.css and App.js still not found in laravel 9 after npm run dev

Quite new to Laravel and I made sure I did looked into the documentations of Laravel 9 before diving but incase I missed one, I have this issue wher app.css and app.js on the the link served by artisan are not found. Boostrap scaffolds are now in the views folder but it seems like the (quite unsure about this) the app.js & app.css are still inaccessible so bootstrap doesnt work. I made sure to run npm install and npm run dev after the bootstrap and boostrap --auth installation from artisan. As of now the project is totally fresh so it works except the boostrap won't load because of the 404 error. Here are some snapshots of the projects including the running terminal sessions. enter image description hereenter image description hereenter image description here enter image description here

Commands used in sequence:

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

All of the threads I've looked here in SO are stating they're not running npm dev which I am running already but I still haven't manage to find a working solution.

Upvotes: 3

Views: 9606

Answers (1)

Sanjay Parmar
Sanjay Parmar

Reputation: 71

You can follow below steps:

create project with laravel

composer create-project laravel/laravel "project name"

install laravel UI for bootstrap 5

composer require laravel/ui

Generate login / registration scaffolding with bootstrap 5

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 js folder

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

 import * as bootstrap from 'bootstrap';

use @vite blade directive in your template

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

finally build your asset file.

 npm run build

and then run project using artisan command.

php artisan serve

Upvotes: 3

Related Questions