0

I am trying to deploy my app that was built using "create-react-app" to Heroku.

I followed all the steps.

When I try to push to Heroku, I get the following error:

Failed to compile.
./src/services/api/securities/index.ts
Cannot find file './keys' in './src/services/api/securities'.

I know why this is.

The 'keys' file is in my .gitignore. It contains sensitive API keys, so I want git to ignore it.

Here is the attempt to access the keys in the index.ts fike

export * from './keys'

But it seems that Heroku can't build without it.

Please help.

Red Ghost
  • 302
  • 2
  • 12
  • This isn't "because of gitignore", but because you've _built an app that depends on files that you're ignoring_. What's in your `services/api/securities/index.ts` that tries to load that file? Please [edit] your question and show us a [mcve]. – ChrisGPT was on strike Aug 06 '20 at 16:27

1 Answers1

2

Its not the Heroku issue, any platform will need files required in the app to build.

Also, sensitive data (keys file) must not be pushed to Git. You will need to make some changes in your app where ever you are requiring keys file, read all those properties from environment variable like process.env.{key_name}, and in Heroku set this sensitive property in the environment variable.

Check this link

https://devcenter.heroku.com/articles/config-vars

Hope you got the idea.

r7r
  • 1,440
  • 1
  • 11
  • 19
  • Actually, I'm reading that it's not recommended to store sensitive keys in env variables, either. What I'm going to do is to simply call my third-party API (that requires the key) on the backend. This way, it's both hidden from the user and can be built by Heroku. – Red Ghost Aug 06 '20 at 16:18
  • "I'm reading that it's not recommended to store sensitive keys in env variables, either"—where did you read that? What's the reasoning? Your back-end code will still need the API key, and you'll still need to set it somewhere. That's almost certainly in _an environment variable_. – ChrisGPT was on strike Aug 06 '20 at 16:28
  • Can you share that link, as much I know it is best approach to save sensitive keys in environment variables, check this:- https://stackoverflow.com/questions/12461484/is-it-secure-to-store-passwords-as-environment-variables-rather-than-as-plain-t – r7r Aug 06 '20 at 16:47
  • Here, they suggest that: https://create-react-app.dev/docs/adding-custom-environment-variables/ Also, even if I store the keys on some file in my backend, wouldn't that still be not exposed to users, as it never gets shown? – Red Ghost Aug 06 '20 at 18:33
  • @NikhilBhaskar, that's not a caution not to put sensitive information in environment variables. React can't even _access_ environment variables, since it runs in the user's browsers, not on the server. (It kinda fakes it by compiling into the app, but those aren't real environment variables.) It's a caution not to put sensitive information into client-side code _period_. – ChrisGPT was on strike Aug 06 '20 at 18:42
  • You're right. The key can belong in an environment variable. I was also concerned about the user being able to see the key if they just go to the Networks tab. But I solved that by just using a proxy server instead of calling the API on the frontend. – Red Ghost Aug 07 '20 at 18:03