Git Product home page Git Product logo

Comments (4)

seanblonien avatar seanblonien commented on September 26, 2024

In the README this library explains how it was originally built for Docker/VM environments where environment variables are set in the runtime environments from which they are built, and therefore they purposely pull env values ONLY from process.env in non-development builds.

In non-dev builds, it still reads from the specified .env file, however, it only reads the keys to know which process.env properties/values to put into the runtime-env.js file, and it will throw an error if there is a variable listed in your .env that doesn't have its corresponding process.env.variable value set.

That's some background as to why it's working the way it's working, however I have a solution to fix your exact problem, because I had this problem too:

env-cmd: "program for executing commands using an environment from an env file"

env-cmd -f .env.prod runtime-env-cra --config-name ./build-prod/runtime-env.js --env-file .env.prod

This is the exact command I use for an enterprise app with a static compile, build-once-for-all-environments-ahead-of-time build process. I then statically serve my React app.

It's as simple as it looks: env-cmd -f .env.prod is what you need to add.

So YES this library can be used to generate map .env file variables to your statically served React app as long as you run generate it at build time (which is a necessary condition for it being a statically served app anyways).

@kHRISl33t thoughts on this approach, and possible adding some example usage of env-cmd for static build use-cases?

from runtime-env-cra.

kHRISl33t avatar kHRISl33t commented on September 26, 2024

Thanks for the question @hafizadil123!

Can you share a basic example with me when the problem occurs and also how you are doing your production build?

The idea behind the package is when you are developing locally, you always want to use the values from your .env file, but when you are releasing the app to production the .env file should only be a layout example

e.g:

.env.development

NODE_ENV=development
API_URL=https://my-api-url.dev.com

So if you are starting your app locally with NODE_ENV=development runtime-env-cra --config-name=./public/runtime-env.js --env-file=./.env.development it will parse the KEYS and VALUES from your .env.development file to /public/runtime-env.js.

On production you can use your .env.development file as a layout example, it will know which KEYS will it need to parse from the system, but the VALUES will come from the system.

You can use the same file if you want. If you don't have different environment variables between environments. To parse the variables from the file instead of the system, just pass in NODE_ENV=development to the script.

e.g: NODE_ENV=development runtime-env-cra --config-name=./public/runtime-env.js --env-file=./.env.development && nginx "daemon off;"

But if you can share the CI/CD flow or the way you are deploying, I could help more :)

from runtime-env-cra.

kHRISl33t avatar kHRISl33t commented on September 26, 2024

In the README this library explains how it was originally built for Docker/VM environments where environment variables are set in the runtime environments from which they are built, and therefore they purposely pull env values ONLY from process.env in non-development builds.

In non-dev builds, it still reads from the specified .env file, however, it only reads the keys to know which process.env properties/values to put into the runtime-env.js file, and it will throw an error if there is a variable listed in your .env that doesn't have its corresponding process.env.variable value set.

That's some background as to why it's working the way it's working, however I have a solution to fix your exact problem, because I had this problem too:

env-cmd: "program for executing commands using an environment from an env file"

env-cmd -f .env.prod runtime-env-cra --config-name ./build-prod/runtime-env.js --env-file .env.prod

This is the exact command I use for an enterprise app with a static compile, build-once-for-all-environments-ahead-of-time build process. I then statically serve my React app.

It's as simple as it looks: env-cmd -f .env.prod is what you need to add.

So YES this library can be used to generate map .env file variables to your statically served React app as long as you run generate it at build time (which is a necessary condition for it being a statically served app anyways).

@kHRISl33t thoughts on this approach, and possible adding some example usage of env-cmd for static build use-cases?

Sure, we can add some examples :) never used env-cmd before though

from runtime-env-cra.

kHRISl33t avatar kHRISl33t commented on September 26, 2024

Closing this because of it's inactivity.

from runtime-env-cra.

Related Issues (15)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.