✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

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

13 replies
Last updated: Jun 21, 2021
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?
user Y
Jun 14, 2021, 1:29 PM
In the frontend
Jun 14, 2021, 2:34 PM
Thanks for the speedy response!
Jun 14, 2021, 2:34 PM
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)
Jun 14, 2021, 2:38 PM
I found these docs https://www.sanity.io/docs/studio-environment-variables But I'm still getting an error when starting my project locally
Jun 14, 2021, 2:38 PM
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)
Jun 14, 2021, 2:39 PM
CRA I think wants all of your env variables to start with
REACT_APP_
Jun 14, 2021, 2:40 PM
So
REACT_APP_SANITY_PROJECT_ID = 'dkei24k'
or something similar
Jun 14, 2021, 2:40 PM
Ok I will attempt that again and see what I get. Thank you for all the info!
Jun 14, 2021, 2:40 PM
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 😄
Jun 14, 2021, 2:43 PM
Hey Brian,
Jun 21, 2021, 9:07 PM
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
Jun 21, 2021, 9:24 PM
I'm using Netlify to deploy the site. I've include these variables into my Environment Variables inside Netlify for Deployment.
Jun 21, 2021, 9:25 PM
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?
Jun 21, 2021, 9:27 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?