how to use .env file in a react js with typescript project?

Question

I have a react js project , but with typescript. I understand we can create .env file and have some configuration defined as such,

.env file

REACT_APP_SOME_CONFIGURATION = "some value"

and use it in the code , without importing anything , like below

const configValue = process.env.REACT_APP_SOME_CONFIGURATION

I tried this set up in my project , and it didn't work. is it because it is typescript? how to use .env file in such scenario.

process.env does not exist on front end, you can use it only in your node backend — Yakir Fitousi
– Yakir Fitousi, Commented Oct 20, 2020 at 20:59
@yoel are you sure about it? we had issue with similar case in our project because FE (react) could not consume process.env. what am i missing? — Yakir Fitousi
– Yakir Fitousi, Commented Oct 20, 2020 at 21:11
@YakirFitousi see here create-react-app.dev/docs/adding-custom-environment-variables — Yoel
– Yoel, Commented Oct 20, 2020 at 21:17
@YakirFitousi hey yakir see here react-israel.co.il/… OR here stackoverflow.com/a/59244254/9161478 — Yoel
– Yoel, Commented Oct 25, 2020 at 9:50

Yoel · Accepted Answer · 2020-10-20 21:02:43Z

22

In TypeScript, you need to set the return value so if this string did so

const configValue : string = process.env.REACT_APP_SOME_CONFIGURATION

OR

const configValue: string = (process.env.REACT_APP_SOME_CONFIGURATION as string);

answered Oct 20, 2020 at 21:02

Yoel

8,0156 gold badges32 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alfrex92 Over a year ago

you're a life savior

SalahAdDin Over a year ago

the variable is possible undefined.

Heet Vakharia · Accepted Answer · 2022-04-20 06:08:37Z

10

You can add this to your react-app-env.d.ts file

declare namespace NodeJS {
    interface ProcessEnv {
       //types of envs
        NODE_ENV: 'development' | 'production' | 'test';
        PUBLIC_URL: string;

    }
}

answered Apr 20, 2022 at 6:08

Heet Vakharia

4534 silver badges16 bronze badges

Comments

Dang Kien · Accepted Answer · 2021-03-17 15:31:03Z

3

Update on March 2021: With React 17 and typescript, you don't need to set the return the 'configValue' value, just use the env variable like you did before. My .env file like this

REACT_APP_STRING=some_string_dont_have_quotation_mark

answered Mar 17, 2021 at 15:31

Dang Kien

6882 gold badges7 silver badges20 bronze badges

Comments

Oladele Seyi · Accepted Answer · 2021-08-27 13:21:57Z

2

You could change this to a string or Undefined for a failing scenario like so

const configValue : string | undefined = process.env.REACT_APP_SOME_CONFIGURATION

answered Aug 27, 2021 at 13:21

Oladele Seyi

212 bronze badges

Comments

Maespi · Accepted Answer · 2024-05-09 12:24:26Z

0

If you are using some framework with react like NextJs be careful cause env variables may change suffix, in the case of next. js the suffix for the public scope is "NEXT_PUBLIC_" and so taking into account actual TypeScript versions where it's not that necessary to specify your var type your code should be

const configValue = process.env.NEXT_PUBLIC_SOME_CONFIGURATION

In case you prefer to be more correct and force the var to be a string, I would recommend

const configValue: string = (process.env.NEXT_PUBLIC_SOME_CONFIGURATION as string)

answered May 9, 2024 at 12:24

Maespi

457 bronze badges

Collectives™ on Stack Overflow

how to use .env file in a react js with typescript project?

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related