create react app not picking up .env files?

📢 Hey there, React devs! Having trouble with Create React App not picking up your .env files? 😕 Don't worry, I've got your back! Let's dive in and solve this puzzle together! 🤝

The first thing we need to understand is the default behavior of Create React App. When you run your app using react-scripts start, it expects the environment variables to be prefixed with REACT_APP.

🚧 In your case, you mentioned that your .env.development file contains the following:

API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback

But when you console out process.env, you only see { NODE_ENV: "development", PUBLIC_URL: "" }. 😱

Why are your variables not being picked up? The problem lies in the naming convention of your .env file.

Create React App automatically loads .env files based on the NODE_ENV value. It correctly picked up your variables when you named it .env, but not when you used .env.development or .env.production. 😮

To fix this, let's update the filenames of your .env files. Rename your .env.development and .env.production files to .env.local and .env.production.local, respectively.

Here's your updated directory structure:

/.env.local
/src/index.js

Running react-scripts start or react-scripts build should now pick up the environment variables correctly! 🎉

But wait, there's more! 🙌 Let's take it a step further and ensure our variables are properly prefixed with REACT_APP for consistency.

So, modify your .env.local file like this:

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback

Finally, when you console out process.env, you should see:

{
  NODE_ENV: "development",
  PUBLIC_URL: "",
  REACT_APP_API_URL: "http://localhost:3000/api",
  REACT_APP_CALLBACK_URL: "http://localhost:3005/callback"
}

Voilà! Problem solved! 🎊 Now your Create React App can access your environment variables seamlessly.

🚀 But hey, don't leave just yet! Let's reinforce what we've learned and make sure this knowledge sticks! Share this post with fellow React devs facing a similar issue. Together, we can conquer the world of React development! 💪

Got any other React questions or topics you want me to cover? Drop them in the comments below! Let's keep the conversation going and learn from each other. 🤓

So, until next time, happy coding! 💻✨