How to fix error 404 with app.js and app.css in Laravel?

Question

I am using Laravel 6 and Bootstrap 4.

I made a little app and I was trying to change the background color of the body in the CSS file but I noticed that it didn' work.

So I checked in the tools for the developers and I saw that there are two errors about app.js and css/app.css

"Failed to load resource: the server responded with a status of 404 (Not Found)"

I tried adding a "/" before the path of the CSS but I failed.

View:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css">


    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>
<body style="overflow: hidden; ">
    <div id="app">
        @include('../inc/navbar')
        <main class="py-4">
            @yield('content')
        </main>
        <br>
        <br>
        <br>
        @include('../inc/footer')
    </div>
    </body>
</html>

CSS:

body {
    background-color: lightblue !important;
}

I would like to see the lightblue body but for some reason it doesn't work. Have you some idea?

you have a app.css file in yourproject/public/css and app.js file in yourproject/public/js ? — lagbox
– lagbox, Commented Nov 11, 2019 at 23:26
The app.css file is in meetingapp/css/app.css and the app.js is in meetingapp/resources/js/app.js... but even adding the folder resources in the asset doesn't work. — Michele Della Mea
– Michele Della Mea, Commented Nov 12, 2019 at 16:29

Damon · Accepted Answer · 2019-11-12 01:34:08Z

5

I was trying to change the background color of the body in the css file but I noticed that it didn't work.

If this is a fresh install of Laravel, you'll want to run npm install. to install all of the front-end assets (css, js etc). If you have never made any changes to the css or js, in a terminal you'll need to run this command: npm run dev or npm run watch. Here is more documentation for Laravel Mix.

You won't want to touch the actual .css file; it will get overwritten whenever the assets compile. Using the commands above will re-compile all of the .scss files into .css.

Hope this helps!

answered Nov 12, 2019 at 1:34

Damon

4,54415 gold badges65 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michele Della Mea Over a year ago

I installed npm and I made npm run dev ... now the two errors disappear but still the backgroung color of the body remains white. Furthermore now the dropdown menu of the navbar doesn't work... is it maybe a problem with Popper?

Damon Over a year ago

You'll need to change your backround color in resources/sass/app.scss (or in whatever .scss file you are using). Then re-run npm run dev to recompile the css. If you are using Bootstrap, you may need to pull in each component individually. Or check out the docs on how to pull in the full js library from Bootstrap.

George Tiganila Over a year ago

if by any chance you used symlinks to put index.php in your /var/www/your-site make sure to symlink the css and js folders from public to /var/www/your-site as well.

user2644503 · Accepted Answer · 2019-11-12 03:07:57Z

2

You need to compile the assets. (assume you have already installed npm)

Run

npm run prod - if production

OR

npm run dev  - if development

Also you can change the colors in the file resources/sass/_variables.scss before compiling the assets.

answered Nov 12, 2019 at 3:07

user2644503

1,5711 gold badge13 silver badges11 bronze badges

Comments

franksitawa · Accepted Answer · 2022-07-21 08:50:47Z

1

I solved the issue by running the following commands as explained here.

composer require laravel/breeze
php artisan breeze:install
npm install && npm run dev

answered Jul 21, 2022 at 8:50

franksitawa

114 bronze badges

1 Comment

Novartis Nk Over a year ago

thanks for sharing I solved same issue with running those commands

Udhav Sarvaiya · Accepted Answer · 2019-11-12 04:32:32Z

0

This error indicates that the location of app.js and app.css is incorrect:

"Failed to load resource: the server responded with a status of 404 (Not Found)"

Solution:

Make your directory structure is like this for JS: /public/js/app.js

Make your directory structure is like this for CSS: /public/css/app.css

answered Nov 12, 2019 at 4:32

Udhav Sarvaiya

10.2k13 gold badges60 silver badges68 bronze badges

Collectives™ on Stack Overflow

How to fix error 404 with app.js and app.css in Laravel?

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related