Getting 404 error in my client side when I deploy to vercel

[dantakelly]

Summary

Hey guys, Kelly here. I'm developing a chat app called Social-Flow. I've deployed both the client and server sides of this app to Vercel. The server side is built with Node/Express, and the client side uses Next.js. I've configured the server side using vercel.json, and it's working fine. However, the client side is giving me a 404 error with the code: NOT FOUND.

After some research, I found that I need a vercel.json file for the client side as well. Initially, I added this configuration based on my research:

{
"routes": [
{
"src": "/[^.]+",
"dest": "/"
}
]
}

But Vercel support suggested I use the following instead:

{
"rewrites": [
{
"source": "/(.*)",
"destination": "/index"
}
]
}

Despite these changes, I'm still getting the 404 error. Does anyone know what I should do? The issue is with the client side when I launch it on Vercel, not the server side. I made sure that the root directory is set to the client side when deploying to Vercel.

Example

No response

Steps to Reproduce

Code in the client side verce.json file

code from research

{
"routes": [
{
"src": "/[^.]+",
"dest": "/"
}
]
}

code from vercel support ai

{
"rewrites": [
{
"source": "/(.*)",
"destination": "/index"
}
]
}

[dantakelly]

I then added this code that now shows the client side but the css is not in only the html - {
"version": 2,
"builds": [
{
"src": "package.json",
"use": "@vercel/next"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/"
}
]
}
Any help?

[pawlean]

Hi @dantakelly!

Have you tried going onto your project settings? Under "Root Directory", you may specify the right destination.

[dantakelly]

I got it to work! I had to redeploy though. Thank you!

…

On Mon, Jul 1, 2024, 2:29 AM Pauline P. Narvas ***@***.***> wrote: Hi @dantakelly <https://github.com/dantakelly>! Have you tried going onto your project settings? Under "Root Directory", you may specify the right destination. — Reply to this email directly, view it on GitHub <#7335 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BD3LYFM5XOJTV6Y3OB4NITTZKEAMJAVCNFSM6AAAAABKEGL2L2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TSMRSGM2DA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[pawlean]

Thanks for coming back here! What were the steps that you took?

[dantakelly]

I navigated to the root directory and modified the settings to client-side deployment. However, the initial deployment attempt was unsuccessful, so I repeated the process to ensure a successful outcome.

[github-actions[bot]]

This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community