Assets folder missing for sub project

Help
,
1

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.

image
image832×223 17.3 KB

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

image
image1197×266 25.5 KB

2

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.

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

3

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?

4

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

5

Thanks for coming back to share your solution!