Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive

Setting the logo icon based on the current dataset using environment variables in Sanity Studio.

5 replies
Last updated: Sep 7, 2021
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 from
sanity.json
and will be
undefined
until explicitly set.
Aug 27, 2021, 5:27 PM
Thanks Rachel. I was searching for a way to define a theme based off the active dataset.
Aug 27, 2021, 6:16 PM
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:
.env.development
and
.env.production
. It’s important they’re at the root—at the same level as your
sanity.json
file. 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"
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
Logo.js
in 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
Finally, you’ll want to tell your studio that it needs to implement that Logo file. You can open your
sanity.json
file and add the following to `"parts"`:

{
  "implements": "part:@sanity/base/brand-logo",
  "path": "./Logo.js"
}
Now, your
sanity.json
file 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"
    }
  ]
}
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:


sanity start
// Should start in your development environment
SANITY_ACTIVE_ENV=production sanity start
// Should start in your production environment
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.

Was this answer helpful?