How to manage environment variables?

[v-raja]

I'm migrating a Next.js app to a RN + Next app using the solito blank monorepo. I was wondering where I should store my environment variables so that I can use process.env.<KEY> in my code and it would work across both platforms?

[raulghm]

same question :m

[nandorojo]

I have a solution to this. I’ll write here when I have some time.

[rodbs]

I've found this 2 solutions, but I haven't been able to integrate them in the solito architecture
https://medium.com/swlh/how-to-properly-use-environment-variables-in-an-expo-react-native-app-7ab852590b30
https://github.com/egislook/react-native-expand-dotenv

@nandorojo It'd be highly appreciated if you could explain the architecture of the monorepo: how packages are read and how NextJs is 'integrated' into expo web , into expo ....

[nandorojo]

See my answer here: #31 (comment)

[nandorojo]

While I don't have a ton of time to write a full guide or example currently, I realized I explained this over a discord chat before already. So I'm going to drop screenshots here of that convo. Hopefully this is enough to explain it all.

Please consider these instructions as-is. You should never commit any secrets to git or put them in any env files using this approach. You can use secrets on Vercel and on EAS. I'm sharing this as a courtesy, but you are in charge of your own security.

Small Update

As of newer expo SDKs, I had to add this to my eas.json build profiles to make the above approach work, which removes Expo's built-in env variable support.

"env": {
  "EXPO_NO_DOTENV": "1",
  "EXPO_NO_CLIENT_ENV_VARS": "1"
}

[rodbs]

Finally I think I make it work. I think expo start —clear fix it! What a nightmare! :)
Thanks a lot!

One last question.
In next.config.ts you inject/filter just the public variables (NEXT_PUBLIC_) (because the are the ones to inject in the client?)
But what about the private variables? how are they available to the app/vercel? babel takes charges of it?

[nandorojo]

for the secrets, you can use .env.local in apps/next locally (this must be in gitignore!)

and then on vercel you add them to the env variables in your project settings.

[RicardoPBarbosa]

Hey, I've configured following your instructions, it's working for Next.js using process.env.*, but how do I make it work on Expo? It just doesn't show anything.
I got a shared folder of firebase functions to be accessed by both apps and I need to access these environment variables there to initialize firebase.

[nandorojo]

Update

As of newer expo SDKs, I had to add this to my eas.json build profiles to make the above approach work, which removes Expo's built-in env variable support.

"env": {
  "EXPO_NO_DOTENV": "1",
  "EXPO_NO_CLIENT_ENV_VARS": "1"
}

[TechchazeInc]

Hey, I've configured following your instructions, it's working for Next.js using process.env.*, but how do I make it work on Expo? It just doesn't show anything. I got a shared folder of firebase functions to be accessed by both apps and I need to access these environment variables there to initialize firebase.

Hey did you figured this out, i am also facing same issue.....

[anmoltiwari00]

hey @nandorojo possible to list the extra steps required for native? would be really helpful. We have a setup with RNCli and Next. Thanks!

[nandorojo]

The babel steps should all work with native

[anmoltiwari00]

yup the babel steps make sense...but you have mentioned in step no. 5 that with native there are some extra steps to run it

[nandorojo]

the extra steps are the ones mentioned before, where I create a different dev client with each env file. this uses EAS profiles. EAS works with react native cli too, so you could use that there!

[sarat1669]

Can this be added to the solito monorepo by default?

[artiphishle]

the dotenv approach described above seems a nice way to load the ENV's, however it's the first thing you expect to already be available within the starter. Please add this great code to the starter, thanks.

(not that I'm too lazy, but now everyone first has to investigate, find this page, then add it manually... feels like a showstopper right at the beginning)

[nandorojo]

First step may be to document it. One concern with including it in the root is that people will expect it to work like next.js, where you can include secrets.