I am trying to add a google maps to my page in a React app with a pin dropped on a location.
All works fine when I hardcode the APIKEY in to the component like,
bootstrapURLKeys={{ key:
'<api=key'
}}
but when I put the API Key in a .env file, it doesnt work (I know .env files aren't totally secure as the key can be read in the dev tools on google, but I am not overly worried about that at the moment.)
so far I have this in my Map component,
<GoogleMapReact
bootstrapURLKeys={{ key:
`${process.env.REACT_APP_GOOGLE_API_KEY}`
}}
defaultCenter={location}
defaultZoom={zoom}
>
I have console.log(${process.env.REACT_APP_GOOGLE_API_KEY}) and it logs as expected. But when I run the app I get an error,
util.js:66 Google Maps JavaScript API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key
in my .env file I have,
REACT_APP_GOOGLE_API_KEY=<api=key>;
I solved this. I didnt need ; in the .env file as it was adding this to the api key which is why google was saying it was invalid
Related
I'm facing a problem. I want to know if there have any way to hide api key without .env file in react + express file..
I have an API key that I need to access an API endpoint. In my Next.js app, I store this key under .env.local like so:
API_KEY=qwerty123
And I access it in my getStaticProps function with the process.env:
const parkData = await fetch(
`${URL}parks?parkCode=${params?.parkCode}&limit=465&api_key=${process.env.API_KEY}`,
reqBody
)
When I try to run this in production I am getting an error that the API key is invalid. I know that the API is correct because when I run the project locally, the API data loads.
"code": "API_KEY_INVALID",
"message": "Your API key is not valid. Please get a new one at https://www.nps.gov/subjects/developer/get-started.htm"
My question is do I need to change how I call the API key in my getStaticProps function for the production build?
Note: I've made sure to included the env in the Amplify console.
Environment variables are not carried through to Lambda functions
For some reason, I'm not sure why myself, you still have to add the env's in your next.config.js file.
module.exports = {
env: {
MY_ENV_VAR: process.env.MY_ENV_VAR
}
};
Amplify troubleshooting docs
Hi everyone I moved my gatsby site to netlify, I installed google-map-react on localhost: 8000 everything works fine my key is in a .env.development file and in a .env.production i saw i must call my var with GATSBY_***** so i made this
GATSBY_GOOGLE_API_KEY = "**********************"
And i call it in my component Map :
const key = process.env.GATSBY_GOOGLE_API_KEY
It works well in local but in netlify i go in my settings of my site and Environment variables
I make GATSBY_GOOGLE_API_KEY Variable and his value but i've got an error message :
backend.js:6 Google Maps JavaScript API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key
I must have missed something but I don't know what thank you very much if you have any leads
I am currently writing a web app and am using AWS Amplify.
I created my API Gateway and my lambdas before using Amplify so I imported my existing API to Mobile Hub.
My API gateway has 2 stages dev and prod.
According to the Amplify documentation here is the code to call my API from my app.
API.get(apiName, path, myInit).then(response => {
// Add your code here
}).catch(error => {
console.log(error.response)
});
apiName is auto generated by Mobile Hub and is always ...amazonaws.com/dev
path will be /items for example
resulting in a call being made to ...amazonaws.com/dev/items
I haven't seen anything in Amplify or AWS documentation to be able to call ...amazonaws.com/prod/items using the Amplify library.
I tried to edit the mobile-hub-project.yml and change it from :
features:
cloudlogic: !com.amazonaws.mobilehub.v0.CloudLogic
components:
apiName: !com.amazonaws.mobilehub.v0.API
attributes:
...
sdk-generation-stage-name: dev
to :
features:
cloudlogic: !com.amazonaws.mobilehub.v0.CloudLogic
components:
apiName: !com.amazonaws.mobilehub.v0.API
attributes:
...
sdk-generation-stage-name: prod
and push the new configuration but the behaviour is still the same.
Could anyone help me to manage multiple stages using Amplify ?
can you check the file aws-exports.js on aws_cloud_logic_custom array. there each endpoint has an attribute called name which is the one you use with the Amplify. You can edit the endpoint by changing to the stage you want to use. By default aws-exportsuses dev stage.
I am having problems getting Heroku to recognize my api keys that I have gitignored on my React app.
I have created credentials.js with my api keys and exported it.
export const API_KEY = 'redacted';
Then I listed credentials.js in gitignore.
credentials.js
I then imported API_KEY into my project file.
import { API_KEY } from '../credentials.js';
This works fine in development but when I push to Heroku, it fails to resolve the path to credentials and the compile fails since it's in a gitignored file. I have also tried using a .env file, but that does not work either.
I have tried not importing it and just running the Heroku "config set" command in the terminal, but to no avail.
$heroku config:set API_KEY=<key>
Also the issue is importing the API_KEY gitignored variable in the index.html file. How do you do this in a React app like you can do with application.yml file in rails and referencing it with #{ENV[API_KEY]}?
Does anyone have a tried and tested solution?
As you have already set the API_KEY on Heroku env using the command you mentioned, in order to use it you need to do something like:
const API_KEY = process.env.API_KEY;
This way you'll be able to read from Heroku env. You can see more info here.