javascript - process.env.API_URL is undefined - Stack Overflow

admin管理员组

文章数量:1180462

I built a project using React at the front and Strapi (based on Node.js) at the back.

On the client side, I'm trying to access my api url like so:

const apiUrl = process.env.API_URL || 'http://localhost:1337'
const strapi = new Strapi(apiUrl);

But process.env.API_URL is undefined. If I log process.env all I get is an object containing:

NODE_ENV: "development"
PUBLIC_URL: ""

How can I access my api_url ? I'm guessing there is a file where I should define API_URL myself?

I built a project using React at the front and Strapi (based on Node.js) at the back.

On the client side, I'm trying to access my api url like so:

const apiUrl = process.env.API_URL || 'http://localhost:1337'
const strapi = new Strapi(apiUrl);

But process.env.API_URL is undefined. If I log process.env all I get is an object containing:

NODE_ENV: "development"
PUBLIC_URL: ""

How can I access my api_url ? I'm guessing there is a file where I should define API_URL myself?

• javascript
• node.js
• reactjs
• strapi

Share Improve this question Follow asked Jun 5, 2019 at 14:21 sir-haversir-haver 3,5921010 gold badges5656 silver badges108108 bronze badges 3

• Are you using create-react-app for the React app? – Corey Commented Jun 5, 2019 at 14:25
• How did you set this API_URL envvar? – keul Commented Jun 5, 2019 at 14:25
• Does this help? – apokryfos Commented Jun 5, 2019 at 14:26

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 22

Assuming you are using create react app, Make sure you add the prefix REACT_APP like REACT_APP_API_URL. In your project src create a file .env.development or .env.production and add the your value with a key with the prefix

In client side there is no such concept as environment variables. So, if you didn't do anything to solve this issue, it won't be defined.

Create react app has an option to pass environment variables from .env file. If you are using it you can check this document: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

If you don't have react-create-app, you can use dotenv npm package.

In essence, what dotenv and react-create-app does, will be declaring those variables for you in build time. 'Build time' here is important, because it's not like a server. You just build 1 application for 1 environment. You cannot use same build to deploy to different environments.

It is important to understand what is happening behind the scenes.
Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_.

You must create custom environment variables beginning with REACT_APP_.
Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name.
Changing any environment variables will require you to restart the development server if it is running.

These environment variables will be defined for you on process.env.
For example, having an environment variable named REACT_APP_NOT_SECRET_CODE will be exposed in your JS as process.env.REACT_APP_NOT_SECRET_CODE.

Read more in here and in here.

process.env is a Object and if you want add a property to an object.

process.env['API_URL'] = 'http://blabla.com:3000';
console.log(process.env);

Output

{ 
  ...
  API_URL: "http://blabla.com:3000",
  ...
  TERM_PROGRAM_VERSION: '1.34.0',
  LANG: 'en_US.UTF-8' 
}

For those who are using Next.js Client Components: prefix your environment variables with NEXT_PUBLIC_.

https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

本文标签： javascriptprocessenvAPIURL is undefinedStack Overflow