Deploying Sanity Studio with ZEIT Now

Learn how to deploy your Sanity Studio with ZEIT Now.

Sanity.io is a platform for structured content with an open source editing environment. Sanity Studio is a single page app 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.

Step 1: Setting Up your Sanity Studio Project

Note: You can skip this step if you already have a project set up.

First, install the Sanity CLI:

npm i -g @sanity/cli

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

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

sanity init

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:

sanity start

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: Preparing for Deployment

To provide ZEIT Now with routing information for the app, add a now.json file with the following content:

{
  "version": 2,
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/index.html" }
  ]
}

An example now.json file that adds routes to the project.

ZEIT Now provides an environment to deploy all types of projects, including static files, making it a good option for deploying your Sanity project with just a single command.

Add the following scripts to the Studio’s package.json file:

{
  ...
  "scripts": {
    "start": "sanity start",
    "test": "sanity check",
    "build": "sanity build public -y"
  }
}

Adding build scripts to your Sanity project's package.json file.

Note: The -y argument in the build accepts the defaults for Sanity's build, otherwise the deployment will hang when Sanity's CLI asks questions.

Lastly, add @sanity/cli as a development dependency, this will allow Now to build your project on deployment.

npm i -D @sanity/cli

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

After saving your package.json file 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, or from a Git repository by installing either the Now for GitHub or Now for GitLab integrations.

To deploy your project from the command line, all it takes is just a single command:

now

Deploying the app with the now command.

Once Sanity Studio is deployed, you will need to add it's URL to Sanity’s CORS origins settings. You can do this from the command line:

sanity cors add https://your-url.now.sh --credentials

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.



Written By
Written by knutknut
on May 30th 2019