I have my heroku variables set like that:
(MODE is inserted because I thought that NODE_ENV may be getting overwritten)
In my React app I do this:
import dotenv from 'dotenv';
dotenv.config();
console.log(process.env)
But in my console (under the heroku URL of course) I see only:
What am I doing wrong?
Okay, the solution was changing the name of KEY to REACT_APP_KEY and restarting all dynos - we can do this here:
Related
I'm trying to deploy my Gatsby app with auth0 to Heroku, but it doesn't work like on localhost.
I have the auth0 config in my .env file and all required URLs added to the auth0 dashboard.
To deploy it I added the regarding production URLs in the auth0 dashboard and set the environment variables in Heroku. I tried both AUTH0_CALLBACK and GATSBY_AUTH0_CALLBACK (for client-side availability), but both didn't work.
To see whether the environment variables are available I added this process.env... and on localhost, I can see the variable content here, on the Heroku version there is nothing.
const Account = () => {
if (!isAuthenticated()) {
login()
return <p>Redirecting to login... {process.env.AUTH0_DOMAIN}</p>
}
Does anybody have an idea how to make the environment variables accessible?
see Heroku config vars - https://devcenter.heroku.com/articles/config-vars - you can set these using either the Heroku CLI or Dashboard.
Config vars are exposed to your app’s code as environment variables. For example, in Node.js you can access your app’s DATABASE_URL config var with process.env.DATABASE_URL.
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 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.
I'm working on a React web app which was created by create-react-app and I am getting ready to deploy it.
The issue is, for development, the app uses the api instance running on my dev environment (localhost:{api-port}) but for the deployed app this should point to the server api instance (api.myapp.com).
Currently the host is just a variable in my networking component:
const hostname = 'localhost:9876'
I plan on using webpack to generate the static files which will be served by the production front-end, and I would like to continue developing using npm start as set up by create-react-app.
What would be the correct way to set up my project such that the host can be set automatically to the correct value based on whether I'm running the dev server or building for production?
A common solution is to check against process.env.NODE_ENV like this:
const hostname = process.env.NODE_ENV === "development" ? "localhost:9876" : "localhost:6789";
You may need to force the environment variable to be present in your Webpack configuration file using the DefinePlugin like this:
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV:JSON.stringify(process.env.NODE_ENV || "development")
}
})
]
An alternative solution might be to use the config package and provide your hostname string as a configuration parameter. config will inherit configurations from files based on the current NODE_ENV. It will start by using configuration from a default.json file, then override it with a development.json, or production.json, depending on your environment.
Note that you'll need for the config files to be copied to your output directory using CopyWebpackPlugin for it to work.
There are definitely many ways you could achieve that. One of those solutions would be to use webpacks's DefinePlugin. In your plugins section in webpack configuration you would add something like this:
new webpack.DefinePlugin({
API_HOST: process.env.NODE_ENV === 'production'
? JSON.stringify('localhost:8080')
: JSON.stringify('api.com')
}),
That creates a global variable API_HOST available everywhere in your codebase, which you can use. You can read more about the DefinePlugin here https://webpack.js.org/plugins/define-plugin/
you could use a relative path when you make any request to your api server instead of calling the full url for your app.
and for your development you could add a proxy property to your package.json file:
{
...
"proxy": {
"/api/*": {
"target" :"http://localhost:9876"
}
}
}
so whenever you make any request that prefixed with /api will be redirected to http://localhost:9876/api this is just in the development but in the production if you make a request prefixed with /api it won't be redirected it will be served normally because the proxy is just available in the dev server coming with create-react-app.
I'd like to set a different url for an external api in an angularjs app depending on whether I am running in dev or prod mode:
a sketch of my app.js:
var API_URL = 'http://localhost:8000/api'; # dev config
...
app.constant("API_URL", API_URL)
I use webpack to locally serve the app on localhost:3000, and I also use it to build a prod version of the app (minified, etc) which consumes the api from a different location.
I was wondering if there is some way to configure the build process to set API_URL in the above to the desired production value:, ie:
var API_URL = 'http://app.example.com/api'; # prod config?
?
As answered in this SO question, you can solve this problem using Webpack's definePlugin to define environment variables:
webpack.github.io/docs/list-of-plugins.html#defineplugin