How to import data from a .env file in TypeScript project?

[liberatingsayan]

I want to build sanity studio (sanity.io), in the studio root folder, there is a file, that is sanity.config.ts which is:

import {createConfig} from 'sanity';
import {deskTool} from 'sanity/desk';
import {schemaTypes} from './schemas';
import { markdownSchema } from 'sanity-plugin-markdown';

export default createConfig({
  name: 'default',
  title: 'dev-portfolio',

  projectId: 'lda05mbj',
  dataset: 'production',

  plugins: [deskTool(), markdownSchema()],

  schema: {
    types: schemaTypes,
  },
})

I want to import the projectId & dataset from a .env file, how I can do that? I create a .env file that is:

SANITY_STUDIO_API_PROJECT_ID=lda05mbj
SANITY_STUDIO_API_DATASET=production

Please help me!

[dwkns]

You can use dotenv to read .env files.

Then you can do:

import {createConfig} from 'sanity';
import {deskTool} from 'sanity/desk';
import {schemaTypes} from './schemas';
import { markdownSchema } from 'sanity-plugin-markdown';
import * as dotenv from 'dotenv' 
dotenv.config()

export default createConfig({
  name: 'default',
  title: 'dev-portfolio',

  projectId: process.env.SANITY_STUDIO_API_PROJECT_ID,
  dataset:  process.env.SANITY_STUDIO_API_DATASET,

  plugins: [deskTool(), markdownSchema()],

  schema: {
    types: schemaTypes,
  },
})

[lobunto]

1. You will need to add a .env file with the config.
2. V3 is using Vite which exposes a special object with the env variables. So all places you would normally do a process.env.* you will need to do import.meta.env.* to access the variables.

export default createConfig({
  projectId: import.meta.env.SANITY_STUDIO_API_PROJECT_ID
})

[unitof]

That is funky!

If you're building on Vercel (and/or using vercel dev), note Vite under Sanity@3 is configured to only expose ENV variables prefixed with SANITY_STUDIO_, so you may have to rename your Vercel environment variables.

After renaming, I was able use them in my sanity.config.js in both vercel dev and deployed on Vercel like this:

export default createConfig({
  name: 'default',
  title: '…',
  projectId: import.meta.env.SANITY_STUDIO_PROJECTID,
  dataset: import.meta.env.SANITY_STUDIO_DATASET,
  plugins: [
    deskTool(),
    ...(isDev ? devOnlyPlugins : []),
  ],
  schema: {
    types: [
      book,
      author
    ],
  },
})