Connecting frontend from Vercel

Hi,

Has anyone successfully connected from having their frontend files in Vercel?

Or is there a better way to do this?

Thanks!

Hi @stevencm, welcome to the Render community!

It sounds like some folks in the past have done a similar setup, although we don’t have detailed instructions on how to implement this. Can you tell us a bit more about your app and any issues you’re running into?

Hi Jade,

Thanks for getting back to me!

I’ve managed to connect from Vercel but only using getStaticProps.

However, if I use useQuery from Apollo to query data, that only works on localhost. As soon as I deploy, those pages get the following error:

Network error]: ServerParseError: JSON.parse: unexpected character at line 1 column 1 of the JSON data. Backend is unreachable. Is it running?

Hi @stevencmh, were you able to further inspect the network request via the browser dev tools? It sounds like the response may not be returning JSON. Can you confirm the graphql endpoint is being called correctly?

Hi,

I think it’s ok – I’ve attached it here ?

Thanks @stevencmh - what about the graphql POST request? Second from the bottom in your screenshot.

Hi, please see attached…

Hi, I do receive a CORS error. I was wondering if I could use Render for the frontend as well as the backend but adding my frontend as a static site gave me a ‘Not Found’ error.

When I try to deploy my frontend to Render I get this error: https://number-six.onrender.com/

It looks like your frontend is failing to build because there is no build command - you’ll want to add one under the settings for the service.

For the CORs error you’re seeing, you may need to add a rewrite rule on your frontend with the destination of your API. We have a similar example on our redwood deployment guide.

Hi, thanks! I’ve tried with yarn build but still getting the same error … https://number-six.onrender.com/

Hi @stevencmh, it looks like there is some trouble with identifying your index page. I believe you will either need to add it or specify the publish directory. For Next.js as a static site, this should be out Deploy a Next.js App | Render · Cloud Hosting for Developers

Hi,

Thank you for sending me this link.

I have now tried the advice on that link however that cause a build failed (please see image).

As advised in the log, I have also tried ‘next build’ with ‘out’, and this also fails.

The site has statically rendered on Vercel without any issues and so I am not sure what to do on Render.

Best,

Steven