I have a react app in a Heroku pipeline. Simply staging -> production.
In staging => Settings I have some config vars set up for the environment. However, when I console.log(process.env) I do not see them.
Am I supposed to be able to access these config vars in this manner? From what I've read, I should be able to access them from process.env. No?
I am using the following buildpack: https://github.com/mars/create-react-app-buildpack.git
Apparently you MUST name the config vars starting with REACT_APP_ and then you can access them via process.env.
This is all clearly outlined in the buildpack's documentation. I was just too dumb to actually check there :/
Append your Config Var name with the string 'React_App_' at the beginning (like React_App_Var_Name) and use this name in your ReactJs app. If this string is not appended and used, then it will return undefined.
For deploying production build, follow the steps mentioned in this link.
Related
I am using the next-auth library which requires the use of environment variables as follows:
Providers.GitHub({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
However, when I test out next-auth it is not working and it seems to me the reason why is because those variables are not loading properly. As such, I did a little test to see if I can access environment variables in my app and the test showed that I cannot.
This is how the test went:
// .env.local (root level)
NEXT_PUBLIC_ENV_LOCAL_VARIABLE="public_variable_from_env_local"
I then add the following code to my site:
<h2>test one start</h2>
{process.env.NEXT_PUBLIC_TEST_ONE}
<h2>test one end</h2>
<Spacer />
<h2>test two start</h2>
{process.env.TEST_TWO}
<h2>test two end</h2>
In this case, test one start shows up and test one end shows up, but the environmental variable does NOT show up. The same is true for test two start and test two end.
I did a similar test with console.log - namely:
console.log("test one", process.env.NEXT_PUBLIC_TEST_ONE)
console.log("test two", process.env.TEST_TWO)
That turns up as follows:
test one undefined
test two undefined
In short, for whatever reason I seem unable to load environment variables in my nextjs app. Not from next-auth, not in the code and not in a console.log. The variables are undefined and I do not know why.
Any ideas?
Thanks.
.env.* files are loaded when server starts. Hence, any modification in them is not applied unless you restart your dev/prod server.
Just halt the process (Ctrl+C/Z) and re-run next dev/next start to make them work. Note that you may also need to re-build the project (next build) before starting in production mode if you are using them in pages that are statically generated.
To be clear, according to the most recent docs, you are supposed to
place the variables in an .env.local file
then config your next.config.js file so it includes an env config
referencing your variables like this:
module.exports = {
env: {
secretKey: process.env.your_secret_here,
},
}
then you can call the variables on the client-side using the typical process.env.secret_here syntax. I may be mistaken but I do believe the NEXT_PUBLIC prefix exposes the env variables to the client-side and should ONLY be done in a dev environment to avoid security issues.
Searching the next.js documentation I found this:
// file: next.config.js
module.exports = {
env: {
customKey: 'my-value',
},
}
// Now you can access process.env.customKey
// For example, the following line:
// return <h1>The value of customKey is: {process.env.customKey}</h1>
// Will end up being:
// return <h1>The value of customKey is: {'my-value'}</h1>
So it seems, if you are using next.js version at or before 9.4 you place env variables into next.config.js
They also include one warning:
Next.js will replace process.env.customKey with 'my-value' at build time. Trying to destructure process.env variables won't work due to the nature of webpack DefinePlugin.
If you are using version 9.4+ the documentation says you can use .env.local files and prefix env variables with NEXT_PUBLIC_ to have them exposed in the browser.
Of note with this method is: In order to keep server-only secrets safe, Next.js replaces process.env.* with the correct values at build time. This means that process.env is not a standard JavaScript object, so you’re not able to use object destructuring.
I have a netlify react app. which is connected to my github. I'm using emailjs for receiving the messages from whoever reaches to my app.
emailjs deals with three ids 'SERVICE_ID', 'TEMPLATE_ID' and 'USER_ID'. But I don't wanna use them openly in my component js file.
Driver Function
function sendEmail(e) {
e.preventDefault(); //This is important, i'm not sure why, but the email won't send without it
emailjs.sendForm(SERVICE_ID, TEMPLATE_ID, e.target, USER_ID)
.then((result) => {
window.location.reload() //This is if you still want the page to reload (since e.preventDefault() cancelled that behavior)
}, (error) => {
console.log(error.text);
});
}
I think you're referring to environment variables, in order to test that out locally it will vary per the stack you use for creating the app, if you use react create app you can create a .env file in the root of your project and populate the values
REACT_APP_SERVICE_ID ="your_value"
REACT_APP_TEMPLATE_ID ="your_value"
REACT_APP_USER_ID ="your_value"
Don't forget to exclude this file from git, to avoid pushing secrets in your repo. to do that add this to your .gitignore
.env
After that you can call the variables in your code using the process.env like this:
process.env.REACT_APP_SERVICE_ID
Now modify the code:
function sendEmail(e) {
// Your code
emailjs.sendForm(process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, e.target, process.env.REACT_APP_USER_ID)
// your promise
}
To make that work in netlify you would have to add the variable in your netlify project, follow this section to do that: https://docs.netlify.com/configure-builds/environment-variables/#declare-variables
As you noted I added the prefix REACT_APP_, this is because react create app does this:
Note: You must create custom environment variables beginning with
REACT_APP_. Any other variables except NODE_ENV will be ignored to
avoid accidentally exposing a private key on the machine that could
have the same name. Changing any environment variables will require
you to restart the development server if it is running.
If you are using gatsby or nextjs the env variables naming convention might change so please be aware of that.
You can set env variables on netlify. Please have a check the below images.
Check Adding env variables to react app
You can create a .env in your root dir and add your keys, api end points,... inside of it.
I have a react component which in development will redirect to a localhost url but in production to a different url. In my backend I have the same situation and there i solved it with a package called dotenv. I was wondering how someone would do this in a react front-end.
export default withRouter(function Login(props) {
useEffect(() => {
if(localStorage.getItem('jwt')){
props.history.push('/dashboard');
}
})
const handleLogin = () => {
window.location.href = "http://localhost:8000/auth/google";
}
return (
<LoginView handleLogin={handleLogin}/>
)
})
You can use dotenv to add environment variables to react as well. During app deployment(in the build process) the environment variables must be replaced with the corresponding URLs (as this is the most frequently encountered use case in front-end applications). This can be done while configuring the build process.
Here is an example using Webpack https://medium.com/#trekinbami/using-environment-variables-in-react-6b0a99d83cf5
The whole idea here is to create a file (called just .env) filled with
your environment variables. To prevent people from finding out your
local database password is the same one you use for every single one
of your accounts on the internet , I urge you to add the .env file to
your .gitignore. Your front-end code will refer to the same
environment variable (process.env.API_URL) on both environments
(development/production), but because you defined different values in
your .env files, the compiled values will be different.
I would suggest having a separate .env file for the react app as it should not be accidentally served with the website.
Create React App has a module(built around the node dotenv module) you can use for adding custom environment variables
https://create-react-app.dev/docs/adding-custom-environment-variables/
The environment variables are embedded during the build time. Since
Create React App produces a static HTML/CSS/JS bundle, it can’t
possibly read them at runtime. To read them at runtime, you would need
to load HTML into memory on the server and replace placeholders in
runtime, as described here. Alternatively you can rebuild the app on
the server anytime you change them.
Its depend on how you are using react.
If you are using react-script, you can go will above solution(https://create-react-app.dev/docs/adding-custom-environment-variables/).
But if you are using webpack, try to use DotenvPlugin in place of dotenv module (https://webpack.js.org/plugins/environment-plugin/).
In my opinion, pls don't follow method 1 use in medium link, as env should not be push on git but package.json need to be done.
i am creating react application using create-react-app,i am using node js as a backend development.
i can run it successfully in the local environment,but while having same application in the production build application doesn't set the "apiURL"
my backend url is=http://localhost:5001/
API_URL = process.env.REACT_APP_API_URL
actually i need to get my API_URL = http://localhost:5001
but i am getting API_URL is undefined in the production deploy
and on request of some backend api i am getting
http://localhost:3000/undefined/api/someapi
but actually i need to get the
http://localhost:5001/undefined/api/someapi
can any one help how can configure my environment variable dynamically depends on the host environment
sorry for my bad english
thanks in advance
You need to set different values of your variables depending on your environment. There're multiple possibilities, you can for example do it on script level in your package.json:
"scripts": {
"deploy:staging": "REACT_APP_API_URL=<paste-your-api-for-staging> ...",
"deploy:production": "REACT_APP_API_URL=<paste-your-api-for-production> ...",
}
Or you can use my personal favorite -> https://github.com/motdotla/dotenv for managing your env variables. It's based on different .env files for eg. .env.local or .env.production where you can set your values.
Right now, whenever I want to deploy a node.js server to my production server, I need to change all the IP/DNS/username/password for my various connection to my databases and external APIs.
This process is annoying, is there a way to verify if the currently running node.js instance is in cloud9ide or actually my production joyent smartmachine?
If I am able to detemrine (in my running code) on which server my node.js instance is running , I'll add a condition that set the values to the prod or dev.
Thank you
Normally you should run a node app in production like this:
NODE_ENV=production node app.js
Applications with Express, Socket.IO and other use process.env.NODE_ENV to figure out the environment.
In development you can omit that and just run the app normally with node app.js.
You can detect the environment in your code like this:
var env = process.env.NODE_ENV || 'development';
loadConfigFile(env + '.json', doStuff);
Resources:
How do you detect the environment in an express.js app?
I think the easiest way to set the environment is to pass command-line argument to your application.
node ./server.js dev
In your script you need to handle this argument and set configuration what you need for it.
var env = process.argv[2] || 'dev';
switch (env) {
case 'dev':
// Setup development config
break;
case 'prod':
// Setup production config
break;
}
Also, i was created module that makes the configuration process a bit easier. Maybe it will help you.
Actually, I would not recommend to store configuration values like database connection information, passwords, access tokens and such inside of actual application code for the following reasons:
Hardcoding those values make it difficult to change them later on. You will have to release a new version of the application to change those values.
This is a serious security violation, because production-grade configuration data and passwords shouldn't be stored in code. It's very easy to leak this sensitive data.
The better approach would be to externalize this data and pass it to your application during execution. This is normally done by means of environment variables. You just need to define unique environment variable for each peace of data that needs to be changeable between different environments.
For example: DB_HOST, DB_USER, DB_PASSWORD. Then you could pass those values to you app in production this way:
$ NODE_ENV=production DB_HOST=1.2.3.4 DB_USER=someusername DB_PASSWORD=somerandompassword /bin/node app.js
Actually, this values could be encrypted and added to the codebase and then decrypted during the deployment. However, make sure that decryption key is stored securely in deployment system or provided interactively by the release engineer. Shippable allows to do this out of the box.
In the development environment it gets simpler, because you can use very convenient dotenv module. Just create a .env file in your project's root directory and add all variables to it:
DB_HOST=1.2.3.4
DB_USER=someusername
DB_PASSWORD=somerandompassword
But, make sure to exclude it from you VCS, because each developer probably would want to have personal configuration. You can create a .env.dist file to contain default configuration, which later could be used as a template: cp .env.dist .env.
For that you can just check it out with the help of environment variables and you can perform any actions.
if (process.env.NODE_ENV === "production") {
//do something in production
}
if (process.env.NODE_ENV !== "production") {
//do something in development
}