Deploying Sanity Studio with Surge
Deploying Sanity Studio with Surge.
Rishi Raj Jain
July 03, 2021
Deploying Sanity Studio with Edgio
Sanity Studio is a single page app (SPA) written in React, where you can configure the document types and input fields, with simple JavaScript objects. This guide will walk you through how to deploy Sanity Studio with Edgio in four simple steps.
Warning
This guide contains code examples for an older version of Sanity Studio (v2), which is deprecated.
Learn how to migrate to the new Studio v3 →
NOTE: You can skip this step if you already have a project set up.
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
First, install the Edgio CLI:
npm i -g @edgio/cli
To add Edgio to an existing app, run the following:
edgio init --connector=@edgio/sanity-studio
The above command creates `routes.ts` and `edgio.config.js`.
To preview production app locally run:
edgio build && edgio run --production
To deploy run:
edgio deploy
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.layer0-limelight.link --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.
Find the GitHub Repo containing the entire setup at edgio-docs/edgio-sanity-studio-example
Sanity – build remarkable experiences at scale
Sanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators that’s easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.
Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.
Other guides by author