Vite/React & Node.js app can't read .env variables

Question

I'm creating a full stack app with vite/react and node.js I have to use an API key in my backend to interact with GPT but ofcourse, I want to use that in my .env file.

However, whatever I try, my backend reads the environment variable as undefined..

I've went on the internet to find solutions but nothing works so maybe there is like something new going on..

My .env file (Which is in the same path as my package.json)

REACT_APP_API_KEY ='HERE IS MY SECRET KEY'
// or //
VITE_API_KEY ='HERE IS MY SECRET KEY'

and in my server.js (Is in the same path as the .env file)

console.log(process.env.REACT_APP_API_KEY)
// or //
console.log(import.meta.env.VITE_API_KEY)

These both options return undefined..

I also want to mention that I do have the cross-env package installed. So I've absolutely no clue what Ï'm doing wrong..

Sometimes, restarting the IDE does the job. I have come into such problems and restarting does the job. I think it does help in reading the env file. I have done this in VS Code and it works. — Himanshu Verma, Aug 02 '23 at 15:19
Does this answer your question? [How to load environment variables from .env file using Vite](https://stackoverflow.com/questions/70709987/how-to-load-environment-variables-from-env-file-using-vite) — Phil, Aug 03 '23 at 04:30
@Phil, sorry for the late reply. I've got it working but thanks for your answer! — Stef-Verniers, Aug 03 '23 at 12:58

Sombriks · Answer 1 · 2023-08-03T03:38:29.887

1

for vite i am pretty sure you'll need the VITE_ variable prefix in order to make it available to the frontend over import.meta.env: https://vitejs.dev/guide/env-and-mode.html#env-files

on the other hand, backend node behaves differently, and does not offer .env support out of the box. i tend to use dotenv-flow for that, as a node preload script. something like this:

  "scripts": {
    "start": "cross-env NODE_ENV=production node -r dotenv-flow/config index.mjs",
    "dev": "cross-env NODE_ENV=development nodemon -r dotenv-flow/config ",
    "test": "cross-env NODE_ENV=test mocha -r dotenv-flow/config -r app/configs/_testhooks.mjs app/**/*.spec.mjs",
    "test:coverage": "c8 npm run test",
    "migrate:make": "knex migrate:make --knexfile app/configs/knexfile.cjs -x mjs -- ",
    "migrate:latest": "knex migrate:latest --knexfile app/configs/knexfile.cjs",
    "migrate:rollback": "knex migrate:rollback --knexfile app/configs/knexfile.cjs"
  },

If possible, please provide more details about your fullstack scenario, maybe there is other approaches more straightforward than those i presented.

update

you can see more details on the PR in the sample projet.

edited Aug 03 '23 at 03:38

answered Aug 02 '23 at 15:51

Sombriks

3,370
4
34
54

This is an answer I've encountered multiple times.. However, I'm using that VITE_ prefix but It looks like You need that to render .env variables to the frontend, and because I need t use it in my node backend, I have to use process.env, which he doesn't recognise.. – Stef-Verniers Aug 02 '23 at 15:58
are you sharing code between frontend and backend? can you provide a small sample github repository? import.met won't be available to backend, even though you share .env files they will be processed in different ways at different times. – Sombriks Aug 02 '23 at 16:53
Actually I can, let me just push my code and change my secret api key. I'll prove the link soon! – Stef-Verniers Aug 02 '23 at 17:20
https://github.com/Stef-Verniers/BAP/tree/main/codex – Stef-Verniers Aug 02 '23 at 17:22
I am getting not found message, is the repo private? – Sombriks Aug 02 '23 at 17:33
Yes it was, it should be public now! – Stef-Verniers Aug 02 '23 at 17:36
1

I've updated the answer a little and provided a pull request with more details hope it helps – Sombriks Aug 03 '23 at 03:39
you are a hero!! I got it working now! – Stef-Verniers Aug 03 '23 at 12:58

Vite/React & Node.js app can't read .env variables

1 Answers1

update