I'm running a node project + reactjs on it. the process.env works inside the server.js but undefined in other js file.
I tried to build the project using webpack and then run the nodejs project like
here are the steps I did.
yarn build
CALLBACK_URL=https://localhost:9999/ BASE_URL=https://localhost:9443/ node server.js
I'm getting the log in server.js
process.env.BASE_URL https://localhost:9443/
process.env.CALLBACK_URL https://localhost:9999/
but I'm getting process.env.BASE_URL : undefined in other js file.
Server.js is in the back end and is in scope of your "process" object.
React runs in the client browser engine. You need to get the environment variables From the "process" object available in your back-end's webpack build context into the webpack React Built files!
See
dotenv-webpack plugin
webpack-define plugin
for a possible elegant solution
in webpack.config you can add these lines in plugins section:
new webpack.DefinePlugin({
'process.env.CALLBACK_URL': 'https://localhost:9999/',
'process.env.BASE_URL': 'https://localhost:9443/'
})
Related
In my project I'm using the Microsoft React Redux Template (Microsoft React) with typescript. My problem is I need to keep set of frontend configurations like API base URL ect. I've used a Config.Json file. But when the project is build, every javascript file that referenced the Config.Json file get referenced and copied the content of the .Json file, at the minifying process. So I have to manually go through the each minified .js file and change the configurations when moving from Dev to QA or QA to Prod.
I tried to keep the configurations in a JS file, but still same problem occurs.
Is there a way to stop referencing the Config.Json file at JS minifying process. So that when I change the Config.Json file, the changes of the configurations will get applied.
Maybe you need to use environment variables.
npm i dotenv -D
import configTest from 'config.test.json';
import configProd from 'config.prod.json';
const config = process.env.BUILD_TARGET === 'prod' ? configProd : configTest;
Saleor Storefront using EnvironmentPlugin of webpack
Like
new webpack.EnvironmentPlugin(["npm_package_version", "BACKEND_URL"])
My .env file
# .evn
npm_package_version = 6.4.1
BACKEND_URL = https://demo.getsaleor.com
In my Index file
console.log("env",process.env.BACKEND_URL) is undefined
On start project as development Log
WARNING in EnvironmentPlugin - BACKEND_URL environment variable is undefined.
I set Default value like this
new webpack.EnvironmentPlugin({'BACKEND_URL': 'https://demo.getsaleor.com'})
This is working fine but i need to get value from .env file
Please help me solve this problem
.env files are not picked up by themselves. You need to use a package in order to specify the file in which you've defined your environment variables.
You can use dotenv for nodejs and DotenvPlugin for webpack in order to expose your environment variables through .env file.
DotenvPlugin for webpack
dotenv package for nodejs
Hope this helps. Happy coding !
So I have a file named .env with the following contents
NODE_PATH=./src
NODE_ENV=what
TEST=test
And I am calling that in my index.js in my react app.
require("dotenv").config();
console.log(process.env);
...
shows the following output
NODE_ENV: "development"
PUBLIC_URL: ""
I thought maybe I declared another .env file somewhere else, but thats not the case. I searched my project for the PUBLIC_URL and it's not located anywhere in my project. I don't even know what else to check at this point.
In react code you have to compile the environment variables in at, well, compile time because at run-time there it is only possible to access a fake process.env object. Unless you are using server side rendering.
See also: Passing environment-dependent variables in webpack
If you're using CRA then you'll need to do: REACT_APP_TEST=test and reload the dev server to have it show up as expected in your app.
If you have used create-react-app for bootstrap your project then you have to use environment variables like REACT_APP_NODE_ENV=development.
After adding any new environment variable, you have to restart the development server.
create-react-app is supposed to inject your .env variables into your React app. I have used the REACT_APP_ prefix with my variables in my .env and .env.development.
However, when debugging the code I've found that process itself is undefined. So when trying to access an environment variable with process.env.REACT_APP_SOMETHING_URL, the root process variable is undefined.
So at the time I misunderstood how process.env works in create-react-app. I expected this to be available at runtime. However, because React is a frontend library and process is a Node backend entity you cannot directly access process.env while executing code in the browser.
This makes sense because in-browser executed Javascript doesn't know about Node; therefore, process.env isn't available.
What happens instead is that during a webpack build, webpack will inject the corresponding environment variables into your frontend asset code. So if you have a production .env file, those variables are provided during the build.
$ yarn add --dev react-app-env
or
$ npm install react-app-env --save-dev
well let me begin by saying process is an eventEmitter what lives in the nodejs world if you log it in a browser, no matter if it is angular, CRA, Vue, jquery all of them will print undefined because in the context of a browser it does not exist.
now on a CRA you is able to use process.env.YOW_VAR, basically bcuz CRA creates an Obj call process.env that is the reason behind why you need to add a prefix to them env vars which I think is REACT_APP.
const YOW_VARS = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[ key ] = process.env[ key ];
return env;
},
{
NODE_ENV: process.env.NODE_ENV || 'development',
}
);
const s = {
'process.env': Object.keys(YOW_VARS).reduce((env, key) => {
env[ key ] = JSON.stringify(YOW_VARS[ key ]);
return env;
}, {}),
};
more or less they have something like that
The react-app-env package suggested on another post on this page is deprecated, as described in its repo: https://github.com/tuchk4/react-app-env
I recommend using dotenv instead.
I am using Grunt in my project (Yeoman based), but when I try to build my app with the grunt build command, I have the following errors when images are loaded :
GET http://mydomain.com/dist/images/login_user.png 404 (Not Found)
I understand that they are not found after the building process because they have been minified and now they have this name :
3f59e511.login_user.png
But I can not find what to change in my bower.json file to change their name by the minified one in my app's files. Thanks for your help
UPDATE
I used the dependency below to correct a problem I had before ( see AngularJS Inject service in .run function
uglify: {
options: {
mangle: false
}
},
And I think the error could come from that but I don't know exactly why.
Actually when you build your application the dist folder will be cleaned up, and grunt then will create new files using the source files that you specified in the gruntfile. So use the grunt copy dependency to move the image to the dist folder at runtime.