Getting process.env to work with HERE API keys
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?
here-api dotenv
add a comment |
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?
here-api dotenv
add a comment |
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?
here-api dotenv
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?
here-api dotenv
here-api dotenv
edited Dec 31 '18 at 23:39
Stefan Hodges-Kluck
asked Dec 31 '18 at 20:53
Stefan Hodges-KluckStefan Hodges-Kluck
133
133
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
That worked--thank you!
– Stefan Hodges-Kluck
Jan 4 at 18:05
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53991337%2fgetting-process-env-to-work-with-here-api-keys%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
That worked--thank you!
– Stefan Hodges-Kluck
Jan 4 at 18:05
add a comment |
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.
That worked--thank you!
– Stefan Hodges-Kluck
Jan 4 at 18:05
add a comment |
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.
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.
answered Jan 4 at 7:05
VeerVeer
3314
3314
That worked--thank you!
– Stefan Hodges-Kluck
Jan 4 at 18:05
add a comment |
That worked--thank you!
– Stefan Hodges-Kluck
Jan 4 at 18:05
That worked--thank you!
– Stefan Hodges-Kluck
Jan 4 at 18:05
That worked--thank you!
– Stefan Hodges-Kluck
Jan 4 at 18:05
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53991337%2fgetting-process-env-to-work-with-here-api-keys%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown