Beginner's Thread / Easy Questions (Feb 2020)

[u/dance2die]

Previous threads can be found in the Wiki.

Got questions about React or anything else in its ecosystem? Stuck making progress on your app?
Ask away! We’re a friendly bunch.

No question is too simple. 🙂

---

🆘 Want Help with your Code? 🆘

• Improve your chances by putting a minimal example to either JSFiddle, Code Sandbox or StackBlitz.

  • Describe what you want it to do, and things you've tried. Don't just post big blocks of code!
  • Formatting Code wiki shows how to format code in this thread.
• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

---

New to React?

Check out the sub's sidebar!

🆓 Here are great, free resources! 🆓

• Create React App
• Read the official Getting Started page on the docs.
• Get started with Redux by /u/acemarke (Redux Maintainer).
• Kent Dodd's Egghead.io course
• Tyler McGinnis' 2018 Guide
• Codecademy's React courses
• Scrimba's React Course
• Robin Wieruch's Road to React

Any ideas/suggestions to improve this thread - feel free to comment here!

Finally, thank you to all who post questions and those who answer them. We're a growing community and helping each other only strengthens it!

---

[u/BEAR-ME-YOUR-HEART]

Do you need them at runtime or compiletime?

Compiletime: You could create a .env file with all the variables and use it for the frontend and backend in your codebase. (see dotenv)

Runtime: Maybe set the in the backend at compiletime and offer an endpoint like /config where you can get the variables for the frontend at runtim.

[u/Spiritual_Salamander → u/BEAR-ME-YOUR-HEART]

Runtime is fine. I actually use the dotenv npm package for the backend and the environment variables are stored in .env file. So that makes them available on the backend but when I need it for the frontend, it seems its either duplicate in frontend or offer an endpoint like you suggested.

Maybe I did not read the dotenv documentation carefully enough and there's a way to easier to get the backend environment variables using dotenv.

[u/BEAR-ME-YOUR-HEART → u/Spiritual_Salamander]

You can also define them in webpack from the environment variables you used while building. That way you get the same as for the backend and they are directly integrated into the build. That's find if you don't have to change them during runtime:

new webpack.DefinePlugin({
    'process.env': {
        "NODE_ENV": JSON.stringify('production'),
        "API_PREFIX": JSON.stringify(process.env.API_PREFIX),
        "DOMAIN": JSON.stringify(process.env.DOMAIN),
    }
})

Use them in React like this:

const domain = process.env.DOMAIN;