%20-%20AX5400(3).png "Load Separate HTML Files in expressjs")
Load Separate HTML Files 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.
HTML FIles
Why i am sharing this code. you are all aware about our previous blog
where we have to written different method to render html data but this time we
can change our method due to some reason. Don't worry we will discuss but
first see it.
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).
Reason - Still why we are not using this method becuase of This method have seen how simple HTML can be rendered, but if you create a complete website then you will have to create pages as well and if you are getting HTML rendered, there will be a lot of content inside it, due to which if we write all the content in one place, it can create problems for us. Hence we create a separate page for the website.
Let's code
We will make a file first as a index.js (parent folder Where ever we can access all the html pages) then we will make a folder and inside this folder we will make different different pages of html.
Now we will code in index.js first as always we are already written every blog post of nodejs,expressjs 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).
But Now there is some difference in above the code and we will add some extra code like this
const path = require("path")
This line shown us to getting a actual path from our project. Like this E:\coding-for-blog\public
const publicPath = path.join(__dirname, 'public');
This code defines a directory path join and public is our
folder name.
app.use(express.static(publicPath));
This code will load the static page.
Index.js
const express = require('express')
const path = require('path')
const app = express();
const publicPath = path.join(__dirname, 'public');
app.use(express.static(publicPath));
app.listen(5000)
Now we will create home.html, about.html and contact.html in public folder and write simple html content as you want.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Home Page</h1>
</body>
</html>
and access with the url like this - http://localhost:5000/home.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
%20-%20AX5400(4).png "Routing Params by request and response in expressjs")
%20-%20AX5400(1).jpg "Make a RESTFul API in nodejs using ExpressJS")
