Laravel 6.0.3 Not Loading Key Resources App.js or App.css 404 Not Found

Question

To setup my project I ran:

laravel new cms
composer require laravel/ui
php artisan ui:auth
php artisan migrate

However, when I go to http://cms.test/login I am shown the login page:

And get two 404 errors for missing resources:

http://cms.test/js/app.js net::ERR_ABORTED 404 (Not Found)
http://cms.test/css/app.css

What could be the reason for these missing files?

My public directory is empty aside from .htaccess, favicon.ico, index.php and robot.txt files, is that normal?

Rufusrug

Answer 1

My setup was a little wrong, I mostly forgetting to run npm install and npm run dev command that is required to compile the app.js and app.css files.

Correct setup command sequence was:

laravel new cms
cd cms
php artisan migrate
composer require laravel/ui
npm install
php artisan ui vue --auth
npm install && npm run dev

Rufusrug

Answer 2

The app.css and app.js were missing from a new app. The proper steps had been run as are noted in Jack Robson's answer above. I reran the last two steps:

    php artisan ui vue --auth
    npm install && npm run dev

And it generated the app.css and app.js - all good now.

No idea what had gone wrong in the initial install.

Expectant

Answer 3

The below command did the trick for me.

npm install && npm run dev

Agentive

Answer 4

In my case it was: that when configuring the Virtual Host in Apache wrote the path to the folder incorrectly: DocumentRoot "D: \ LARAVEL \ instagrmalaravel \ public" ...

when on host it was: 127.0.0.1 instagramlaravel.local,

change: instagrmalaravel to: instagramlaravel.

And everything worked correctly.

Cougar

Answer 5

The reason the files are missing is you forgot to run the build process that generates the files. The last command npm run dev does this. Having the 2 commands paired (npm install && npm run dev) in the docs seems to be catching a lot of people out.

Hypsometer