Step-by-Step Guide to Using Images with import.meta.url in React

Hello viewers, i am back again for you and now we will start from reactjs. So, we are ready for implemenation Best Practices for Handling Local Images in React Applications and set result. Actually we are making some project like E-commerce where we can implement react rating start.

React

import.meta.url

When building React applications, working with static assets like images is a common requirement. In this article, we’ll walk through how to efficiently import and display images using import.meta.url, which is especially useful in modern JavaScript and frameworks like Vite.

What is import.meta.url?

import.meta.url provides the absolute URL of the current module. It’s a feature introduced in ES modules to handle module-related metadata. In the context of React and tools like Vite, it’s often used for dynamically importing static assets like images.

Why Use import.meta.url for Images?

# It ensures proper resolution of local images at runtime.
# It’s ideal for bundlers like Vite, where traditional require() or relative paths might not work as expected.
# It provides a clean and scalable way to manage static assets in your project.

Step-by-Step Guide

1. Create the Image Component

We’ll create a file named Image.jsx to define our static images and use import.meta.url for dynamic URL resolution.

Image.jsx

// Image.jsx
const IMAGES = {
    image1: new URL('./google-logo.png', import.meta.url).href
};

export default IMAGES;

 

Here’s what’s happening:


# The new URL() constructor dynamically resolves the image path relative to the module using import.meta.url.
# .href provides the URL as a string for use in the src attribute of the <img> tag.



2. Create the Image Display Component

Now, we’ll create another component called GetImage.jsx to display the image.

// GetImage.jsx
import React from 'react';
import IMAGES from './images/Image';

function GetImage() {
  return (
    <div/>
      <div/>
        <img src={IMAGES.image1} alt="Google Logo" />
      </div/>
    </div/>
  );
}

export default GetImage;

 

Here’s what this does:


# The IMAGES object imported from Image.jsx provides the resolved URL of the image.
# The <img> tag uses the resolved URL from IMAGES.image1 to display the image.



3. Add the Image to Your Project


Make sure the google-logo.png image is placed in the correct folder (./images/ in this case) relative to Image.jsx.

# Benefits of This Approach

# Dynamic Resolution: Using import.meta.url ensures that paths are resolved dynamically, reducing potential errors.
# Scalability: Centralizing image URLs in one file (Image.jsx) makes it easy to manage and update images.
# Compatibility: Works seamlessly with modern bundlers like Vite.

Common Mistakes to Avoid

# Incorrect Relative Paths: Ensure the image file is located correctly relative to Image.jsx.

# 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

 "Mastering JavaScript Arrays: Understanding push() and pop() Methods"

Arrays are one of the most versatile and commonly used data structures in JavaScript. Two frequently used methods for manipulating arrays are push() and pop(). In this article, we’ll dive deep into these methods, their use cases, and clarify some common misconceptions.

 
Overview of push() and pop()
 

# push() Method:

# Adds one or more elements to the end of an array.
# Returns the new length of the array.



Syntax:


array.push(element1, element2, ..., elementN);

Example:

const arr = [];
arr.push(1); // Adds 1 to the array
arr.push(2); // Adds 2 to the array
console.log(arr); // Output: [1, 2]

pop() Method:


# Removes the last element from an array.
# Returns the removed element. If the array is empty, it returns undefined.

 

Syntax:

array.pop();

Example:

const arr = [1, 2];
const removed = arr.pop(); // Removes the last element (2)
console.log(arr); // Output: [1]
console.log(removed); // Output: 2

Breaking Down the Code

Here’s the code example in question:

const arr = [];
arr.push(1); // Adds 1 to the array
arr.push(2); // Adds 2 to the array
arr.pop(2);  // Removes the last element, but the argument (2) is ignored
console.log(arr);

 
Explanation:


# arr.push(1) and arr.push(2) add 1 and 2 to the array, resulting in [1, 2].
# arr.pop(2) removes the last element (2). However, the argument passed to pop() (2) is ignored because pop() does not accept any arguments.
# After the pop() operation, the array becomes [1].



 

Disclaimer

Understanding JavaScript substring():

The JavaScript substring() method is a powerful tool for extracting parts of a string. However, its behavior can sometimes be confusing for beginners. This article will help you understand how substring() works, its quirks, and common mistakes you should avoid.

What is the substring() Method?

The substring() method in JavaScript extracts a portion of a string and returns it as a new string without modifying the original string. It takes two arguments:

# Start index: The position where the extraction begins (inclusive).
# End index: The position where the extraction ends (exclusive).

string.substring(startIndex, endIndex)


If the endIndex is omitted, the method extracts the rest of the string starting from startIndex.

Example Usage

Let’s look at some basic examples:

let x = "Learn"
console.log(x.substring(5, 1))

console.log("kumaratuljaiswal.in");

Disclaimer

 How setTimeout Uses Closures with var and let 

 
This blog we have seen javascript  closure wtih setTimeout and  solve let and var issue wtih forloop basic and how is it work, we have already seen some Javscript,  mongodb basic, CRUD operation, connect mongodb with nodejs, read, update, delete, POST, GET API etc. we should not face any problem while making Database, collection(table) and using the data in nodejs even whenever we will make API. Read data from mongodb in nodejs

• # What is Closure with setTimeout
• # Solve for loop issue wtih let and var using closure concept

What is Closure ?

A closure is created when a function remember its lexical scope even when its executed outside the scope. In other terms we can say that a closure give a function access to variable from its surrounding environment. 

Don't worry i will give you an example - Suppose that you have a backpack with your notes, pens and books etc. You leave the classroom (your outer function), but you still have access to everything in your backpack (your closures). Whenever you need to solve a problem later, you can pull out the knowledge you saved in your backpack.

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

const add5 = makeAdder(5);
const add10 = makeAdder(10);

console.log(add5(2)); // 7
console.log(add10(2)); // 12

Here in this code makeAdder function takes a single argument x and return a new function.

The return function takes a single argument  y  and return the sum of x and y.

add5 and add10 are closures that maintain their own separate lexical environment , holding the value of x from when they were created 

Example : A Basic Closure

function outerfunction() {
   const outerVariable = 'Hello, Atul';


   function innerFunction() {
     console.log(outerVariable);
   }

   return innerFunction() {
}

const myClosure = outerFunction();
myClosure();        //output: 'Hello, Atul'

What's Happening Here?

# innerFunction is returned from outerFunction.

# Even though outerFunction has finished executing, innerFunction still remembers outerVariable.

# A function is defined inside another function.

# The inner function "remembers" the variables of the outer function.

How setTimeout Uses Closures:

 # Inner Function: When you pass a function to setTimeout, that function forms a closure. It "remembers" the variables and values from the scope where it was created.
 

# Delayed Execution: setTimeout schedules the function to be executed after a specified delay. But even after the surrounding code has finished running, the inner function (callback) still has access to its original scope's variables.

for(var i=0; i< 10; i++)
{
    setTimeout(function(){
        console.log(i)
    })
}

 

in this code why always showing output 10, 10, 10...

The reason the code logs 10 repeatedly is due to how closures work in JavaScript. When the setTimeout callback executes, it accesses the value of i from the surrounding scope (the loop). By the time the callbacks execute, the loop has already finished, and i is equal to 10 for all of them. 

Explanation:

 

# The var keyword declares i in the function scope (or global scope if not inside a function). This means all iterations of the loop share the same i variable.

# The setTimeout function schedules the callback to execute after a certain delay, but the loop doesn't wait for the callbacks to execute—it continues running to completion.

# By the time the callbacks from setTimeout are executed, the loop has already completed, and the value of i has reached 10.

 Fix: Using let

The easiest way to fix this issue is to use the let keyword instead of var. Variables declared with let have block scope, so each iteration of the loop gets its own copy of i.

 A function is defined inside another function.

The inner function "remembers" the variables of the outer function.

for (let i = 0; i < 10; i++) {
    setTimeout(function () {
        console.log(i);
    }, 0);
}

Here, each i is scoped to its specific iteration, so the output will correctly log 0, 1, 2, ..., 9.

Disclaimer

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

Why we need of middleware in Expressjs ?

 Middleware Types ?

• Application-level middleware
• Router level middleware
• Error-handling middleware
• Built-in middleware
• Third-party middleware

Route Level Middleware

Before stating route level, we have already told you about Application level middleware. CLICK HERE for more info. 

Route level middle that is applied specifically to a particular route or group of routes in a web application. This allows developers to define middleware that is only executed for certain routes, providing a more fine-grained control over the application's behavior.

How to implement on a particular route ?

If you carefully discuss saw our about previous blog then we already know about request filter like we were used app.use(requestFilter);

const reqFilter = (req, resp, next) => {
   console.log("reqFilter")
next();
}

const express = require("express");
const app = express();



const reqFilter = (req, resp, next) => {
    if (!req.query.age) {
      resp.send("Please provide your age");
    } else if (req.query.age < 18) {
      resp.send("You can't access this becuase of you are minor ");
    //   Please provide your age as a parameter like ?age=18
    } else {
      next();
    }
  };

  app.use(reqFilter);

app.get("/", (req, resp) => {
    resp.send("Welcome to Home Page")
  });
  
  app.get("/user", (req, resp) => {
    resp.send("Welcome to user page");
  });
  



app.listen(5000);

But now we want only apply middleware on particular page so don't use app.use(requestFilter); . Let's check it how we can implement on a particular page.

app.get("/user", reqFilter, (req, resp) => {
    resp.send("Welcome to User Page")
  });
  

Whole Code

const express = require("express");
const app = express();



const reqFilter = (req, resp, next) => {
    if (!req.query.age) {
      resp.send("Please provide your age");
    } else if (req.query.age < 18) {
      resp.send("You can't access this becuase of you are minor ");
    //   Please provide your age as a parameter like ?age=18
    } else {
      next();
    }
  };

 

app.get("/", (req, resp) => {
    resp.send("Welcome to Home Page")
  });
  
  app.get("/user", reqFilter, (req, resp) => {
    resp.send("Welcome to user page");
  });
  



app.listen(5000);

Make middleware in different file

Why we need of separate file for this because of if we have too much routes in index.js or good pratice for us to make a separate file then it will be very complexity so for this you can first make a file in the same place where that you have index.js file so create a middleware.js file and code it.

module.exports = reqFilter = (req, resp, next) => {
    if (!req.query.age) {
      resp.send("Please provide your age");
    } else if (req.query.age < 18) {
      resp.send("You can't access this becuase of you are minor ");
    //   Please provide your age as a parameter like ?age=18
    } else {
      next();
    }
  };

 Here above in the code only one line we have to added like module.exports = 

const express = require("express");
const app = express();

const reqFilter = require('./middleware');

route.use(reqFilter);

 app.get("/", (req, resp) => {
    resp.send("Welcome to Home Page")
  });
  
  app.get("/user", reqFilter, (req, resp) => {
    resp.send("Welcome to user page");
  });
  
app.listen(5000);

 Implement Route more Than one page except one Page

const express = require("express");
const app = express();

const reqFilter = require('./middleware');

const route = express.Router();

//app.use(reqFilter);

route.use(reqFilter);

app.get("/", (req, resp) => {
    resp.send("Welcome to Home Page")
  });
  
  route.get("/user", (req, resp) => {
    resp.send("Welcome to user page");
  });
  
  route.get("/contact", (req, resp) => {
    resp.send("Welcome to contact page");
  });
  

  app.use('/', route);
   
app.listen(5000);

Here as you can see this only home page is shown as normal page except user or contact page.

# 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

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

Why we need of middleware in Expressjs ?

In express.js, middleware functions have access to the request object ('req'), the response object ('resp'), and the next middleware function in the application's request-response cycle. They can perform various task, modify the request and response object, end the request-response cycle, and call the next middleware in the stack.

Apply middleware

const reqFilter = (req, resp, next) => {
   console.log("reqFilter")
next();
}

 
# req, resp for modify in middleware

# next as a function we will consider

NOTE - if we not consider next(); then our page like (home, about, profile page) not move ahead.

Full Implementation of Middleware

Here we first write simple get req and resp (request, response) from static page after that we implement middleware.

const express = require("express");
const app = express();


app.get("/", (req, resp) => {
    resp.send("Welcome to Home Page")
  });
  
  app.get("/user", (req, resp) => {
    resp.send("Welcome to user page");
  });
  



app.listen(5000);

Run by this command nodemon index.js or node index.js 

const express = require("express");
const app = express();



const reqFilter = (req, resp, next) => {
    if (!req.query.age) {
      resp.send("Please provide your age");
    } else if (req.query.age < 18) {
      resp.send("You can't access this becuase of you are minor ");
    //   Please provide your age as a parameter like ?age=18
    } else {
      next();
    }
  };

  app.use(reqFilter);

app.get("/", (req, resp) => {
    resp.send("Welcome to Home Page")
  });
  
  app.get("/user", (req, resp) => {
    resp.send("Welcome to user page");
  });
  



app.listen(5000);

# 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

Make Common Header for Dynamic Pages in EJS

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.

Why we need of EJS ?

Here we gonna discuss about ejs template because of you are all aware about our previous blog where we have to written static page name where we don't need to implement database and in static page for not possible but for this template you can Database connectivity with dynamic page.

Make login.ejs Page in Views Folder

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
</head>
<body>

    <h1>This is our Login Page</h1>
    
</body>
</html>

 Just like login.ejs you can create so many file with (.ejs) extension.

Make Common Folder

Here we will make folder name as common folder in views folder and inside common folder create a new file with the extension of (.ejs) Navbar.ejs . and we will use this navbar.ejs 's menu in all the profile.ejs, login.ejs, about.ejs etc file.

Navbar.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar</title>
    <style>
        .navbaritem {
            display: flex;
            list-style: none;
            font-size: 20px;
           
        }
        li {
            margin-left: 10px;
        }
    </style>
</head>
<body>


    <div>
        <nav class="navbaritem">
            <li>Navbar</li>
            <li>Navbar</li>
            <li>Navbar</li>
        </nav>
    </div>
    
</body>
</html>

Get Data of  Navbar.ejs in Every file (.ejs) 

 <%- include('common/navbar'); %>

 Unescaped raw output with <%- %>

# 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

Loop in ejs embedded javascript template

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

Why we need of EJS ?

Here we gonna discuss about ejs template because of you are all aware about our previous blog where we have to written static page name where we don't need to implement database and in static page for not possible but for this template you can Database connectivity with dynamic page.

 How to Make loop in EJS?

First we will make object in index.js (we have already told you please check continuously visit our blog. 

app.get('/profile',(__,resp) => {
    const user = {
        name: 'atul',
        email: 'kumaratuljaiswal222@gmail.com',
        city: 'hyderabad',

        skills: ['php', 'js', 'reactjs', 'nodejs']
    }
  resp.render('profile', {user});
   
})

Here, we will consider app.get method and inside this method set as name whatever you want to set to parameter for url ('/profile). Then ( __, resp ) this line goes to define first parameter as a req or __ space after that response as a resp parameter. 

After that written a const user object with property and last line goes to resp.render with rendering profile.ejs page and object name.

Whole Code (index.js)

const express = require('express')
const path = require('path')

const app = express();

const publicPath = path.join(__dirname, 'public');


app.set('view engine', 'ejs');


app.get('/profile',(__,resp) => {
    const user = {
        name: 'atul',
        email: 'kumaratuljaiswal222@gmail.com',
        city: 'hyderabad',

        skills: ['php', 'js', 'reactjs', 'nodejs']
    }
  resp.render('profile', {user});
   
})


app.listen(5000)

Make loop in Profile page

<!DOCTYPE html>
<html lang="en">
<head>
     <title>Profile Page (EJS)</title>
</head>
<body>

    <h1>Welcome <%= user.name %></h1>
    <!-- <h1>EmailID <%= user.email %></h1>
    <h1>City <%= user.city %></h1>
     -->
    
     <% user.skills.forEach((item) => { %>
     <li><%= item %></li>
   <% }) %>
    
</body>
</html>

# 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

Embedded javascript template

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.

Why we need of EJS ?

Here we gonna discuss about ejs template because of you are all aware about our previous blog where we have to written static page name where we don't need to implement database and in static page for not possible but for this template you can Database connectivity with dynamic page.

Install EJS

With this command npm i ejs, you can install ejs template.

In this nodejs we are not less make dynamic website but 95% we can say make API in nodejs but you need to aware all about that.

Setup Dynamic Routing

First we set ejs template in our index.js to tell about ejs and we will use.

app.set('view engine', 'ejs');

Now we will make folder name as views (by default configuration name views). So, don't change the name and make HTML Code.

Now we can consider profile page in index.js page so in this time we will write (resp.render) except resp.sendFile. Otherwise DON'T FORGET TO VISIT OUR PREVIOUS BLOG - CLICK HERE

app.get('/profile',(__,resp) => {
  resp.render('profile');
   
})

WAIT WAIT WAIT - This is not dynamic page...oh oh ho :-)

When we connect mongodb database then we will make dynamic through get data from database but dont worry at this time. we will get data from index.js file and write an object and after that get data in profile.ejs

app.get('/profile',(__,resp) => {
    const user = {
        name: 'atul',
        email: 'kumaratuljaiswal222@gmail.com',
        city: 'hyderabad'
    }
    resp.render('profile', {user});
   
})

Whole Code (index.js)

const express = require('express')
const path = require('path')

const app = express();

const publicPath = path.join(__dirname, 'public');


app.set('view engine', 'ejs');


app.get('',(__,resp) =< {
    resp.sendFile(`${publicPath}/home.html`)
   
})





app.get('/profile',(__,resp) =< {
    const user = {
        name: 'atul',
        email: 'kumaratuljaiswal222@gmail.com',
        city: 'hyderabad',

        skills: ['php', 'js', 'reactjs', 'nodejs']
    }
  resp.render('profile', {user});
   
})


app.get('/about',(__,resp) =< {
    resp.sendFile(`${publicPath}/about.html`)
})

app.get('/contact',(__,resp) =< {
    resp.sendFile(`${publicPath}/contact.html`)
})


app.get('*',(__,resp) =< {
    resp.sendFile(`${publicPath}/404.html`)
})



app.listen(5000)

 

Get Data in Profile.ejs

Escaped output with <%= %> (escape function configurable)

For more info ( https://www.npmjs.com/package/ejs )

<!DOCTYPE html>
<html lang="en">
<head>
     <title>Profile Page (EJS)</title>
</head>
<body>

    <h1>Welcome <%= user.name %></h1>
    <!-- <h1>EmailID <%= user.email %></h1>
    <h1>City <%= user.city %></h1>
     -->
    
    
</body>
</html>

# 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