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

Disjiont Set Union-Find Data Structure | Code In C++

 Introduction:  In this tutorial we are going to write full program of disjoint set union find advance data structure in c++.  Problem Description: Disjoint Set Union (DSU) is an advance data structure, which basically uses in graph algorithms to find cycles. Codes:  Method1: Brute Force #include<bits/stdc++.h> using namespace std; int find(int f,vector<int>&dsuf){     if(dsuf[f]==-1)         return f;     return find(dsuf[f],dsuf); } void union_op(int from, int to, vector<int>& dsuf){     dsuf[from]=to; } bool isCycle(vector<pair<int,int> >&edge_list, vector<int>&dsuf){     for(int i=0;i<edge_list.size();i++){         int parent1=find(edge_list[i].first,dsuf);         int parent2=find(edge_list[i].second,dsuf);         if(parent1==pare...

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...

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...