How to use & create .env Files in React JS

We need .env files to save data that can be changed even when the project is deployed on server. If we save the constants in a constant.js file than this file will also be deployed on the server. And If we want to make some chnages in that we need to deployed the code of the project again.

When we call apis in React JS or any other Framework we need Base Url and endpoint of the Api like

If we are running our project on our local system. The Base url will be http://localhost:3000 and endpoint for login api will be something like /api/login.

But if we deploy the project on server its endpoint remains same but its Base url is changed.

So to manage the situation we make constant in .env file and use it in the whole project code. And deploy the project on server. Once project is deployed we have option to change the Base url of the project using environment variables concept.

Example :

REACT_APP_BASE_URL=https://reqres.in
REACT_APP_API_KEY=ghdfhgc344b54b

Note - We can install package .dotenv to use any name of the variable.

If we don't want to install the package then we can prefix our env variables with REACT_APP

then it will also work in React app without installing any packages.

Check the video for more detailed explaination :

Please leave a comment if you have any questions . Will be happy to help you.

All THE BEST Guys.

Comments

Shopping Cart React.js Project with Explanation✅ [ Simple Ecommerce Website using Reactjs ]

Hello guys in this video we will discuss shopping cart web app. first we need to install the basic react app using - npx create-react-app app-name The folder structure should be containing three files in components folder as below : In App.js : import './App.css' ; import Header from './components/Header' ; import ProductList from './components/ProductList' ; import CartList from './components/CartList' ; import { useState } from 'react' ; function App () { const [ product , setProduct ] = useState ([ { url : 'https://rukminim1.flixcart.com/image/300/300/l51d30w0/shoe/z/w/c/10-mrj1914-10-aadi-white-black-red-original-imagft9k9hydnfjp.jpeg?q=70' , name : 'TRQ White Shoes' , category : 'Shoes' , seller : 'AMZ Seller Ghz' , price : 1999 }, { url : 'https://5.imimg.com/data5/KC/PC...

Create A Date Range Picker in React JS (By Saifi Code)

To Create A Date Range Picker in React JS , need to install following packages : npm i antd npm i moment Step 1 : import DatePicker from antd and get RangePicker from this package Step 2 : In the JSX Use the package , you will start get picker ui Example : To get the values use onChange method and save values in state Try to console the state to check if the values are updating App.js File : import 'antd/dist/antd.css' ; import { DatePicker } from 'antd' ; import { useState } from 'react' ; import moment from 'moment' ; const { RangePicker } = DatePicker ; function App () { const [ dates , setDates ] = useState ([]) console . log ( dates ) return ( < div style = { { margin : 20 } } > < RangePicker onChange = { ( values ) => { setDates ( values . map ( item => { ...

MERN Authentication - Login, Register, Verification Email, Forget Password, User Name & Logout on Navbar

In The React Side : The folder structure will be : Lets start from App.js On this file we will be adding routing , install the package react-router-dom : import './App.css' ; import React from 'react' ; import { BrowserRouter as Router , Routes , Route , Link } from "react-router-dom" ; import Signup from './components/Signup' ; import Signin from './components/Signin' ; import Home from './components/Home' ; import ForgetPassword from './components/ForgetPassword' ; import NewSubmit from './components/NewSubmit' ; function App () { return ( < div > < Router > < Routes > < Route path = "/signup" element = { < Signup /> } /> < Route path = "/signin" element = { < Signin /> } /> < Route path = "/" e...

Saifi Code

Search This Blog