Deploying Sanity Studio with ZEIT Now
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
First, install the Sanity CLI:
npm i -g @sanity/cli
To initiate a new project and download the Studio code to your computer, run the following in the command line:
sanity init
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
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" } ] }
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 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" } }
-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
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 a single command:
now
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
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.