How to fix /livewire/livewire.js 404 Laravel Livewire on Cloud Run

Deploying Laravel applications to production on platforms like Cloud Run can sometimes expose subtle issues that don't appear in your local development environment. One common issue is when dynamic asset routes—like those used by Laravel Livewire—are mistakenly processed as static files by nginx, leading to 404 errors. In this article, we will explore the root cause of the problem and provide a solution to ensure your Laravel application runs smoothly on Cloud Run.

The Root Cause: Static Asset Configuration

A typical nginx configuration for Laravel applications includes a block that matches requests for static CSS and JavaScript files:

1# CSS and Javascript
2location ~* \.(?:css|js)$ {
3    expires 10m;
4    access_log off;
5    etag on;
6    add_header Cache-Control "public";
7}

This block is designed to serve static assets efficiently by setting appropriate cache headers. However, the same rule inadvertently applies to dynamic routes that end with .js or .css. For example, Laravel Livewire serves its JavaScript asset through a dynamic route (/livewire/livewire.js). Since the file is not physically present on disk, nginx treats it as a static file and returns a 404 error.

How Dynamic Asset Routing Gets Interfered

When a request is made to /livewire/livewire.js, the generic CSS/JS location block takes precedence because it matches the file extension. Rather than passing the request to Laravel’s routing engine, nginx tries to locate a static file, causing it to return a 404 error instead of routing the request to Laravel to generate the dynamic asset.

This issue isn’t unique to Livewire. Other packages that serve assets dynamically, like the l5-swagger package, can also encounter similar problems. l5-swagger serves its JavaScript and CSS assets through dynamic Laravel routes, and the same nginx misconfiguration can result in 404 errors when attempting to load those assets.

The Fix: Prioritizing Dynamic Routes

To resolve this issue, you need to adjust your nginx configuration to ensure that dynamic routes are processed correctly. Specifically, you must add a location block for the dynamic asset, which must be placed above the generic static asset rule. This ensures that nginx will first check for the dynamic route before attempting to serve it as a static file.

Recommended nginx Configuration

Here’s how you can modify your nginx configuration to handle dynamic assets correctly:

1location = /livewire/livewire.js {
2    expires off;
3    try_files $uri $uri/ /index.php?$query_string;
4}

Key Points:

• Explicit Match: The location = /livewire/livewire.js directive ensures this rule only applies to the exact dynamic route.
• Bypassing Static Handling: The try_files directive instructs nginx to check for the static file first and, if not found, pass the request to index.php, allowing Laravel to handle it dynamically.
• Cache Control: The expires off; directive ensures the asset isn’t cached improperly by the browser.

By explicitly defining this route in your nginx configuration, you can prevent nginx from treating dynamic assets like /livewire/livewire.js as static files and ensure that Laravel can generate the necessary JavaScript.

Best Practices for Production Deployments

• Align Local and Production Configurations: Ensure that your local development environment closely matches your production environment. Differences in nginx configuration can lead to issues like the one described above.
• Review nginx Rules Carefully: Always check that your static file handling rules don’t interfere with dynamic asset routes. Explicitly route requests for dynamic assets like Livewire’s /livewire/livewire.js or l5-swagger’s assets to Laravel’s routing system.
• Test Dynamic Assets Thoroughly: Make sure all dynamic assets, including JavaScript and CSS files served through Laravel routes, are functioning as expected in your production environment.
• Monitor Logs: Use proper logging configurations (e.g., access_log /dev/stdout combined;) to quickly identify 404 errors and other issues in production.

Conclusion

The 404 error for /livewire/livewire.js on Cloud Run is a common problem caused by nginx misinterpreting dynamic assets as static files. By adjusting your nginx configuration to explicitly route requests for dynamic assets to Laravel, you can resolve the issue and ensure that assets like Livewire's JavaScript or those served by the l5-swagger package are handled correctly.

By following best practices and keeping your nginx configuration in check, you can avoid this pitfall and maintain a smooth production environment for your Laravel applications.

Happy coding!