Laravel error: CSS & JS files not loading in production (7 solutions)

The Problem

Deploying a Laravel application to production often comes with its set of challenges. One common problem developers encounter is CSS and JavaScript files not loading correctly in the production environment. This issue is typically due to asset handling and URL generation within the Laravel framework. This article explores multiple solutions to address this problem, ensuring your assets load as smoothly in production as they do in your local development environment.

Solutions

Verify File Paths

Incorrect file paths are a common mistake that leads to assets not loading properly. Ensuring the correct paths can resolve this issue.

1. Check the public directory in your Laravel project to confirm if the CSS and JS files are present.
2. Verify the file paths referenced in blade templates. The paths should be relative to the public directory.
3. Use Laravel’s asset helper function to generate the correct URLs for your CSS and JS files, for example: {{ asset('css/app.css') }}

Output:

<link href="http://yourdomain.com/css/app.css" rel="stylesheet">

Remember that the asset() function automatically generates a URL for your asset using the current scheme of the request (HTTP or HTTPS).

Clear Cache

Caching mechanisms can sometimes lead to outdated assets being served. Clearing the Laravel cache is an easy and quick way to update the assets that are served.

1. Run the following command to clear the route cache:

php artisan route:cache

2. Clear the configuration cache:

php artisan config:cache

3. Finally, clear the compiled view files:

php artisan view:clear

This sequence of commands refreshes various cached parts of the application which could impact how assets are served.

Use Versioning

Laravel’s asset versioning (Laravel Mix) can be an effective tool to bust the browser’s cache and ensure your users are not served stale content.

1. Install Laravel Mix via npm:

npm install

2. Use the version method in your webpack.mix.js to version your assets:

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .version();

3. To reference these versioned assets in your blade templates, use the following:

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

Output:

<link href="http://yourdomain.com/css/app.css?id=1a2b3c4d" rel="stylesheet">

Applying versioning will append a unique ID to your asset URLs, circumventing any caching issues.

Correct Ownership and Permissions

Incorrect ownership or file permissions within the Laravel directory structure can prevent proper asset loading.

1. Check file ownership and group. Ensure that the web server user (www-data for Apache) owns the files:

sudo chown -R www-data:www-data /path/to/your/laravel/project

2. Set the correct file permissions for directories and files:

sudo find /path/to/your/laravel/project -type d -exec chmod 755 {} \; sudo find /path/to/your/laravel/project -type f -exec chmod 644 {} \;

Ensuring correct permissions will allow the server to correctly access and serve the necessary asset files.

Symlink Storage

If you’re storing assets in the storage directory and linking them to the public directory, ensure the symbolic link exists.

Create a symbolic link by using the following artisan command:

php artisan storage:link

This command will create a storage directory inside public and link it to the storage/app/public directory.

Serving Assets with HTTPS

Mixed content warnings can arise if assets are served via HTTP while the application uses HTTPS. Use secure asset links in production.

Always use the secure_asset() helper function when in a production environment using HTTPS

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

Output:

<link href="https://yourdomain.com/css/app.css" rel="stylesheet">

Using secure_asset() ensures assets are always loaded with HTTPS in a production environment.

Build Tools Configuration

Ensure that your build tools are correctly configured to compile assets and place them in the correct directories.

1. Review your webpack.mix.js file and confirm that the output paths match your project’s directory structure.
2. Compile assets with: npm run production

Correctly setting up build tools can often resolve issues with missing production assets.