How to Connect Front End and Backend

Last Updated : 22 Oct, 2025

Every successful web application is built on the synergy between how the frontend interacts with the backend. Whether you're building a dynamic website or a robust web application, the seamless connection between these two realms is predominant. In this guide, we'll unravel the mysteries behind connecting the front end with the back-end, shedding light on the process in a friendly format. But before directly jumping into that, let's first discuss what these technologies actually are.

Connecting Frontend and Backend

Communication Methods

1. RESTful APIs:

REST (Representational State Transfer) is an architectural style for creating web services.  This is the most popular approach. It generally uses HTTP request and response methods in order to exchange data in a normalize format. The backend exposes different endpoints for multiple functionalities, and then frontend makes calls to these endpoints in order to retrieve or manipulate data.

Procedure:

  1. Client (Frontend):
    • Makes an HTTP request to a specific API endpoint (URL) on the server.
    • Specifies the request method (GET, POST, PUT, DELETE) and the desired action.
    • May include request body with data for specific actions like creation or update.
  2. Server (Backend):
    • Receives the request and identifies the targeted endpoint based on the URL and method.
    • Processes the request, accessing databases, performing calculations, or interacting with other services.
    • Prepares a response containing the requested data, status code (e.g., 200 for success), and any additional information.
  3. Client:
    • Receives the response and interprets the status code and data content.
    • Updates the user interface or performs further actions based on the returned information.

Example Source Code:

Frontend (JavaScript):

JavaScript 
// Making a GET request to the '/products/123' endpoint
fetch('/products/123', {
  method: 'GET',
})
  // Handling the response by converting it to JSON
  .then(response => response.json())
  // Handling the data obtained from the response
  .then(data => {
    // Update UI with product details from the response
  });

Backend (Node.js):

Node 
app.get('/products/:id', (req, res) => {
  const productId = req.params.id;
  // Fetch product data from database
  db.getProduct(productId).then(product => {
    res.json(product); // Send product data as JSON response
  }).catch(error => {
    res.status(500).send(error.message); // Handle error
  });
});

2. WebSockets:

A persistent, bi-directional communication protocol that connects a client and a server is called WebSockets. WebSockets, in contrast to conventional HTTP, allow for continuous communication, which makes them appropriate for applications that need real-time updates.

Procedure:

  1. Client:
    • Establishes a WebSocket connection with the server using a specific URL.
    • Sends messages to the server containing data or requests.
  2. Server:
    • Receives messages from the client and processes them.
    • May send messages back to the client with updates or responses.
    • Can maintain persistent connections with multiple clients simultaneously.
  3. Client:
    • Receives messages from the server and updates the user interface accordingly.
    • Can react to server updates in real-time, enhancing user experience.

Example Source Code:

Frontend (JavaScript):

JavaScript 
// Creating a new WebSocket instance and connecting to 'ws://localhost:3000'
const ws = new WebSocket('ws://localhost:3000');

// Event listener for handling incoming messages
ws.onmessage = (event) => {
  // Parsing the JSON message received from the server
  const message = JSON.parse(event.data);
  // Updating the UI based on the received message data
};

// Sending a message from the client to the server
ws.send('Hello from the client!');

Backend (Node.js):

Node 
const wsServer = new WebSocket.Server({ port: 3000 });

wsServer.on('connection', (socket) => {
  // Event listener for handling incoming messages from a client
  socket.onmessage = (event) => {
    // Parsing the JSON message received from the client
    const message = JSON.parse(event.data);
    
    // Process the message (e.g., handle business logic)
    
    // Sending a response back to the client
    socket.send('Server response');
  };
});

3. Server-Side Rendering (SSR):

In Server-Side Rendering, the server crafts the webpage's HTML and sends it to the browser, sparing the client's browser from this hefty task. The initial page loads much more quickly with this technique, which also improves search engine optimisation (SEO) and makes it easier for search engines to understand the content.

Procedure:

  1. Client:
    • Sends a request to the server for a specific page.
  2. Server:
    • Generates the complete HTML page with the requested content using server-side scripting languages.
    • Embeds any necessary JavaScript code within the HTML.
  3. Client:
    • Receives the entire HTML page and displays it directly.
    • Once loaded, the embedded JavaScript code takes over for dynamic interactions.

Example Source Code:

Backend (Python):

Python 
from flask import Flask, render_template

app = Flask(__name__)

# Define a route for the root URL ('/')
@app.route('/')
def index():
    # Fetch data from the database and prepare for rendering
    data = get_data_from_database()  # Replace this with your actual data retrieval logic
    # Render the 'index.html' template and pass the retrieved data for rendering
    return render_template('index.html', data=data)

# Placeholder for fetching data from the database
def get_data_from_database():
    # Replace this function with your actual logic to retrieve data from the database
    # For now, returning a sample data
    return {'message': 'Hello, data from the database!'}

if __name__ == '__main__':
    # Run the Flask application
    app.run(debug=True)

Frontend (HTML):

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask App</title>
</head>
<body>
    <h1>Data from the Database</h1>
    <p>{{ data }}</p>  <!-- Use the 'data' variable in the template -->
</body>
</html>

4. GraphQL

Client interactions with backend services are revolutionised by Facebook's GraphQL query language for APIs. It gives developers a more effective, adaptable, and developer-friendly method of retrieving data by addressing many of the issues that our conventional RESTful APIs pose.

Procedure:

  1. Client:
    • Defines a GraphQL query specifying the desired data structure and fields.
    • Sends the query to the GraphQL server.
  2. Server:
    • Receives the query and parses it to understand the requested data.
    • Fetches data from various sources (databases, APIs, etc.) based on the query.
    • Combines the data into a single response matching the requested structure.
  3. Client:
    • Receives the response and easily extracts the specific data needed.
    • Updates the user interface based on the retrieved information.

Example Source Code:

Frontend (JavaScript):

JavaScript 
const query = `
  query {
    user {
      id
      name
      posts {
        id
        title
        content
      }
    }
  }
`;

// Making a POST request to the GraphQL endpoint
fetch('/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ query }),
})
  .then(response => response.json())
  .then(data => {
    // Update UI with user data and posts from the response
  });

Backend (Node.js):

Node 
const { ApolloServer, gql } = require('apollo-server');

// Define GraphQL schema using the gql tag
const typeDefs = gql`
  type User {
    id: ID!
    name: String!
    posts: [Post!]!
  }

  type Post {
    id: ID!
    title: String!
    content: String!
  }

  type Query {
    user: User
  }
`;

// Define resolvers to handle GraphQL queries
const resolvers = {
  Query: {
    user: () => {
      // Fetch user data and posts from the database (mock data for illustration)
      return {
        id: '123',
        name: 'John Doe',
        posts: [{
          id: '456',
          title: 'My first post',
          content: 'This is my first post!',
        }],
      };
    },
  },
};

// Create an Apollo Server instance with the defined schema and resolvers
const server = new ApolloServer({ typeDefs, resolvers });

// Start the server and listen for incoming GraphQL requests
server.listen().then(({ url }) => {
  console.log(`GraphQL server running on ${url}`);
});

Conclusion

Connecting the frontend and backend is like establishing a secure communication channel between two distinct domains: the user interface and server functionality. By grasping the unique roles of each side and adopting suitable communication methods, you pave the way for efficient data exchange and enhanced user interaction.

Whether opting for RESTful APIs, leveraging WebSockets, implementing Server-Side Rendering, or embracing GraphQL, the crux lies in selecting the strategy aligned with your project's specific needs. With careful planning and well-written code, you can create a strong communication channel that will provide your users with a smooth and effective experience.

Explore these technical concepts thoroughly, perfect your strategy, and create solutions that will enhance your web applications to a whole new level!

Comment
Article Tags:
GBlog
Web Technologies

Explore