Skip to main content

Integrating Frontend to Backend | MERN stack(100% working)

How to Integrate frontend to backend in MERN stack?

For integrating the frontend to backend just do two things.

Step1: Go and install cors on both side (front end as well as backend)

             To install cors simply open the folder into terminal and type npm install cors--save.

step 2: just go to your front end section(react app) open package.json file.
    
           and just add one line into package.json file.

          "proxy":"http://localhost:4000"

here i am using 4000, so what is 4000 ?. this is the port  on which our backend is listening. so it may be possible that u may have other port number on which your server is listening. so put yours port number on which your backend server is listening. and this proxy thing we have to add in frontend part not in backend part.

Now it may be possible that you want to know about cors.
so basically cors(Cross origin resource sharing) is a package. and by using this package we can communicate with other servers or we can send our data or files among each other. so it is basically a middleware. which makes us able to inetract with applications which is running on different ports.

Comments

Popular posts from this blog

Linked List Data Structure | Creation and Traversal

Introduction: In this tutorial we will create our linked list. Before writing code let's understand key words related to linked list: 1. Head:    first node of the linked list is called the head of the list. and this node is most important. 2.Tail:       last node is called the tail of the list which must points to  null.            step1: For creating the list first of all let's declare the structure of Nodes of the list: struct Node{ int val; struct Node *next; } step2: write main function: int main(){     int n;     cout<<"enter the number of Nodes:";     cin>>n;     struct Node* head = NULL;     struct Node* temp;     int m;     while(n--){         cout<<"enter the data into nodes:";         cin>>m;    ...

Target Sum | Backtracking Problem

Introduction: In this tutorial we are going to solve a problem "Target Sum" which is from leetcode. and believe me it's really a good problem to understand Backtracking(Recursion). and if you try to understand the problem as well as code you will get a clear picture of Backtracking. Problem Statement: Link To Problem You are given a list of non-negative integers, a1, a2, ..., an, and a target, S. Now you have 2 symbols + and - . For each integer, you should choose one from + and - as its new symbol. Find out how many ways to assign symbols to make sum of integers equal to target S. Input: nums is [1, 1, 1, 1, 1], S is 3. Output: 5 Explanation: -1+1+1+1+1 = 3 +1-1+1+1+1 = 3 +1+1-1+1+1 = 3 +1+1+1-1+1 = 3 +1+1+1+1-1 = 3 There are 5 ways to assign symbols to make the sum of nums be target 3. Solution: As given in question, we have two operation + and -. so we will make recursive call for + and - . and if we have sum as target and we have reached upto the last ind...

Construct Binary Tree from preorder and inorder | Data Structure

Introduction: In this tutorial we are going to see how we can construct the binary tree from given preorder and inorder. Prerequisites: you should know about binary tree traversal and on paper you can draw binary tree from given preorder and inorder traversal. Inorder:left->root->right; Preorder:root->left->right; Problem Statement: we have given two arrays. one for preorder and another for inorder. by using these two array we have to built a binary tree. eg: preorder = [3,9,20,15,7] inorder = [9,3,15,20,7] solution: Solution: We will follow recursive approach to solve this question.let's discuss how we can solve it. Trick: In the given preorder the very first element will be the root of the tree. then we will find root element in inorder also. and we know in inorder traversal we have left part then root and then right part of the tree. by using preorder we can get the root of the main tree and by using inorder and root we can get the left part and right part of the...