-1

I have declared some environment variables on my server using dotenv, and I want to be able to access one of them on my client-side code

I have my .env file set up like so:

NODE_ENV='development'
DEF_USER='admin'

then I have my config.js file where I load the variables from my env file:

const dotenv = require('dotenv');
const path = require('path');

dotenv.config({
    path: path.resolve(__dirname, `../environments/${process.env.NODE_ENV.trim()}.env`)
});

module.exports = {
    NODE_ENV: process.env.NODE_ENV || 'development',
    DEF_USER: process.env.DEF_USER || 'admin'
};

How can I acces my DEF_USER variable on my client's code? I can access NODE_ENV with process.env.NODE_ENV, but no such luck with DEF_USER.

I should mention that my server and my client code is in separate directories. Also, I didn't used create-react-app.

I also tried by installing webpack in my client but it trows me a lot of errors.

Daniel Corona
  • 839
  • 14
  • 34
  • If you're using Express you can use a template engine. – code Jun 07 '22 at 21:32
  • If your server code and client code are in separate directories (as they must be for Node.js and React.js projects), they are bundled and deployed entirely separately. If you need the environment variable to be available in both places, I would recommend opening up an API endpoint to retrieve the value from the server on the client side or copy the value to a new .env file in the React project directory. – Jacob K Jun 07 '22 at 21:35
  • @JacobK you mean the root directory of the project? – Daniel Corona Jun 07 '22 at 21:45
  • Yes, the env files should be at the root directory of each project. You can alternatively open up the API endpoint to serve the relevant value to the front end, or you could even place the variables in a shared location and pull from it during the back- and front-end code build pipelines. But if the shared variable is something that is static such as a client ID or API key that rarely changes, the easiest solution is likely to copy it in both locations. – Jacob K Jun 07 '22 at 21:51
  • Also, you're able to see the `process.env.NODE_ENV` variable, not because you are reading it from your file, but rather because it is a default environment variable that is available by default (and cannot be overwritten) in a React app – Jacob K Jun 07 '22 at 21:52

1 Answers1

-1

"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"

This is from React documentation, hope it helps. Link: https://create-react-app.dev/docs/adding-custom-environment-variables/

Caio Amorim
  • 165
  • 6
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 08 '22 at 01:31