Where to install Sanity CLI in a React project structure?

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:

1. Install the Sanity client in your React app:

cd portfolio
npm install @sanity/client

1. 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.