Deploying Sanity Studio with Now

Sanity.io is a platform for structured content with an open source editing environment. Sanity Studio is a single page application written in React, where you can configure the document types and input fields, with simple JavaScript objects. The Studio connects to Sanity’s hosted real-time APIs. You can also customize the Studio with your own input components, plugins, and tools.

This guide will walk you through how to deploy Sanity Studio with Now in three simple steps. It will also cover how to deploy the Studio in a monorepo.

Step 1: Setting Up your Sanity Studio Project

First, install the Sanity CLI:

Adding the Sanity CLI as a global package to enable use of the sanity command.

To initate a new project and download the Studio code to your computer, run the following in the command line:

Initiating a new Sanity project.

The Sanity CLI will walk you through the necessary steps to set up a project, letting you choose a schema template. When you're done with these steps, the CLI will download the source code and configuration to get you started. To start a local development server, cd into the project folder and run the following command:

Starting a local development server for Sanity Studio.

Check out Sanity’s documentation to learn more about how to configure and customize the Studio.

Step 2: Getting Ready to Deploy With Now

Now provides an environment to deploy all types of projects, including static files, making it a good option for deploying your Sanity project. With a simple now.json file, you will be able to deploy your project with just a single command.

To get your project ready for deployment, add a now.json file at the root of your project directory with the following code:

{
  "version": 2,
  "name": "sanity-studio",
  "builds": [{ "src": "package.json", "use": "@now/static-build" }],
  "routes": [
    { "src": "^/static/(.*)", "dest": "/static/$1" },
    { "src": "^/(.*)", "dest": "/index.html" }
  ]
}

An example now.json file for your Sanity project.

The Builder will look for an npm script called now-build, you should add this to the scripts part of the Studio’s package.json file:

// ...
"scripts": {
  "start": "sanity start",
  "test": "sanity check",
  "now-build": "sanity build"
},
// ...

An example package.json file for your Sanity project.

Lastly, add @sanity/cli as a development dependency, so that the Now Builder installs the dependencies it needs to run the sanity build script on deployment:

Adding the Sanity CLI to the project as a development dependency.

After saving your now.json and package.json files you will be ready to deploy your project.

Step 3: Deploy With Now

You can choose whether you want to deploy the Studio directly from the command line by running the now command, or from GitHub by installing Now for GitHub. When Sanity Studio is deployed successfully, you will need to add it's URL to Sanity’s CORS origins settings. You can do this from the command line:

Adding CORS credentials to your Sanity project.

Alternatively, you can navigate to manage.sanity.io, find your project and under Settings > API, add the Studio URL to the CORS origins list. You should allow credentials as the Studio requires authentication for added security whereas most frontends do not.

Bonus: Deploying Sanity Studio In a Monorepo

Many teams are more effective when all their code is in one place. Using the monorepo approach with Now is simple with some small changes to your now.json and sanity.json files. Say you have your JavaScript frontend in /web, your Go API in /api and Sanity Studio in /studio. Your now.json configuration should look something like this:

{
  "version": 2,
  "name": "web-and-studio",
  "builds": [
    { "src": "api/*.go", "use": "@now/go" },
    { "src": "web/package.json", "use": "@now/node" },
    { "src": "studio/package.json", "use": "@now/static-build" }
  ],
  "routes": [
    { "src": "^/studio/static/(.*)", "dest": "/studio/static/$1" },
    { "src": "^/studio/(.*)", "dest": "/studio/index.html" },
    { "src": "^/api/(.*)", "dest": "/api/$1" },
    { "src": "^/(.*)", "dest": "/web/$1" }
  ]
}

An example now.json file for a monorepo Sanity project.

Since we are now accessing the studio at your-url.now.sh/studio, we need to tell the studio that it runs in a subfolder. This is done by adding a basePath property to sanity.json:

//...
"project": {
    "name": "my-sanity-studio",
    "basePath": "/studio"
},
//...

An example sanity.json file in a Sanity project.

Resources

For more information on working with Sanity Studio, please refer to their documentation.

To configure Now further, please see these additional topics and guides: