App.css and App.js still not found in laravel 9 after npm run dev
Stefan Bogdanescu
Founder & Senior Architect · 2026-06-29
# Solving the Asset Loading Mystery: Why `app.css` and `app.js` Disappear After `npm run dev` in Laravel
Welcome to the world of modern Laravel development! As you dive into framework documentation, it’s common to encounter roadblocks, especially when dealing with asset bundling tools like Vite and package installations. The issue you are facing—where scaffolding commands run successfully but the resulting CSS and JavaScript files cannot be found (resulting in 404 errors)—is a very common stumbling block for newcomers.
As a senior developer, I can tell you that this problem is rarely about the framework itself; it’s almost always about how the build tool (Vite) is configured to handle asset paths and entry points within your specific project structure. Let's dissect why this happens and how we fix it.
## The Root Cause: Vite and Asset Bundling in Laravel
When you run `npm run dev`, you are invoking the Vite development server, which compiles your source files (like your main CSS and JS) into assets that the browser can request. In modern Laravel applications, these assets are typically loaded via a public path defined by Vite, not directly from the standard `public` folder in the way older setups did.
When you run commands like `php artisan ui bootstrap`, it places the necessary files, but if the underlying asset configuration hasn't correctly pointed to where Vite is outputting these compiled files, the browser simply cannot locate `app.css` or `app.js`. This often happens because the scaffolding setup assumes a default structure that conflicts with your specific environment configuration.
## Step-by-Step Troubleshooting and Solution
The sequence of commands you used (`composer require`, `php artisan ui`, `npm install`, `npm run dev`) is generally correct for bootstrapping a fresh Laravel project, but asset linkage requires an extra layer of verification.
Here is the definitive troubleshooting path to resolve your 404 error:
### 1. Verify the Vite Configuration
The most likely culprit lies within your Vite configuration file, typically located at `vite.config.js`. You need to ensure that Vite knows exactly where to look for source files and where to output the final bundled assets. For standard Laravel setups, this configuration usually points to `resources/js` and `resources/css`.
Ensure your `vite.config.js` file looks something like this (this is a common starting point):
```javascript
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css', // Ensure this path matches your actual CSS file location
'resources/js/app.js' // Ensure this path matches your actual JS file location
],
}),
],
});
```
If you are using older scaffolding or custom package installations, double-check that the paths specified in the `input` array exactly match where your `app.css` and `app.js` files reside within the `resources` directory. Remember, understanding the underlying architecture is crucial when building robust applications on Laravel, as discussed extensively in official documentation like that provided by [laravelcompany.com](https://laravelcompany.com).
### 2. Confirm File Placement
Ensure that the actual source files (`app.css` and `app.js`) exist in the directories specified by your configuration (e.g., `resources/css/` and `resources/js/`). If they were placed elsewhere during the scaffolding process, Vite will fail to find them.
### 3. Re-run Setup Commands
After making any changes to `vite.config.js`, always clear the cache and re-run the full sequence:
```bash
npm install
npm run dev
```
This forces Vite to re-read the configuration and attempt a fresh compilation, which often resolves transient pathing errors.
## Conclusion
The issue of missing assets after running `npm run dev` is a classic case of misaligned asset pipeline configuration rather than a failure in the installation process itself. By focusing on the Vite configuration—specifically ensuring that your entry points are correctly mapped to your source files within the `resources` directory—you can successfully resolve these 404 errors. Keep honing your understanding of Laravel’s ecosystem, and you will find that debugging these asset pipelines becomes second nature!