Setting up Sanity with React project and resolving an error.

8 replies

Last updated: Aug 7, 2021

Getting help with setting up project with Sanity and React:I created my React project in a folder using npm create-react-app portfolio. Where do I install Sanity? In the same folder? I tried this before and it just mixed the two things together and created a mess. Where should I enter:
npm install -g @sanity/cli && sanity init ?

AI Update

Good question - you definitely want to keep your React app and Sanity Studio separate to avoid the mess you experienced! The key is understanding that Sanity Studio is its own application, not something you install inside your React app.

Where to Install Sanity

Create a separate folder for your Sanity Studio. You have a few good options:

Option 1: Sibling Folders (Cleanest for beginners)

Keep them at the same level:

/portfolio          # Your existing React app
/portfolio-studio   # Your new Sanity Studio

Navigate to your parent directory (outside of /portfolio) and run:

cd ..
sanity init

When prompted for the output path, specify portfolio-studio or let it create a new folder.

Option 2: Monorepo Structure

Create a parent folder to contain both:

/my-portfolio-project
  /frontend         # Move your React app here
  /studio          # Your Sanity Studio

Then cd into /studio and run sanity init there.

Installation Methods (Both Are Current)

The command you mentioned is still valid! You have two options:

Global installation:

npm install -g @sanity/cli
sanity init

Or use npx (no global install needed):

npx sanity@latest init

Both methods are officially supported - choose whichever you prefer. The sanity init command will walk you through:

Logging in/authentication
Creating or selecting a project
Naming your dataset
Choosing a template (pick "clean" to start simple)
TypeScript preference

Connecting Your React App to Sanity

Once your Studio is in its own folder, you'll connect your React app to fetch content:

Install the Sanity client in your React app:

cd portfolio
npm install @sanity/client

Use your project ID and dataset name to query content from your React app

The Studio is just your content editing interface - it runs separately (usually at localhost:3333). Your React app fetches data from Sanity's Content Lake via API calls, so they don't need to be in the same folder at all.

This separation keeps everything clean: your React app stays focused on the frontend, and your Studio stays focused on content management.

npm install -g @sanity/cli

can be run in any folder.
I believe
Kapehe runs

sanity init

from the root folder of her project. When it prompts for “Project output path” the default should put your studio in a subfolder.

So I should install Sanity inside a sub-folder of the React project?

Yes, that’s one way to do it. Another is to install it outside the React project (i.e., as a sibling to the React folder). I think Kap does the former so that’s a good plan if you want to follow that tutorial.

So far so good! Will let you know how it turns out. THANK YOU!

Things went well until near the end when I got stuck here. I've gone through teh video twice and I' not sure what I am missing.

That error would happen if a post is missing a slug, since it’s looking for a property called

current

inside of

slug

but

slug

is undefined (i.e., doesn’t exist). There are a few ways to solve this, including short-circuiting (which Kap did a few lines above with

postData

) and optional chaining , but a quick fix should be to add a slug to all your posts.

That error would happen if a post is missing a slug, since it’s looking for a property called

current

inside of

slug

but

slug

doesn’t exist. There are a few ways to solve this, including short-circuiting (which Kap did a few lines above with

postData

) and optional chaining , but a quick fix should be to add a slug to all your posts.

Thanks! I will try it now.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo