Conclusion

In most cases, running the command

npm run watch

should resolve the issue.

When it Still Doesn't Resolve

If CSS or JS files are not in public, it will show as NotFound

The Laravel asset() function looks for files based on public/.

In other words, writing

{{ asset('/css/app.css') }}

is loading the CSS files located under public.

Confusion with resources directory containing CSS and JS

As mentioned earlier, if CSS and JS files are properly located under public, there should be no 404 errors.

However, in the initial state, Laravel does not have CSS and JS files under public. Instead, CSS and JS files are located in the resources directory.

About laravel-mix

What is the npm run watch command?

This command generates JS and CSS files in public based on the CSS and JS files in resources.

(It is a development command that not only generates but also rebuilds new files whenever there are changes in resources)

You need to write the build settings in webpack.mix.js

When you create a Laravel project, you normally have a file called

webpack.mix.js

In that file, there are initial settings like

const mix = require("laravel-mix")

mix
  .js("resources/js/app.js", "public/js")
  .sass("resources/sass/app.scss", "public/css")

This configuration means that the contents written in resources/js/app.js are built and output to public/js/app.js.

Similarly, the contents written in resources/sass/app.scss are built and output to public/css/app.css.

Because of this configuration,

npm run watch

will generate files in public when executed.

npm run dev results in a similar outcome

npm run dev

This command builds once without continuously monitoring changes in resources.

Summary

Understanding why app.js and app.css show as 404 NOT FOUND is one of the paths beginners in Laravel often encounter. I mentioned Laravel Mix as an addition, which might make things easier later on!

For complaints or feedback, please contact me through DM on Twitter.

That's all for now!