How to Pass Node.js Output to Web Interface ?

Node.js is a versatile runtime that excels at building server-side applications. One of the common use cases is to pass the output from a Node.js server to a web interface, allowing users to interact with server-generated data in a browser. This article will walk you through the process of passing Node.js output to a web interface, covering the fundamental concepts and providing practical examples.

Approach

To pass Node.js output to a web interface, set up an Express server, define a route that generates data, and send the data as a JSON response. The client can then fetch and display this data on the web interface.

Installation Steps

Step 1: Make a folder structure for the project.

mkdir myapp

Step 2: Navigate to the project directory

cd myapp

Step 3: Initialize the NodeJs project inside the myapp folder.

npm init -y

Step 4: Install the necessary packages/libraries in your project using the following commands.

npm i express

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
   "express": "^4.19.2",
}

Example: Now create a file where we will write down the code to display the output on web interface.

// app.js

const express = require("express");

const app = express();

app.listen(5000, () => {
  console.log(`Server is up and running on 5000 ...`);
});

app.get("/", (req, res) => {

    let data = {
        name: "GFG",
        age: 18,
        male: true
    }

    res.send(data);
});

Output: To run node server, go to http://localhost:5000 in browser to see output.

node app.js

Conclusion

Passing Node.js output to a web interface involves setting up a server to handle requests and serve data, and creating a web interface to fetch and display this data. By following the steps in this guide, you can effectively connect Node.js server-side logic with a dynamic, user-friendly web front end. This capability is crucial for building interactive web applications that leverage server-generated data.