Setting the logo icon based on the current dataset using environment variables in Sanity Studio.
5 replies
Last updated: Sep 7, 2021
P
I am trying to set the logo icon based off the current dataset. I am using SANITY_STUDIO_API_DATASET emv variable but it is always undefined. As matter of fact all sanity env variables are unset all the time.
Aug 27, 2021, 12:55 PM
Hey Petar! The fact that they're all coming through undefined makes me think of this section of the docs:
Environment variables don't inherit their values fromsanity.jsonand will beundefineduntil explicitly set.
Aug 27, 2021, 5:27 PM
P
Thanks Rachel. I was searching for a way to define a theme based off the active dataset.
Aug 27, 2021, 6:16 PM
P
Thanks Rachel. I was searching for a way to define a theme based off the active dataset.
Aug 27, 2021, 6:16 PM
Hi Petar. I just gave the following a try and it worked, so maybe you can step through it and confirm you did everything the same. If you did, we’ll continue to troubleshoot from there.
First, you’ll want to have two files in the root of your studio folder:
Next, you’ll want to make a file to handle the logic of which dataset you’re in, and then output the correct “logo” (or, in my case, I’ll just put text). This file can be named whatever you want and can live wherever you want, but I’ll use
Finally, you’ll want to tell your studio that it needs to implement that Logo file. You can open your
Now, your
There are additional steps you can take if you want, such as implementing Spaces or defining a theme based on your environment. However, you can test this out by running your studio as such:
// Should start in your production environment
First, you’ll want to have two files in the root of your studio folder:
.env.developmentand
.env.production. It’s important they’re at the root—at the same level as your
sanity.jsonfile. Edit the following to align with the names of your datasets, but you’ll want something like:
// .env.production SANITY_STUDIO_API_DATASET="production"
// .env.development SANITY_STUDIO_API_DATASET="development"
Logo.jsin the root of the studio folder:
// Logo.js import React from 'react' const dataset = process.env.SANITY_STUDIO_API_DATASET const Logo = () => dataset === "development" ? <div>DEV</div> : <div>PROD</div> export default Logo
sanity.jsonfile and add the following to `"parts"`:
{ "implements": "part:@sanity/base/brand-logo", "path": "./Logo.js" }
sanity.jsonfile might look something like this:
// sanity.json { "root": true, "project": { "name": "env-logo" }, "api": { "projectId": "g8axdcb3", "dataset": "production" }, "plugins": [ "@sanity/base", "@sanity/components", "@sanity/default-layout", "@sanity/default-login", "@sanity/desk-tool" ], "env": { "development": { "plugins": [ "@sanity/vision" ] } }, "parts": [ { "name": "part:@sanity/base/schema", "path": "./schemas/schema" }, { "implements": "part:@sanity/base/brand-logo", "path": "./Logo.js" } ] }
sanity start// Should start in your development environment
SANITY_ACTIVE_ENV=production sanity start
Aug 27, 2021, 7:28 PM
Hi Petar. Did you have any luck with this? Wanted to follow up and make sure you got things working as expected.
Sep 7, 2021, 8:08 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.