I am currently working on a reactjs project which has been created with create-react-app. env-cmd package is a little too old and is not under maintenance anymore so I'd like to use dotenv instead. Is there a way that I can specify a .env file just like we usually do with env-cmd but with the help of dotenv instead? Or is there a suggested method I should be following using dotenv?
Thanks in advance.
You can specify the path with .config({path: "directory"})
// Using require syntax
require("dotenv").config({ path: "../.env" });
// Using import syntax
import dotenv from "dotenv"
dotenv.config({path: "../.env"})
Related
I've a react app created using create-react-app. I recently saw some article saying to add few loaders to webpack config file. But I've no idea where to find the webpack.config.js file inside a react project.
Really appreciate any ideas or suggestions.
Webpack config is not available in CRA. If you want to get one, you have to do an eject (https://create-react-app.dev/docs/available-scripts/), but if you don't need to make eject, or you don't wanna do this, you can use the library which is the wrapper of CRA, for example: CRACO or rewrite
I am exploring this React project from the repo below and the process.env is not returning any values (undefined when I console logged them). The variables are declared in a .env.local file created at the root as per the repo's instructions and all prefixed by REACT_APP_ There is no webpack involved. It uses react-scripts to load with yarn start.
Can anyone advise why it is not working?
git clone https://github.com/figment-networks/learn-solana-dapp
Thanks:)
You could try without configuring dotenv first, by renaming .env.example to .env.local or any of the below link names, as I believe this was created with create-react-app(because of the presence of react-scripts)
https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used
Although it has dotenv installed, it doesn't seem to use it, to use it one would do the following:
Add this to the beginning of index.js inside src:
import path from 'path';
import dotenv from 'dotenv';
dotenv.config({ path: path.join(__dirname, '../.env.example') });
dotenv has to be configured in order to use its variables, but shouldn't be needed under create-react-app
%ENV_VARIABLES%
I tried this and restarted create-react-app with npm start, its not working for me, any help would be appreciated. Thank You
instead of putting it inside index.html, do the following and the variables will be available inside your app (auto added to meta).
create a .env file
var=var_value
then install dotenv
npm install dotenv
put the following at the top of the file where you want to use env variable
require('dotenv').config()
You can access it like the following
process.env.var
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
I want to avoid using relative pathing when importing other files. For example, I'd like to change something like:
import InputBar from ../../pages/InputBar
to
import InputBar from components/pages/InputBar
Normally I would modify the resolve options in webpack, but I'm using create-react-app and don't have access to it.
I would like to avoid using npm run eject. Is there another way to avoid using relative pathing for imports?
You can use rewired which will give you access to configuring react-scripts to your liking and not having to eject from CRA.