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?
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.
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'
}