I'm building a React geographic todo list, similar to this one. I was using a Mapbox API for the mapping component, but I'd like to switch it over to HERE's Map Image API. I've set up the map on my app, but I'd like to hide my app_id and app_code in the .env file I had previously created. Is this possible? I know it's also possible to restrict which domains have access to the key/code, but I wanted to keep the keys hidden in a .env file for peace of mind.
Here is my .env file (without the keys, of course):
REACT_APP_HERE_ID={my app_id}
REACT_APP_HERE_CODE={my app_code}
And here is where I'm introducing it into my App:
const app_id = process.env.REACT_APP_HERE_ID;
const app_code = process.env.REACT_APP_HERE_CODE;
When I console.log app_id and app_code, they both return undefined. The previous API key I had from Mapbox worked fine in my .env file, but I can't seem to get the app_id and app_code from HERE to be recognized the same way.
Am I missing something? Is it easier to just limit which domains are able to use my id & code?
I assume you are using 'react-scripts' module for building/starting your project. Also as per above description, I can see you are using correct prefix 'REACT_APP_' to declare any variable in your .env file.
Just do a fresh build of app using command:
npm run-scripts build
or Just restart your app using :
npm react-scripts start
I think it should work fine.
And, Yes you can limit which domain should use your AppID and AppCode, using the feature "Secure app credentials against a specific domain" provided at https://developer.here.com/, just below the place where you see your id and code.
Hope this helps.