Discussion on deploying Sanity Studio to Google App Engine

25 replies
Last updated: May 4, 2021
Anyone know where I can find a tutorial or even just an example app.yaml for deploying sanity studio to google app engine?
AI Update

While there isn't an official Sanity guide specifically for Google App Engine deployment, I can help you piece together what you need. Sanity Studio is a React Single Page Application (SPA) that builds to static files, so deploying it to App Engine is definitely possible.

First, you'll need to build your Studio. Run sanity build (or npm run build) in your Studio directory, which creates a dist folder containing your static files.

Here's an example app.yaml for deploying Sanity Studio to Google App Engine standard environment:

runtime: nodejs20  # or nodejs22 if supported
service: default

handlers:
  # Serve static files from the dist directory
  - url: /static
    static_dir: dist/static
    secure: always

  # Serve other static assets
  - url: /(.*\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot))$
    static_files: dist/\1
    upload: dist/.*\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$
    secure: always

  # Catch-all handler for SPA routing - serve index.html
  - url: /.*
    static_files: dist/index.html
    upload: dist/index.html
    secure: always

The key here is the catch-all handler at the end, which ensures that all routes serve index.html - this is essential for SPA routing to work correctly.

Important considerations:

  1. CORS Configuration: After deploying, you'll need to add your App Engine URL to your Sanity project's CORS origins. Go to manage.sanity.io, select your project, navigate to API settings, and add your appspot.com URL.

  2. Alternative: Use sanity deploy: The recommended approach is actually to use sanity deploy, which hosts your Studio on Sanity's infrastructure at your-hostname.sanity.studio. This includes automatic SSL, schema deployment for AI features, and no CORS configuration needed.

  3. Build output: Make sure your dist folder exists before deploying. The build command generates this directory with all your Studio's compiled assets.

If you're set on App Engine for specific infrastructure reasons, the app.yaml above should work. Just make sure to test the deployment and verify that client-side routing works correctly by navigating to different Studio paths directly.

The closest I could find was the example discussed here for an App Engine deployment. Apologies if it’s not relevant but hopefully it can provide a starting point.
I think I’m stuck on the part where I need to add a CORS origin. I tried following this and added the domain of our running service, but I’m only seeing
Connecting to <http://Sanity.io|Sanity.io>
loading forever.
Do you happen to get any errors or warnings in the browser?
i get 500s for the css and js bundles
for the first get on the domain i get
304
And in headers it says
*Referrer Policy:* strict-origin-when-cross-origin
Okay, thank you. I’ve requested help from up the chain.
oh i think i see the issue. in app engine logs there’s
sh: 1: exec: sanity: not found
i bet it’s not installing sanity cli the way it needs to in order to run
sanity start
i need to try hosting just the static dist files, not building up in the cloud. i think i can take a shot at this
Ahh, good find. I saw a case yesterday that needed
@sanity/cli
installed as a dev dependency and bet that's the case here too.
Or that too.
This is just hosting the built static files on app engine, so no server at all. I guess cost wise it would be cheaper to just upload them to a bucket 😅
user P
I have nodejs as my runtime; should I change that to python?
sec, need to read up on the nodejs runtime on gcp. All you need is the static hosting option
https://cloud.google.com/appengine/docs/standard/nodejs/config/appref looks like you can do the same with node, lets see
i don’t know if it’s the same for python, but deploying a node project to app engine causes app engine to run whatever is in
npm start
by default
which is
sanity start --port=8080
for me, which is probably why it needs the cli
aha, that might break things, depending on which port app engine expects the app to listen on
aha, that might break things, depending on which port app engine expects the app to listen on
app engine expects 8080 by default
Ok, I’m almost there. When I connect to /desk it loads fine. I think I just need to fix up my handler for the root
/
and I’ll be good to go.
Thanks!
Ok, I’m almost there. When I connect to /desk it loads fine. I think I just need to fix up my handler for the root
/
and I’ll be good to go.
Ah, sorry. Was waiting for the app update to succeed 🙂 Got this to work: https://gist.github.com/sgulseth/8b342e1427adf83378009c2c6c7761d9

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?