Assets folder missing for sub project

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.

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.

https://community.vercel.com/t/debugging-404-errors/437

Vercel Community

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...

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

Vercel Staff

Welcome to the community, !

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: https://vercel.com/guides/how-can-i-serve-multiple-projects-under-a-single-domain

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

Vercel Staff

Thanks for coming back to share your solution!

This topic is closed. It no longer accepts new replies.

{ "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" } ] }

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