Mapping PORT Values in .env of Frontend & Backend & error: Cannot read property 'error' of undefined (anonymous function)

#node #react #javascript #webdev

A Full stack stands on the port values of Front - Back ends. Linking the port values are crucial I guess in running a smooth software.

You ever got this ⏬⏬ error ⏬⏬ then there is a SOLUTION FOR THIS BELOW

🎃 Unhandled Rejection (TypeError): Cannot read property 'error' of undefined (anonymous function) 🎃

Here I am going to tell the important part of linking ends in a stack. While making front to back server requests you should make sure the port values and paths of api are specific. Here I prefer MERN stack for now so ya you can assume :

🟡 FRONT-END : REACT.Js

🟡 BACK-END : NODE.Js

1️⃣: BACK-END Node.Js

🔵 You run nodemon app.js
🔵 You run Backend on port 3000
🔵 Backend is active to fetch all requests on port 3000

Good now you are running Backend on port 3000 🎃

2️⃣: FRONT-END React.JS

🔵 You run npm start on your Frontend React.Js
🔵 Your React says something is already running on port 3000
🔵 So you like to change port to say 3001
🔵 Frontend is active on port 3001

Good now you are running Frontend on port 3001 🎃

3️⃣: Create a .env file in FRONTEND

🔵 Open .env file
🔵 Specify a url name say REACT_URL
🔵 Declare REACT_URL=http://localhost:3000
🔵 3000 port is the same value of your backend active port.

4️⃣ DONE FINAL STEP
So while making all the GET POST PUT PATCH DELETE. . . requests from backend to frontend make sure the db is connected and ports that your .env uses is correct to make requests on such routes.