Render HTML and JSON Data in expressjs

Render HTML and JSON Data in expressjs

Hello viewers, whats up!! Here i am back again with the new series of  Nodejs. Node.js is an open-source, cross-platform JavaScript runtime environment that allows developers to run JavaScript code outside of a web browser. It is built on the V8 JavaScript runtime engine, which is the same engine that powers the Google Chrome browser. 

Node.js is commonly used for building APIs (Application Programming Interfaces). You can create RESTful APIs or GraphQL APIs using Node.js to handle HTTP requests and serve data to client applications.

Key features of Node.js include:

# Asynchronous - Node.js is designed to be asynchronous, meaning it can handle a large number of concurrent connections without the need for multithreading.

# Single-threaded, Non-blocking I/O - Node.js uses a single-threaded event loop to manage asynchronous operations.

# npm (Node Package Manager): npm is the default package manager for Node.js, allowing developers to easily manage and install libraries and dependencies for their projects.

# Server-Side Development: Node.js is commonly used for server-side development, where it excels at handling real-time, data-intensive applications, such as chat applications, online gaming, and streaming services.

 

But Why we are using Expressjs Here, just because of incase if you want to make API using nodejs directly then its a very complex method to create API and integrate directly thats why we are using Expressjs framework and in this framework with the help, you can create RESTful API easily.

Make Page using ExpressJS

We will make first simple page in expressjs then we will adjust HTML and JSON data. Like this with explaination.

const express = require('express')

This line imports the Express framework into your script. express is a web application framework for Node.js that simplifies
the process of creating web servers and handling HTTP requests and responses.



const app = express()


This line creates an instance of the Express application. This app object is the core of your web server and is used to define routes,
middleware, and other settings.


app.get('', (req, resp) => {
    resp.send("Welcome This is our Home Page")
})


app.get('/about',  (req, resp) => {
    resp.send("Welcome This is our About Page")
})

app.get('/contact', (req, resp) => {
    resp.send("Welcome This is our contact page")
})

This code defines a route for handling HTTP GET requests to the path /about. When a request is made to this endpoint, the server responds with a JSON object containing a message - Welcome This is our About Page or Home page or contact page.


app.listen(5000)

The app.listen() method starts the server and makes it listen for incoming requests on the specified port (3000 in this case).

Now we will ready to change some code for Rendering HTML.

Render HTML Data

We are using Back Tick ( ` ` ) Here in resp.send - input tag and button tag.

app.get('/about', (req, resp) => {
   resp.send(`
   <input type="text" placeholder="Enter your name"  />
   <button>Submit</button>
   `)
})

Render JSON Data

 We are using object to make JSON Data here.

app.get('/contact', (req, resp) => {
   // resp.send("Welcome This is our contact page")
   resp.send([
    {
        name: 'Atul',
        email: 'kumaratuljaiswal222@gmail.com'
    },
    { 
        name: 'Kumar Atul Jaiswal',
        email: 'atulthehacker222@gmail.com'
    }
   ])
})

Now think about it if we can get value in input box from parameter then how we can achieve. Let's  code it.

if we type parameter name with value in url like this - http://localhost:5000/about?name=atul. So but how we can code it actually.

Don't worry visit this blog - CLICK HERE

app.get('/about', (req, resp) => {
   resp.send(`
   <input type="text" placeholder="Enter your name" value="${req.query.name}" />
   <button>Submit</button>
   `)
})

Routing Page  

With the help of anchor tag <a href=""></a> you can route where you want to redirecting when user click on it.

app.get('', (req, resp) => {
    
    resp.send(`
    Welcom To Home Page
    <br />
    <a href="/about">Go To About Page</a>
    `);
})

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer