Help configure vercel.json config for laravel app. Can't access media files in public

[h33k]

Hello! I deploy my laravel app on vercel but I’m struggling with routes config setup in vercel.json. The problem is that I can’t access media files in my laravel public folder but the app is working fine. I tried many options but most of them didn’t work.

In vercel settings I override output directory to “public”.

Thanks.

# vercel.json routes
"routes": [
        { "src": "/build/(.*)", "dest": "/public/build/$1" },
        { "src": "/resources/(.*)", "dest": "/public/resources/$1" },
        { "src": "/favicon/(.*)", "dest": "/public/favicon/$1" },
        { "src": "/(.*)", "dest": "/api/index.php" }
    ],

[pawlean (Pauline P. Narvas)]

Hi, @h33k! Welcome to the Vercel Community

Let’s simplify your vercel.json routes. Perhaps something like:

  "routes": [
    { "src": "/(css|js|images|fonts|favicon)/(.*)", "dest": "/public/$1/$2" },
    { "src": "/(.*)\\.(.+)$", "dest": "/public/$1.$2" },
    { "src": "/(.*)", "dest": "/api/index.php" }
  ],

1. The first route handles common static asset directories (css, js, images, fonts, favicon).
2. The second route catches any file with an extension, directing it to the public folder.
3. The last route sends all other requests to the Laravel application.

This should allow Vercel to serve your static files directly from the public directory while still routing other requests to your Laravel application.

To make sure this works correctly, please ensure that:

1. Your public directory is at the root of your project (same level as vercel.json).
2. Your Laravel application is set up to use public as the web root.
3. In your Laravel application, when referencing assets, use relative paths or the asset() helper function.

For example, in your Blade templates, use:

 <img src="{{ asset('images/logo.png') }}" alt="Logo"><img src="{{ asset('images/logo.png') }}" alt="Logo">

Instead of:

 <img src="/images/logo.png" alt="Logo"><img src="/images/logo.png" alt="Logo">

This ensures that Laravel generates the correct URLs for your assets, taking into account the base path of your application.

Let us know how you get on!

[h33k]

Thanks for your reply! I tested your code and I was able to reach media files but for some reason when I send a form in my app it does not respond but a question mark is added to the url. But I managed to find a solution anyway!

{
            "src": "/(css/)?([a-zA-Z0-9_\\-]+\\.(ico|txt|webp|css|js|png|jpg))$",
            "dest": "/public/$1$2"
},

Works fine for now. ps ‘css’ is the only subfolder in my app.

Thanks again.

[pawlean (Pauline P. Narvas)]

Great to hear you managed to find a solution, @h33k! Appreciate you coming back to share it with the rest of the community.