Hosting and deployment

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

The Sanity Studio is a Single Page Application (SPA) built with React. This app will connect to the hosted APIs from the client. This means that you can host the studio from anywhere that can serve a HTML-file. You can deploy it to Sanity’s hosting offer, your own web server, or onto CDN services like Netlify, Zeit’s Now, and Cloudflare Workers.

The studio is compiled to the following structure:

dist
├── index.html
└── static
    ├── css
    │   └── main.css
    ├── favicon.ico
    └── js
        ├── app.bundle.js
        └── vendor.bundle.js

Deploy on *.sanity.studio

You can deploy the studio to our our hosted service using the CLI. It will give you a https://<my-studio>.sanity.studio/ URL. To use it, type:

sanity deploy

If you have not assigned a Studio hostname, you'll be given the option to do so during deploy.

If you want to change the hostname later, or remove the studio from the wen, run sanity undeploy. You will then be prompted again for a hostname if you try to deploy it again.

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 the Studio elsewhere

The Sanity Studio is a client-side web application. It communicates directly with the Sanity APIs and can in theory be hosted anywhere. The Sanity APIs and data are always served by our content APIs. To host Sanity Studio yourself there are a couple of prerequisites:

  1. The server that delivers the Sanity Studio build assets needs to be configured for single-page application routing. Basically, 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.
  2. The domain where the Studio is hosted must be added as a valid domain for the project. The Sanity API ensures that only cross-origin requests with the correct origins are allowed to read and modify data for your project.

If you use our hosting service described above, these things are handled for you.

Specifying the base path

When hosting yourself you might need to change the base path of the studio from / to a path of your choosing. You can do this by specifying a basePath in the sanity.json file found in the root of your project. This will also change the base path of static files.

"project": {
  "name": "<yourProjectName>",
  "basePath": "/<yourBasePath>"
}

Specifying build directory name

First, build your Studio to a static bundle of files. Type sanity build within the project directory to do so. This will (by default) output the files to dist/. 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 that's done, set up a server to host the files. There are many ways to do this - Apache and NGINX are general-purpose webservers 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.

Once you've got your Studio hosted somewhere, you just need to add the hostname to the list of allowed origins for your project using sanity.io/manage (read more on configuring CORS origins here).

You can also build studio in with a continuous integration tool. Add @sanity/cli as a dependency and add the command sanity build as one of the steps.

Deploying in a CI/CD flow

If you want to deploy the studio as part of a continous deployment strategy, you'll want to provide an authorization token using the SANITY_AUTH_TOKEN environment variable. You can create a token that is allowed to deploy studios in the project management dashboard.

Remember to add @sanity/cli as a devDependency:

yarn add @sanity/cli -D

Environment variables

Sometimes you want to override the projectId and dataset specified in sanity.json. You can use environment variables to achieve this.

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 manage.sanity.io/, you can add a custom studio URL in your project settings under General Settings.

Was this article helpful?