Hosting and deployment

How to deploy Sanity Studio, either on your own or using our hosted service.

Sanity Studio is a React web application you use to manage content on the Sanity platform. We can host this web application for you, giving you a nice my-company.sanity.studio URL.

Since the Studio runs in the browser and communicates with the Sanity API it is also easy to host yourself or with your favorite hosting service. You can even deploy multiple Studios for the same project. This is useful for managing separate environments like testing and staging, or if you have multiple publications or markets you manage with separate datasets.

Hosting with Sanity

sanity deploy

Running this command from your Studio folder builds and deploys your Studio, making it available on a *.sanity.studio URL. When you first deploy you are asked to choose a unique hostname for your Studio. If you want to change the hostname later or remove the Studio from the web, run sanity undeploy. The next time you deploy you may choose a new hostname. Hosting with Sanity is currently limited to 1 Studio per project.

Gotcha

The sanity deploy command works by building the source files in your studio project to static files, which is then uploaded and served from your chosen sanity.studio domain.

Note that there's no authentication involved when serving the built source files, so make sure to not include any sensitive data in your studio code (schema files, package.json, config files, custom inputs, etc).

Hosting yourself

Since the Studio consist of static HTML, CSS and Javascript files and communicates with Sanity through our HTTP API, it can be hosted anywhere. Popular hosting services like Vercel and Netlify make this easy and can automatically deploy new versions of your Studio when you push it to code repositories like GitHub. Our starter projects are set up in this way.

There are two things you need to make sure of when hosting the Studio yourself or with a service

  1. The server that delivers the Sanity Studio files needs to be configured for single-page application routing. This means if the requested URL path doesn't exist on the filesystem, it should serve index.html to allow the frontend router to handle the request. Most hosting services will have configuration options for this.
  2. The domain where the Studio is hosted must be added as a valid domain for the project. For security, the Sanity API ensures that only approved Studios are allowed to communicate with your project. This is in addition to other security measures such as user authentication, private datasets and custom access rules.

If you host with Sanity this is handled for you. If your host does not support single-page-application routing, you can add a redirect rule to make sure non-existent paths are redirected properly. Check the documentation for your provider or server software.

Specifying the base path

Normally the Studio expects to be hosted at the root level of its hostname, for instance https://example.com/. You can change this by configuring the basePath in the sanity.json file in the root of your Studio project.

"project": {
  "name": "My example project",
  "basePath": "/studio"
}

The Studio can now be served from https://example.com/studio. This will also change the base path of static files.

Building the Studio for hosting

Run the command sanity build from the Studio folder to generate the files for hosting. This will output the files to the dist/ directory by default. Sometimes your environment requires another directory name, for instance public. You can specify this by entering the desired name in the build command

sanity build public

Once the build is complete the directory can be hosted from any web server. There are many options - Apache and NGINX are popular web servers that can be configured to serve single-page applications with a bit of URL-rewriting.

Another option is to use Node.js to serve the bundle. You'll find a simple example using Node and Express to serve the bundle on GitHub.

Hosting with Sanity in a CI/CD flow

You can host with Sanity automatically with continuous integration tools. This is convenient for automatically updating the hosted Studio when you push your local changes to source repositories, or do manual releases. Add @sanity/cli as a development dependency and configure your CI/CD workflow to run the command sanity deploy.

You also need to provide an authorization token using the SANITY_AUTH_TOKEN environment variable. This is because deploying with sanity deploy uses your local user session for authenticating with our hosting service, which won't necessarily be available in your CI/CD workflows. You can create a deploy token in the project management dashboard at https://manage.sanity.io.

Environment variables

Sometimes you want to configure the projectId or dataset specified in sanity.json at build time. This is useful for building multiple Studios from the same schema and code to facilitate different environments. See the documentation on environment variables for your options.

GraphQL

How to deploy the GraphQL APIs is covered in its own section.

Configuring the studio URL displayed on sanity.io/manage

To change the displayed studio URL on sanity.io/manage you can add a custom studio URL in your project settings under Settings.

Was this article helpful?