Problem 404 css/js files in my Laravel APP php+vite

[NicolasKulka]

Summary

Hello,

I configured the vercel file with the recommendations for Laravel, but I have 404 errors on my files.

Knowing that I use both PHP for Laravel but also Vite to create a react app in Laravel.

I attach part of the file.

So the URLs are like this: /build/assets/app.f9081f27.css

But on the source I see the attached screen, I don't have a build folder, I think that's what is causing the problem.

Locally and in the vercel build, I see the files being created in the public/build/assets folder using "npm run build".

Additional information

"version": 2,
    "builds": [
        { "src": "/api/index.php", "use": "vercel-php@0.5.2" },
        { "src": "/public/**", "use": "@vercel/static" }
    ],
    "roads": [
        {
            "src": "/(css|js)/(.*)",
            "dest": "public/$1/$2"
        },
        {
            "src": "/(.*)",
            "dest": "/api/index.php"
        }
    ],

Example

No response

[NicolasKulka]

+1

[josetorronteras]

Hello @NicolasKulka,

Did you find a solution? I am in the same situation

[NicolasKulka]

I haven't found a solution yet, but i would bé vert interested !

[josetorronteras]

Hello, I have news.

With this configuration, the app.blade.php loads correctly.

{ "version": 2, "functions": { "api/index.php": { "runtime": "vercel-php@0.5.2" } }, "routes": [{ "src": "/(.*)", "dest": "/api/index.php" }], "env": {

and the output now shows the vite compilation.

I am encountering the following error, which I am trying to fix.

Mixed Content: The page at '/' was loaded over HTTPS, but requested an insecure script 'http://XXXX/build/assets/app-2a031ce1.js'. This request has been blocked; the content must be served over HTTPS.

I am working on it.

[josetorronteras]

check this https://calebporzio.com/easy-free-serverless-laravel-with-vercel

[NicolasKulka]

Do you use a preset framework in the configuration of your Vercel project on Vercel?

[josetorronteras]

What do you mean?

[NicolasKulka]

I still have 2 problems, the mixed content http / https and my files are present in the right folder on Vercel, but they come out in 404

[smaeda-ks]

@NicolasKulka Could you please update the current status? What are the remaining issues?

Also, please create a minimal reproducible example repository and share the link:
https://vercel.com/guides/creating-a-minimal-reproducible-example

[NicolasKulka]

@smaeda-ks Reproduce here => https://ecommerce-indol-tau.vercel.app/

1 - Mixed content : http / https, Why ?

2 - I have a 404 on all files, however the build folder is present in the Source > "Output" files that can be seen on the Vercel application, Why ?

[josetorronteras]

I finally got it to work for me. I will upload my configuration later.

[NicolasKulka]

@josetorronteras So, I need your solution

[luckykenlin]

@NicolasKulka @josetorronteras
Same issue here, did you guys have a solution?

[NsonguruaJohnson]

Hi devs, so I found a solution that works for me. It's pattern matching the url of the css and js to know where to look for it in the application folder.

"routes": [
{
"src": "/build(.)",
"dest": "/public/assets/"
},
{
"src": "/(.*)",
"dest": "/api/index.php"
}
],

[NicolasKulka]

@NsonguruaJohnson
Your vercel .json file without env is like this? =>

{ "version": 2, "functions": { "api/*.php": { "runtime": "vercel-php@0.5.2" } }, "routes": [ { "src": "/build(.)", "dest": "/public/assets/" }, { "src": "/(.*)", "dest": "/api/index.php" } ], "public": true, "buildCommand": "vite build", "outputDirectory": "public" }

[NsonguruaJohnson]

This is how mine looks like, it depends on what you're building.

"version": 2,
"functions": {
"api/index.php": { "runtime": "vercel-php@0.5.2" }
},
"routes": [
{
"src": "/build(.)",
"dest": "/public/assets/"
},
{
"src": "/(.*)",
"dest": "/api/index.php"
}
],

[NicolasKulka]

I always have a blank page on my side =>
https://ecommerce-indol-tau.vercel.app/

[NsonguruaJohnson]

Are you building with PHP/Laravel? Have you force connections over HTTPS ?

[NicolasKulka]

That's to say ?

Tell me when you proceed to force the https for example?

And I compile via laravel Quickly

[Jeppenseppiro]

Hello @NicolasKulka , I have finally got my Laravel + Vite webapp working on Vercel.
Thanks to @NsonguruaJohnson for the idea regarding the build routes and I have reconfigured it to my liking.

Github Repo: vercel.json
Vercel webapp: Tempestas

In my routes on vercel.json
"routes": [ { "src": "/build/(.*)", "dest": "/public/build/" }, { "src": "/(.*)", "dest": "/api/index.php" } ],

The src value is my Vercel webapp output
The dest is the Laravel directory

src: /build/(.*) means everything on /build Vercel output folder is passed to dest
dest: /public/build/ means Laravel directory and the src is passed here

With these sequence/pattern, I can even put my images in my public/resources folder and reference that in Vercel src. For example below:
"routes": [ { "src": "/build/(.*)", "dest": "/public/build/" }, { "src": "/resources/(.*)", "dest": "/public/resources/" }, { "src": "/favicon/(.*)", "dest": "/public/favicon/" }, { "src": "/(.*)", "dest": "/api/index.php" } ],

I hope I conveyed my message properly. Lemme know anything else you have questions with. Please correct me if I'm wrong on this. Thank you everyone for the help

[NsonguruaJohnson]

You're welcome @Jeppenseppiro . Kudos.

[LingMyat]

@Jeppenseppiro
@NicolasKulka
@josetorronteras
@RC0D3
@smaeda-ks

hello bro I have some issue on hosting my laravel application on vercel I have logo folder in public/assets folder I can't call img inside of logo folder. Can u help me? here is my folder structure

this is my vercel json file

"builds": [
        { "src": "/api/index.php", "use": "vercel-php@0.7.0" },
        { "src": "/public/**", "use": "@vercel/static" }
    ],
    "routes": [
        {
            "src": "/(css|js)/(.*)",
            "dest": "public/$1/$2"
        },
        {
            "src": "/(.*)",
            "dest": "/api/index.php"
        },
        {
            "src": "/assets/(logos)/(.*)",
            "dest": "/public/assets/$1"
        }
    ],

[Jeppenseppiro]

Hello @LingMyat , it's been a year since I have resolved this issue so my memory may not serve me well now. In the meantime, perhaps you can check my vercel.json of my Vercel app to give you an idea: vercel.json

[NicolasKulka]

@Jeppenseppiro It's ok now for me, thanks a lot.

But i have a last problem :
"Mixed Content: The page at 'https://ecommerce-indol-tau.vercel.app/' was loaded over HTTPS, but requested an insecure stylesheet 'http://ecommerce-indol-tau.vercel.app/build/assets/xxxx.css'. This request has been blocked; the content must be served over HTTPS."

[NsonguruaJohnson]

Hi @NicolasKulka , try this; put the code snippet below in your AppServiceProvider boot method:

if($this->app->environment('production')) {
            \URL::forceScheme('https');
        }

PS: Remember to import the URL facade at the top : use Illuminate\Support\Facades\URL;

[NicolasKulka]

Good, it's ok now, thanks a lot !

[Jeppenseppiro]

You are most welcome @NicolasKulka

[ElvisAns]

I also had the same issue then fixed by adding the following on the app.blade.php file
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Any caveat?

[jornatf]

Hi, I have the same issue with 404 error despite your solutions.

My vercel configuration:

{
    "version": 2,
    "functions": {
        "api/index.php": {
            "runtime": "vercel-php@0.5.2"
        }
    },
    "routes": [
        {
            "src": "/build(.)",
            "dest": "/public/assets/"
        },
        {
            "src": "/favicon/(.*)",
            "dest": "/public/favicon/"
        },
        {
            "src": "/(.*)",
            "dest": "/api/index.php"
        }
    ],
    "env": {
        "APP_ENV": "production",
        "APP_CONFIG_CACHE": "/tmp/config.php",
        "APP_EVENTS_CACHE": "/tmp/events.php",
        "APP_PACKAGES_CACHE": "/tmp/packages.php",
        "APP_ROUTES_CACHE": "/tmp/routes.php",
        "APP_SERVICES_CACHE": "/tmp/services.php",
        "VIEW_COMPILED_PATH": "/tmp",
        "CACHE_DRIVER": "array",
        "LOG_CHANNEL": "stderr",
        "SESSION_DRIVER": "cookie"
    }
}

Build and development settings:

And the Output source after deployment:

Can you have an idea ?

Thx.

[Jeppenseppiro]

Hello @jornatf ,

Your "src": "/build(.)" has no asterisk (*) after the period. Have you tried to change it into "src": "/build/(.*)"?
Adding the asterisk means that it references all files within the build folder

Thanks,
Jeff

[jornatf]

@Jeppenseppiro thank you for your help. It works !

[Jeppenseppiro]

No problem @jornatf , glad it worked for you.

[RC0D3]

Resumo: NÃO USEM VERCEL COM NADA QUE ELA NÃO DÊ DE MÃO BEIJADA
Motivo: Ela é limitada principalmente em documentação, não dá para fazer post nessa bagaça que retor 419 mesmo com csrf token, além do trampo de fazer deploy, mais fácil configurar uma vps que essa porcaria, já tinha preconceito com esses servidores "easy" deploy, agora piorou, te prende ao que eles conseguem te oferecer, se for out of the box, se F$#&!^ ai amigão

[usakhil121]

GET
https://lll-smoky.vercel.app/favicon.ico
[HTTP/2 404 Not Found 0ms]

XHRPOST
https://lll-smoky.vercel.app/livewire/upload-file?expires=1702120026&signature=b9d840dcc4b399f245937302aa8b8514000b9a7995d77d8e79da476dd711cfa7
[HTTP/2 401 Unauthorized 4896ms]

{
"version": 2,
"framework": null,
"functions": {
"api/index.php": {
"runtime": "vercel-php@0.6.0"
}
},
"routes": [
{
"src": "/public/(.\.(css|js))",
"dest": "/public/$1"
},
{
"src": "/build/assets/(.\.(css|js))",
"dest": "/build/assets/$1"
},
{
"src": "/public/storage(.\.(png|jpg))",
"dest": "/public/storage/$1"
},
{
"src": "/(.)",
"dest": "/api/index.php"
}
],
"env": {
"APP_ENV": "production",
"APP_DEBUG": "true",
"APP_URL": "https://lll-smoky.vercel.app",
"APP_CONFIG_CACHE": "/tmp/config.php",
"APP_EVENTS_CACHE": "/tmp/events.php",
"APP_PACKAGES_CACHE": "/tmp/packages.php",
"APP_ROUTES_CACHE": "/tmp/routes.php",
"APP_SERVICES_CACHE": "/tmp/services.php",
"VIEW_COMPILED_PATH": "/tmp",
"CACHE_DRIVER": "array",
"LOG_CHANNEL": "stderr",
"SESSION_DRIVER": "cookie"
}
}
my vercel.json file the issue is unable to upload picture and unable to display it ..... working well on local server
you can check here https://lll-smoky.vercel.app
what i did ,
crated a laravel project
installed jetstream
installed livewire in jetstream
then npm install
npm run build
php artisan migrate (used a mysql server for data save)

login and registration working
unable to upload or view picture
@Jeppenseppiro

[iris-zaf]

i know this is an old post but i hit a wall and cannot deploy my project with vercel. Below it my vercel.json file and the error i get.

`{
"version": 2,
"framework": null,
"functions": {
"api/index.php": { "runtime": "vercel-php@0.3.1" }
},

"routes": [
    {
        "src": "/build/(.*)",
        "dest": "/public/build/"
    },
    {
        "src": "/resources/(.*)",
        "dest": "/public/resources/"
    },
    { "src": "/(.*)", "dest": "/api/index.php" }
],
"env": {
    "APP_ENV": "production",
    "APP_DEBUG": "true",
    "APP_URL": "https://yourproductionurl.com",

    "APP_CONFIG_CACHE": "/tmp/config.php",
    "APP_EVENTS_CACHE": "/tmp/events.php",
    "APP_PACKAGES_CACHE": "/tmp/packages.php",
    "APP_ROUTES_CACHE": "/tmp/routes.php",
    "APP_SERVICES_CACHE": "/tmp/services.php",
    "VIEW_COMPILED_PATH": "/tmp",

    "CACHE_DRIVER": "array",
    "LOG_CHANNEL": "stderr",
    "SESSION_DRIVER": "cookie",
    "APP_NAME": "Laravel",

    "APP_KEY": "base64:sdq4KDNdKLJTvbB0/vky7bE6NO7WWqru5E1XoHJ/eLQ=",
    "APP_TIMEZONE": "UTC",
    "APP_LOCALE": "en",
    "APP_FALLBACK_LOCALE": "en",
    "APP_FAKER_LOCALE": "en_US",
    "APP_MAINTENANCE_DRIVER": "file",
    "APP_MAINTENANCE_STORE": "database",
    "BCRYPT_ROUNDS": "12",
    "LOG_STACK": "single",
    "LOG_DEPRECATIONS_CHANNEL": "null",
    "LOG_LEVEL": "debug",

    "DB_CONNECTION": "mysql",
    "DB_HOST": "127.0.0.1",
    "DB_PORT": "3306",
    "DB_DATABASE": "multi_auth_books",
    " DB_USERNAME": "root",
    " DB_PASSWORD": "4499",
    "SESSION_LIFETIME": "120",
    "SESSION_ENCRYPT": "false",

    "VITE_APP_NAME": "${APP_NAME}"
}

}`
And I get a 404 error