I am trying to add .env file and variables but I am unable to access any variable. I am using React Biolerplate Code.
I am following this React Docs File.
I have added one .env file in my root folder like this:
REACT_APP_SECRET_NAME=secretvaluehere123
And I am trying to access this using this code:
<small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
I am getting NODE_ENV as development but when I am trying to access:
REACT_APP_SECRET_NAME
I can't access it.
Mine react boilerplate is using:
cross-env NODE_ENV=development
in the start command.
I removed (cross-env NODE_ENV=development) from package.json but it is not working. I tried solutions from this answer: Possible answer.
According to React Docs it should work. I want to add api_url for local it should be x and for the production, it should be y:
The following issue from React Boilerplate seems to suggest a working solution:
Install env-cmd, a node module
Update your start script to use it:
{
start: "cross-env NODE_ENV=development env-cmd node server"
}
This should work if your .env is in the root folder as you've said.
Otherwise, you can specify the path of .env by doing so
{
start: "cross-env NODE_ENV=development env-cmd -f ./custom/path/.env node server"
}
I assume you are trying to access your .env variables inside index.html, if so then syntax is a bit different that in render function. Try to access it like this.
%REACT_APP_SECRET_NAME%
It looks like you're looking at two types of React starters:
React Boilerplate
Create React App
These aren't the same. I don't know React Boilerplate, but I'm not sure if they provide the same environment variables strategy with .env files as Create React App does.
Maybe have a look at the dotenv Node package and perhaps you can add that to your project. I think (not 100% sure) that Create React App uses the same one.
Seems like you have everything right. Just remember to restart your development server every time you change information in your .env file.
Also, your .env file needs to be in the root directory of your react app. You can find all this information in the React Docs - Adding Development Environment Variables In .env
Related
I'm in WSL2, and my react app does not update any changes at all, only updates when re-running "npm start"
I've tried "npm install react-dotenv" and creating an .env file with
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
doesn't work
tried in the package.json
"start": "CHOKIDAR_USEPOLLING=true react-scripts start"
doesn't work
any suggestions? I don't even mind manually refreshing the browser, it's just that it won't update unless I restart the whole thing.
You do not have to install an additional dotenv package since Create-React-App already supports environment variables natively. However if you use environment variables, you need to prefix them with REACT_APP. e. g. REACT_APP_MY_VARIABLE.
Also note: Whenever you update an environment variable you have to restart the app.
Take a look at the official CRA docs.
Now for the reloading problem. There are a couple of possible solutions:
Add a .env file to your project without third party package and
define a variable named FAST_REFRESH=false. (CRA advanced
configuration)
If you are using a Virtual Machine try adding CHOKIDAR_USEPOLLING=true to your .env file.
There is another common problem in CRA ^17.0.1 with hot reloading (Github issue - Hot Reload stopped working with React "^17.0.1")
if (module.hot) module.hot.accept();
Finally (and this is the most likely solution in my opinion) try to move your project folder to somewhere, where npm can automatically recompile in WSL. E. g. move project from your desktop to your actual home directory.
I am starting with a new code base and I am a little confused. I look in package.json and specialized '.' configuration files and I don't see any configuration. Yet the components return JSX so there is some kind of transpiling happening. The build goes to a specific folder. There is a port assigned that gets assigned on 'npm start'. I could go on and on but the point is all of this seems to be 'normally' configured. But I am not sure where to look for this configuration or how best to modify it. For instance what if I want to modify the 'configuration' to use TypeScript? Or add testing?
These configurations are by default created when you create a react project and the role of the package.json file is to show you the versions that you are using if you will include externals library to use inside your app.
for using typescript or using anything external and including it inside your app then you will include it using npm which is responsible to add your new packages inside the node_modules folder and the version number inside your package.json.
for using test this will be normal files you will create inside your app and use npm run test and it will show for you the results.
for making your project to be typescript then you will use
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript
when I create a .env.local file in my project root, it's not setting up properly.
in the file, I have my API key like so
API_KEY=SOME_API_KEY
Then when i try to access it in getServerSideProps with process.env.API_KEY, it doesn't work. When I console.log(process.env.API_KEY) i get undefiend. Which I assume is because the file isn't set up properly?
I even tried installing dotenv but I know you don't need that with Next.js.
next config file
module.exports = {
reactStrictMode: true,
}
You’ll notice that the browser will log undefined. This happens since the environment variable is only defined on our server so far.
Since Next.js 9.4, Next.js will make all environment variables that start with NEXT_PUBLIC_ available to the client without any further configuration!
Create .env (all environments), .env.development (development environment), .env.production (production environment), .env.local (local enviroment)
Add the prefix NEXT_PUBLIC_ to all of your environment variables.
NEXT_PUBLIC_BASE_URL=http://localhost:3000/
Use with prefix process.env
process.env.NEXT_PUBLIC_BASE_URL
Stop the server and restart it:
npm run dev
OR
yarn dev
.env.local works with +v9.4.
if you are using older version please try with next config file https://nextjs.org/docs/api-reference/next.config.js/environment-variables.
Note:
Next.js will replace process.env.customKey with 'customKey' at build time. Trying to destructure process.env variables won't work due to the nature of webpack
Restarting the server solved it for me as in #Igmer Rodriguez comment above .
I'm trying to use the create-react-app in an existing app without using the default index.html built in that links the scripts generated by running yarn start. These files include /static/js/bundle.js, static/js/0.chunk.js, static/js/main.chunk.js, and /main.somehash...hot-update.js
I set INLINE_RUNTIME_CHUNK=false in my .env but no files ever get generated in the static folder when running yarn start.
You can either eject your project or use react-app-rewired to customize your webpack configuration. This way, you can modify the path to output js.
I created an app with react-create-app, I just dev it using npm start, that seems to do react-scripts start according to my package.json
Whenever I add a proxy to my package.json, I get this error message :
Invalid Host header
I get the idea, it's a security issue. What I don't get is how to fix it. I read several issues on github and QA here on the subject, the fix is easy enough, but I still don't get where to put it
in the end, I will add a whitelist of hosts. I think I saw it's possible.
but where do I put this config to start :
devServer: {
disableHostCheck: true
}
Another way to disable the host check would be to set the following environment variable: DANGEROUSLY_DISABLE_HOST_CHECK=true
That can be done by e.g. adding that line to .env file in the root of the project. Note that this is not a secure solution and should not be used in production.
You can manage it without changing stuff inside node_modules or by ejecting your project by using an npm package called react-app-rewired.
It basically has an option to override your default hardcoded settings for webpack that are inside a create-react-app boilerplate setup.
You put a config-overrides.js inside your root folder and change the scripts inside your package.json to match react-app-rewired instead of the react-scripts. This way you can override all the webpack config that's hard coded inside a react project by writing it down inside a config-overrides.js file.
The syntax is inside this link. There's also an article about it which can be found here.
I never found out where to put the webpack.config.js. It didn't work in the app root directory where I suppose it should go, it didn't do anything for me, I just ended up modifying where react-scripts invokes webpack-dev-server and then put the disableHostCheck to true directly before invoking.
Basically I changed the following line :
const serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
to :
var serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
serverConfig.disableHostCheck = true;
that's really not good practice (modify the code and disableHostCheck), but now I know I can actually modify settings, I'll just go for a whitelist, may be one day I'll understand why it doesn't care about my webpack.config.js ^^
Install react-app-rewired:
npm install react-app-rewired --save-dev
change package.json script to
"start": "set PORT=80&&react-app-rewired start",
then add a file named .env.development, add this line:
HOST=buzzbuzzenglish.com
then add config-overrides.js file (you can override some webpack settings there but don't have to - still, file have to be created)
finally you type npm start, then browser will open and navigate to buzzbuzzenglish.com and renders normally without the Invalid Host Header error.