DEV Community

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

Posted on


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

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 :



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 πŸŽƒ

Alt Text

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 πŸŽƒ

Alt Text

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.

Alt Text

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.

Alt Text

Happy CODINGπŸ’»
Danke for reading 🌈

Oldest comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!