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

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

DFS Application | Graph Problems | Max Area of Island

Introduction: In this tutorial, we are going to implement DFS to solve another important problem. this is a good question for interview point of view. Problem Statement: Leetcode Input: [[0,0,1,0,0,0,0,1,0,0,0,0,0], [0,0,0,0,0,0,0,1,1,1,0,0,0], [0,1,1,0,1,0,0,0,0,0,0,0,0], [0,1,0,0,1,1,0,0, 1 ,0, 1 ,0,0], [0,1,0,0,1,1,0,0, 1 , 1 , 1 ,0,0], [0,0,0,0,0,0,0,0,0,0, 1 ,0,0], [0,0,0,0,0,0,0,1,1,1,0,0,0], [0,0,0,0,0,0,0,1,1,0,0,0,0]] Output: 6 Solution: So basically we are going to use DFS to solve this problem, and we will use a 2D vector to track the already visited element. let's see the code: Full Code: int helper(vector<vector<int>>& grid,int x, int y, vector<vector<int>>&visited){ if(x<0 || x>=grid.size() || y<0 || y>=grid[x].size()) return 0; if(grid[x][y]==0){ return 0; } if(visited[x][y]==1){ return 0; } visited[x][y]=1; // cout<<x...

programming for beginners

Search This Blog