Issue deploying Sanity Studio with Next.js app on Vercel

Hi,
I have already sent this message but it was in the wrong channel.

I am trying to deploy 
Sanity.io  studio with my Next.js app. What I want to do is to be able to access Sanity studio through an address www.my-domain.com/admin . What is important, i want to deploy it to Vercel. So basically, it should work after build. I do not have issues with a dev mode (I use concurrently and have my next server at port 3000 and Sanity server at port 3333).
I learned a bit from this GitHub repo 
https://github.com/sanity-io/sanity-nextjs-vercel-example  but it is a bit outdated. NPM have introduced workspaces (so I do not use lerna) and deployment of Next.js apps does not require vercel.json. What is in vercel.json is included in my next.config.js with rewrite function (I am mapping contents of built static Sanity studio site to the admin page).
My problem is that whatever I do, when my Sanity studio static site is generated (including not using next.js) by “sanity build” command what appears is only loading Sanity logo with the title “Connecting to 
Sanity.io ”.
Has anyone had the same problem with the built Sanity static pages? Do you know what should I do to make it work?

Have you added your domain to your allowed CORS origins in sanity.io/manage ?

Hi Racheal,
Yes I did. I tried a built version on localhost:3000 and on vercel and it is always the same after adding CORS domains (I also tried just adding an asterisk as well). Nothing worked.

I forgot to add - in console I receive “Failed to load resource: the server responded with a status of 404 ()“.

What does your client configuration look like?

I do not have any client configuration yet (if by client config you mean this https://www.sanity.io/help/js-client-cdn-configuration ).
I wanted to launch the project with Sanity Studio as one of the subpages of Next.js app. And this is where I am struggling now - to make Sanity Studio work as one of the subpages. I cannot make Sanity Studio work in production mode, after build.

The console.errors I mentioned in the previous message are displayed in the studio subpage (screen attached). This is what happens when I run the command npm run build (or sanity build) and open index.html of a created static page. It happens both locally and on Vercel.

So in other words - sanity starts command works perfectly for me; sanity build command works as well but I cannot make it run properly (I only see what is in the screenshot below).

The repo from my initial message suggests that it is possible to deploy Sanity Studio as part of Next.js app.

(P.S. If I manage to accomplish deployment next.js/sanity app, I will be happy to share it with the community. The sanity repo from my first message is a bit outdated taking into account updates of Next.js and NPM)

I do not have any client configuration yet (if by client config you mean this https://www.sanity.io/help/js-client-cdn-configuration ).
I wanted to launch the project with Sanity Studio as one of the subpages of Next.js app. And this is where I am struggling now - to make Sanity Studio work as one of the subpages. I cannot make Sanity Studio work in production mode, after build.

The console.errors I mentioned in the previous message are displayed in the studio subpage (screen attached). This is what happens when I run the command npm run build (or sanity build) and open index.html of a created static page. It happens both locally and on Vercel.

So in other words - sanity starts command works perfectly for me; sanity build command works as well but I cannot make it run properly (I only see what is in the screenshot below).

The repo from my initial message suggests that it is possible to deploy Sanity Studio as part of Next.js app.

(P.S. If I manage to accomplish deployment next.js/sanity app, I will be happy to share it with the community. The sanity repo from my first message is a bit outdated taking into account updates of Next.js and NPM)

Got it! I understand now. What is the domain you're trying to add it to and does it exactly match what you've added to CORS (meaning it includes

https://

and

www

)? And to clarify something you previously mentioned, it does work on localhost?

Got it! I understand now. What is the domain you're trying to add it to and does it exactly match what you've added to CORS? And to clarify something you previously mentioned, it does work on localhost?

I do not have any client configuration yet (if by client config you mean this https://www.sanity.io/help/js-client-cdn-configuration ).
I wanted to launch the project with Sanity Studio as one of the subpages of Next.js app. And this is where I am struggling now - to make Sanity Studio work as one of the subpages. I cannot make Sanity Studio work in production mode, after build.

The console.errors I mentioned in the previous message are displayed in the studio subpage (screen attached). This is what happens when I run the command npm run build (or sanity build) and open index.html of a created static page. It happens both locally and on Vercel.

So in other words - sanity starts command works perfectly for me; sanity build command works as well but I cannot make it run properly (I only see what is in the screenshot below).

The repo from my initial message suggests that it is possible to deploy Sanity Studio as part of Next.js app.

(P.S. If I manage to accomplish deployment next.js/sanity app, I will be happy to share it with the community. The sanity repo from my first message is a bit outdated taking into account updates of Next.js and NPM)

Oh and one other thing: when you added the domain, did you allow credentials?

Oh and one other thing: when you added the domain, did you allow credentials?

Got it! I understand now. What is the domain you're trying to add it to and does it exactly match what you've added to CORS (meaning it includes

https://

and

www

)? And to clarify something you previously mentioned, it does work on localhost?

What works:• sanity start on localhost:3333
What does not work
• sanity build on localhost:3000, *.
vercel.app , by just opening index.html fileI tested CORS domains:
•
http://localhost:3000 • my
vercel.app domain (with https)• * (asterix - which I think allows all the domains?_
Every time I allowed credentials.

Are you sure the problem will be CORS? Wouldn’t CORS error be displayed in console.error instead of 404 error? I am using Sanity the first time, so i am a bit confused about it.

What works:• sanity start on localhost:3333
What does not work
• sanity build on localhost:3000, *.
vercel.app , by just opening index.html fileI tested CORS domains:
•
http://localhost:3000 • my
vercel.app domain (with https)• * (asterix - which I think allows all the domains?_
Every time I allowed credentials.

Are you sure the problem will be CORS? Wouldn’t CORS error be displayed in console.error instead of 404 error? I am using Sanity the first time, so i am a bit confused about it.

Oh and one other thing: when you added the domain, did you allow credentials?

It looks to me like the Sanity is rejecting your attempts to access the Studio because you don't have proper permissions and is throwing a 404.

It looks to me like the Sanity is rejecting your attempts to access the Studio because you don't have proper permissions and is throwing a 404.

Oh ok.
So what I have done so far was:
1. Creating an account on Sanity
2. Sanity init
3. Sanity start
4. Sanity build
5. Added CORS domains
I repeated 3, 4 and 5 many times in different orders.

Have I missed any steps? Should the index.html created in dist just run without doing anything else?

(I always delete/replace the old sanity dist folder)

Let me run through the steps in that repo and see if I can replicate what you're getting.

It looks to me like the Sanity is rejecting your attempts to access the Studio because you don't have proper permissions and is throwing a 404.

There is also another thing - when I launch static files with sanity studio - I have not logged in there to anything. The page from the screenshot I have sent to you appears in the very beginning, not letting me to log in.

While if I run sanity start, it asks me to log in first

Hi any updates?

Hi any updates?

Hi I found what the problem was.
The problem was the wrong path for serving other files than .html (css file and js files). After the files get generated

In the first GitHub repo in sanity.json there is an basePath element which has the value ‘/studio’. I accidentally omitted this part.

Thanks for the update !

Thank you After solving this issue I have another problem 😅 But I will post it as another message.
When I manage to go through it, I will be very happy to share my code with the community on
Sanity.io Github. This repo https://github.com/sanity-io/sanity-nextjs-vercel-example seriously requires some changes.
How can I try to contribute my code? Directly on GitHub or do I need to speak with someone before? (Sorry never contributed to any open source project)

Thank you After solving this issue I have another problem 😅 But I will post it as another message.
When I manage to go through it, I will be very happy to share my code with the community on
Sanity.io Github. This repo https://github.com/sanity-io/sanity-nextjs-vercel-example seriously requires some changes.
How can I try to contribute my code? Directly on GitHub or do I need to speak with someone before? (Sorry never contributed to any open source project)

No need to speak with anyone beforehand, you can go ahead and submit a pull request directly to the repo. There's a pretty straightforward walkthrough on this process if you're new to it here .
It is definitely out of date and I'm not sure how actively maintained it is. We'll probably stop directing people to it until we can update it. Do you remember where you found the link to it?

No need to speak with anyone beforehand, you can go ahead and submit a pull request directly to the repo. There's a pretty straightforward walkthrough on this process if you're new to it here .
It is definitely out of date and I'm not sure how actively maintained it is. We'll probably stop directing people to it until we can update it. Do you remember where you found the link to it?