Integrating Backend and Frontend Code: A Guide to Connecting MERN Stock Technology by Tech Nanisai

In this tutorial, we will be exploring how to connect backend and frontend code in a MERN (MongoDB, Express, React, Node.js) stack application. Connecting the backend and frontend is an important step in building a full-fledged web application as it allows the two separate parts of the application to communicate with each other seamlessly.

Before we start with the tutorial, let’s take a quick look at what each part of the MERN stack does:

1. MongoDB: A NoSQL database that stores data in JSON-like documents. It is used to store the data for our application.

2. Express: A backend framework for Node.js that helps in building APIs and handling request-response cycles.

3. React: A frontend library for building user interfaces. It allows developers to create interactive UIs for web applications.

4. Node.js: A JavaScript runtime environment that allows us to run our backend server using JavaScript.

Now, let’s dive into the steps for connecting backend and frontend code in a MERN stack application:

Step 1: Setting up the backend

Before connecting the backend and frontend, make sure you have your backend server up and running. You can set up your Express server using Node.js and connect it to your MongoDB database. Here’s a basic example of how you can set up your backend server:

// server.js

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/mydatabase', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

app.use(cors());
app.use(express.json());

// Define routes
app.use('/api', require('./routes/api'));

const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

In this example, we are setting up our Express server, connecting to MongoDB, enabling CORS, and defining routes for our API. You can add more routes and controllers based on your application’s requirements.

Step 2: Setting up the frontend

Next, let’s set up our frontend application using React. You can create your React app using Create React App or any other method of your choice. Here’s a basic example of how you can create a simple React component:

// App.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('/api/data')
      .then(res => setData(res.data))
      .catch(err => console.log(err));
  }, []);

  return (
    <div>
      {data.map(item => (
        <p key={item._id}>{item.name}</p>
      ))}
    </div>
  );
};

export default App;

In this example, we are making a GET request to our backend server to fetch data from the API. We are then displaying the data in our React component.

Step 3: Connecting the backend and frontend

To connect the backend and frontend, we need to ensure that our frontend application can communicate with the backend server. We can achieve this by using Axios or any other HTTP client library in our frontend code.

In our example, we are using Axios to make HTTP requests to our backend server. You can install Axios using npm:

npm install axios

Once you have installed Axios, you can import it in your React component and make HTTP requests to your backend API as shown in the example above.

Make sure to use the correct URL in your Axios requests to match the routes defined in your Express server. For example, if your backend server is running on http://localhost:5000, you can make a request to http://localhost:5000/api/data to fetch data from the API.

And that’s it! You have successfully connected your backend and frontend code in a MERN stack application. Now you can build out your application further by adding more routes, components, and functionality as needed.

I hope this tutorial was helpful in understanding how to connect backend and frontend code in a MERN stack application. If you have any questions, feel free to ask. Thank you for reading!