Configuration

Learn how to set up your app so it can interact with your Sanity content

The term "configuration" in the context of SDK apps will generally refer to one of two things:

• Your root app configuration file: sanity.cli.ts or .js, found at the root of your project. This file includes your organization ID, and the entry point for your app. Once your project has been deployed, an id for your application will be added to facilitate future deployment.

import {defineCliConfig} from 'sanity/cli'

export default defineCliConfig({
  app: {
    organizationId: 'your-org-id',
    entry: './src/App.tsx',
    id: 'your-app-id',
  },
})

• One or many SanityConfig objects that contain a project ID and dataset belonging to the Sanity dataset(s) you wish to interact with in your app. This configuration is passed to the SanityApp provider which typically wraps your application and provides all the necessary context needed to interact with your content.

import {type SanityConfig} from '@sanity/sdk'
import {SanityApp} from '@sanity/sdk-react'
import {MyCoolComponent} from './components/MyCoolComponent'
import './App.css'

export function App() {
  // apps can access one or many different projects or other sources of data
  const config: SanityConfig[] = [
    {
      projectId: 'my-project-id',
      dataset: 'my-dataset',
    }
  ]

  return (
    <div className="app-container">
      <SanityApp 
        config={config} 
        fallback={<div>Loading...</div>}
      >
        {/* add your own components here! */}
        <MyCoolComponent />
      </SanityApp>
    </div>
  )
}

export default App

Before you can run your application locally for the first time, you’ll need to update the config variable in src/App.tsx to include the projectId and dataset for the Sanity project(s) you want your app to work with. You can enter one or more of these configuration objects in the config array if you’d like your app to work with multiple projects and datasets.

• Read more about SanityConfig in the reference docs

To run your app in development mode, run the following command in your terminal from your app’s directory:

npm run dev

Your app will open in your organization’s Dashboard, even while running locally.