Setup and development

Follow along as we bootstrap a new app using the Sanity Software Development Kit (SDK)

In this article we will go through the process of setting up a complete App SDK development environment. We'll create a new SDK app, configure it to work with our example movie dataset, and get familiar with the basic project structure. By the end of this article, you'll have a working development environment ready for building custom Sanity applications. We'll cover:

• Creating a new SDK app using the quickstart template
• Configuring the app to connect to your Sanity project
• Understanding the basic application structure
• Running the development server
• Making your first changes to the app

Whether you want to follow along and set up a new Sanity project with some example data, or want to jump straight to the section on bootstrapping a new SDK app, your next step will be to open your terminal and interact with the sanity Command Line Interface (CLI).

The power of the App SDK is more easily demonstrated when working with an actual real-life Sanity project that has some content for you to interact with.

Throughout the following introductory articles, we'll use a sci-fi movies dataset as our working example. You may already be familiar with this example project from initializing a Sanity Studio, but no prior knowledge is assumed.

While we encourage you to follow along with the examples, you can still learn the core App SDK concepts without setting up the example project. Feel free to read through the guide and adapt the concepts to your own use case.

If you'd like to follow along with the examples, you'll need to set up a Sanity project with our sci-fi movies dataset:

• Create a new Sanity project

npm create sanity@latest

• When prompted:
  • Choose "Create new project"
  • Give your project a name (e.g., "cool-tapes")
  • Select or create an organization for this project
  • Use the default dataset configuration
  • Choose your output path (e.g., "cool-tapes-studio")
  • Select project template
    • Movie Project (schema + sample data)
  • Choose whether to use TypeScript or plain JavaScript
  • Add a sampling of sci-fi movies to your dataset on the hosted backend
    • Yes
• Make note of your:
  • Project ID
  • Dataset name

You'll need these values to configure the SDK in the upcoming steps.

• Start the studio!

cd cool-tapes-studio
npm run dev

The Studio will now be running with a schema designed for movie content. The dataset includes some sample sci-fi movies to get you started. As we progress through the guide, we'll build features that interact with this content in various ways.

If you prefer not to set up the example project, that's perfectly fine! The concepts and patterns we'll cover apply to any content structure. You can still follow along with the explanations and adapt the examples to your own schema and content model.

Now that we have our content ready, let's create a new SDK app. The quickest way to get started is to use the App SDK quickstart template:

npx sanity@latest init --template app-quickstart

When prompted:

• Choose or create your organization
• Choose the output destination for your local development
• Choose whether to use TypeScript or JavaScript

You should see a confirmation message like the one below.

Success! Now, use this command to continue:

npm run dev - to run your Sanity application

Other helpful commands
npx sanity docs - to open the documentation in a browser
npx sanity manage - to open the project settings in a browser
npx sanity help - to explore the CLI manual

Congratulations! You just boostrapped your first custom application with the Sanity App SDK!

However, before running your app locally for the first time, you’ll need to configure the app to use the data from the example project you created in the previous step. That’s exactly what we’ll do in the next article.