Using .env files with Sanity client.js in React CRA app

Hello Sanity world! I am currently building a site free of charge for a local non-profit here in Austin, TX. I used React(CRA) and Tailwinds for the front-end to deploy to Netlify. Love how simple Sanity CMS was to setup. Nice and straightforward for the client to update content as well! Are there any docs/examples available for using a .env file with the Sanity client.js file?

In the frontend

Thanks for the speedy response!

I'll confess to not being super knowledgeable with CRA, but in general, you should be able to specify a set of variables in your

.env

file in the root of your CRA app and then you can use them with

process.env.REACT_APP_MY_VARIABLE

.
I think CRA will handle the rest for you.

It's important to note that you don't want to put sensitive env variables into CRA, since they'll be in your bundle. Your Sanity project ID and dataset are ok (since they're public anyway), but don't put write token in those env variables.

CRA's docs on env variables are handy for this:
https://create-react-app.dev/docs/adding-custom-environment-variables/ (other frontends may not have automatic import of .env files and you may need something like

dotenv

npm package, but CRA, Nextjs and others do some of the magic for you)

I found these docs https://www.sanity.io/docs/studio-environment-variables But I'm still getting an error when starting my project locally

Those docs are how you'd use Env variables to make the Studio work. We don't have too much in the way of documentation around using env variables in your frontend, since that's dependent on the framework (each framework handles it differently)

CRA I think wants all of your env variables to start with

REACT_APP_

So

REACT_APP_SANITY_PROJECT_ID = 'dkei24k'

or something similar

Ok I will attempt that again and see what I get. Thank you for all the info!

No problem! Sorry for lack of a definitive path for you. If those docs don't work for you, post your client.js and any code that's using the variables and we can try to troubleshoot. I'll be in meetings most of the rest of today, but i'll let some others know to check in 😄

Hey Brian,

So I'm still having issues with getting connected to my Sanity Studio with using an .env file. When I have the projectID manually typed then I have no errors and all content is loaded. When I try to use the .env path the error I receive is

I'm using Netlify to deploy the site. I've include these variables into my Environment Variables inside Netlify for Deployment.

My question is will anyone have access to the Sanity CMS if the projectID is visible within the codebase? Even without an invitation to read and/or edit the Sanity Studio for this project?