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

Asked 11/11, 2019 at 23:6 Answered 21/7, 2022 at 8:50

Solved javascript css laravel twitter-bootstrap laravel-6

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?

Rosenthal answered 11/11, 2019 at 23:6 Comment(2)

you have a app.css file in yourproject/public/css and app.js file in yourproject/public/js ? – Tektite 11/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. – Rosenthal 12/11, 2019 at 16:29

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!

Ravi answered 12/11, 2019 at 1:34 Comment(3)

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? – Rosenthal 12/11, 2019 at 16:25

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. – Ravi 12/11, 2019 at 16:50

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. – Leucine 23/2, 2021 at 13:53

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

Run

npm run prod - if production

npm run dev  - if development

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

Foyer answered 12/11, 2019 at 3:7 Comment(0)

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

Ogilvy answered 21/7, 2022 at 8:50 Comment(1)

thanks for sharing I solved same issue with running those commands – Commutual 25/4, 2023 at 6:39

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

Dinodinoflagellate answered 12/11, 2019 at 4:32 Comment(0)

Recommended topics

Hot tags