kHRISl33t / runtime-env-cra

Runtime environment handler for create-react-apps
MIT License
49 stars 23 forks source link

It causes an issue during the build time of production. #10

Closed hafizadil123 closed 2 years ago

hafizadil123 commented 2 years ago

During the creation of build for production environment, package do not allow us to read the variables from the .env files as there is a condition inside the code to get it from pocess.env if env is not development. can you guid if you still handle this case or I can raise PR for this?

Thanks

seanblonien commented 2 years ago

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?

kHRISl33t commented 2 years ago

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 :)

kHRISl33t commented 2 years ago

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

kHRISl33t commented 2 years ago

Closing this because of it's inactivity.