Assets folder missing for sub project

[jeryjs]

I’ve setup my vercel.json to run the backend, and 2 frontends in a single project.
the backend and the user frontend are working fine. However, the admin frontend always shows blank page.

Upon checking the dev tools, i noticed that the index.html for adminview (when im on ‘/admin’) is loaded fine, but when it tries to access its css and js assets (the one auto generated by npm build), its getting a 404.
In the sources tab I can see that there isn’t any assets folder while the userview had a assets folder (with js and css) beside its index.html file.

Here’s my vercel.json file:

{
    "version": 2,
    "builds": [
        {
            "src": "backend/index.js",
            "use": "@vercel/node"
        },
        {
            "src": "userview/package.json",
            "use": "@vercel/static-build",
            "config": {
                "outDir": "./userview/dist"
            }
        },
        {
            "src": "adminview/package.json",
            "use": "@vercel/static-build",
            "config": {
                "outDir": "./adminview/dist"
            }
        }
    ],
    "routes": [
        {
            "src": "/api(/?.*)",
            "dest": "/backend/index.js"
        },
        {
            "src": "/admin(/?.*)",
            "dest": "/adminview/$1"
        },
        {
            "src": "/(.*)",
            "dest": "/userview/$1"
        }
    ]
}

here, in the screenshot, the userview is working fine and the assets folder is present.

And here, this is the ‘/admin’ page, which is a blank screen and the assets folder is not there.

[system]

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are many possible causes, and the absence of something can be tricky debug if you don’t know where to look. Here are some things you can do to find the cause and fix it. Debugging Tips Check the error code If you see a mostly white screen with 404: NOT_FOUND along with a Code and and ID then you can click the blue info box below the error deta…

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

[amyegan]

Welcome to the community, @jeryjs!

Things can get tricky to build and debug if you’re trying to serve two frontends and a backend together in one project. We recommend separating each part into its own project and configuring the domain so they look like they’re all deployed as a single project.

This guide can help: How can I serve multiple projects under a single domain?

[jeryjs]

Thank you for the response.
I did refer to that link b4, but didnt want to create another project just for it.
However I was able to successfully get it working by setting

export default defineConfig({
  ...
  base: '/admin/',  
}

in ‘adminview/vite.config.js’

and

 "routes": [
        {
            "src": "/api(/?.*)",
            "dest": "/backend/index.js"
        },
        {
            "src": "/admin/assets/(.*)",
            "dest": "/adminview/assets/$1"
        },
        {
            "src": "/admin(/?.*)",
            "dest": "/adminview/$1"
        },
        {
            "src": "/(.*)",
            "dest": "/clientview/$1"
        }
    ]

in vercel.json

[amyegan]

Thanks for coming back to share your solution!