Create React App env variables undefined when using Craco build in Heroku - heroku

I'm deploying an Express app (Node.js/React) to Heroku and have set my env vars in Heroku using the config vars in Settings in the Heroku Dashboard. On the server side, I can access them using process.env without any problems. However, in my client, my process.env vars are returning undefined.
I have prefixed them with REACT_APP, and the issue seems to be related to the craco build script in my client/package.json that is called during the build stage of the Heroku deployment. If I set this to react-scripts build, the environment variables behave as expected, however, my TailwindCSS config then fails.
I can also have a .env file in the client, but I need different values depending on the stage of the Heroku pipeline, and NODE_ENV is always "production" once deployed to Heroku so I can't think of a way to have different values depending on the stage.
Is there a way for craco build to get the REACT_APP vars from the Heroku config vars during deployment in the same way react-scripts build does?

There is a npm package specifically build to use .env variables with craco: https://github.com/djdmbrwsk/dotenv-cra

Related

Using environment variables

I have a sapper project which contains various database secrets and such... So for local development I want to load a .env which contains the secrets. I am aware of dotenv. How do I use dotenv to load the .env file only on my local machine and not on my deployment in cloud run.
Add .env to your .gitignore file.
This way, it won't get deployed to the cloud when you do a git push.
Then go into your cloud provider and set your production environmental variables.
Rather than using the dotenv package you can use the dotenv-cli. You install it globally and modify the dev npm command and prefix it with dotenv. The cli will locate the .env file and then run the sapper dev command with the environment variables set.
Add another command for production without the dotenv prefix so it uses the environment variables on the machine.

How do you get all ENV variables from Heroku (Including internal variables)

How do I get HEROKU specific ENV variables? (Such as $HEROKU_API_KEY_ENC)
I'm writing a buildpack to perform some operations on app deploys (not dyno restart, just deploy) but I need to know which variables are available at that point.
I know I have access to my own environment variables and HEROKU runtime dyno metadata but I'd like to see what else is there, such as which git user is making the deploy, or whether there's a variable to determine it is a deploy or a restart etc.
I appreciate your help.
P.S I already tried deployhooks and it doesn't solve my problem.
The linux printenv command will display every available environment variable.
How about this
heroku config --app your_app_id | grep "your_variable"

How does `heroku config` know what app to use?

Here is a question about the Heroku CLI.
When I run this command inside my local folder for a given app already on the server:
heroku config
I get a list of my environment variables settings.
But if I run the same command from another folder with the same name it does not work anymore.
This shows that the name of the local folder is not enough for heroku config to know which app I am thinking about.
How does heroku config know which app to query on the server?
By default, Heroku infers the app from your Git remotes:
App commands are typically executed from within an app’s local git clone. The app name is automatically detected by scanning the git remotes for the current working copy, so you don’t have to specify which app to operate on explicitly.
You can also explicitly tell it what app to use:
If you have multiple heroku remotes or want to execute an app command outside of a local working copy, you can specify the remote name or an explicit app name as follows:
heroku apps:info --app example
heroku apps:info --remote production
Or via environment variable:
Alternatively, the app name can be specified by setting the HEROKU_APP environment variable.

Tell heroku which config file for Play application to load

In Play, you can use multiple config files (application.conf, prod.conf...). Usually you would have a default conf file, i.e. application.conf, and let the other files import it and overload specific values.
One case is for example when you have a production database and wand to overwrite access configuration values set by developers and use credentials only known to the production personnel.
Here is a manual on this topic that say that the wanted config is to be specified as a parameter when running the application
I am deploying my application onto Heroku, which takes care of running the application. The only peace missing here and I can't find is how to tell Heroku which config file to load?
I solved this by using a Procfile with the contents:
web: target/universal/stage/bin/my_app -Dhttp.port=$PORT -Dconfig.resource=my-special.conf
You can define environment variables for your Heroku app, e.g. using the heroku config CLI command:
heroku config:set PLAY_CONFIG_FILE=application.conf
See Heroku config vars.

Heroku is switching my play framework 2 config file

I have a Play! application which is on Heroku.
My config file is different between my local application and the same on Heroku. Especially for the URL of my MongoDB base.
On localhost my base address is 127.0.0.1 and on heroku it's on MongoHQ. So when I push my application to Heroku I modify my config file.
But some times, like this morning Heroku change the config file. I pushed my application correctly configured on Heroku this morning and everything worked until now.
When I watch the logs I see that Heroku changed my config and try to connect to my local MongoDB base.
Is someone knowing what ? I hope I'm clear :)
Thanks everybody !
If there are differences in your application in different environments (e.g. local vs production), you should be using assigning the values with environment variables. For Play apps, you can use environment variables in your application.conf file, like this:
`mongo.url=${MONGO_URL}`
Then, on Heroku you can set the environment variables with config vars, like this (note, this may already be assigned for you by the add-on provider):
$ heroku config:add MONGO_URL=...
Locally, you can use Foreman to run your application with the environment variables stored in an .env file in your project root.

Resources