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 🌈

Top comments (0)

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Articles for Your Portfolio

Integrate the articles of your profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the API: How to Fetch Your Articles for Your Portfolio with React