Load HTML pages using Express Js | Express JS Tutorial | Node Js | Learning Points

Summary

This tutorial covers the basics of setting up an Express.js server, installing Nodemon, and implementing routing. It demonstrates how to create HTML pages like 'index.html', 'blog.html', and 'contact us.html' in a 'public' folder and serve them using Express. The instructor guides viewers on how to access the public folder and render HTML files dynamically. The video also teases upcoming content on template engines like EJS for Express.js, promising to build real-life applications in future tutorials.

Takeaways

• 🛠️ Discussed installation of Express and Nodemon, and routing concepts in Express.
• 📂 Created a 'public' folder to store HTML files for the web application.
• 📄 Created three HTML files: index.html, blog.html, and contact-us.html.
• 💻 Demonstrated how to render HTML pages using Node.js Express framework.
• 🔧 Used the 'path' module to access the 'public' folder and its contents.
• 📝 Explained the importance of using constants for directory paths.
• 📡 Showed how to send HTML files as responses to browser requests.
• 🔄 Mentioned the need to restart Nodemon to see changes in HTML files.
• 🎥 Announced upcoming discussions on template engines like EJS in Express.
• 🌐 Highlighted the potential to create real-life web applications using Express and EJS.

Q & A

What did the video discuss about Express and Nodemon installation?

The video discussed how to install Express and Nodemon, which are essential tools for setting up a Node.js application.

What is the routing concept in Express?

The routing concept in Express refers to defining paths for client requests and linking them to appropriate handler functions to process the requests.

How can you create an HTML page using Express?

You can create an HTML page by creating a folder named 'public' and placing your HTML files inside it. Express can then serve these files when requested.

What is the purpose of creating a 'public' folder in an Express application?

The 'public' folder is used to store static files like HTML, CSS, and JavaScript files that are served to the client without any server-side processing.

How do you access the 'public' folder in an Express application?

You can access the 'public' folder by using the 'path' module in Node.js to construct the directory path and then serving files from that directory using the 'sendFile' method.

What is the significance of using constants in the script?

Using constants, such as for the path to the 'public' folder, ensures that the value cannot be accidentally changed or overwritten, which can lead to more stable and predictable code.

How do you serve an HTML file like 'index.html' in Express?

To serve an HTML file, you use the 'response.sendFile' method in your route handler, specifying the path to the file relative to the 'public' folder.

Why is it necessary to restart Nodemon when changes are made to the HTML files?

Restarting Nodemon is necessary to ensure that the latest changes to HTML files are reflected in the application, as the server needs to be reloaded to pick up new static file changes.

What is the next topic the video series will cover after discussing HTML rendering?

The next topic in the video series will be about template engines in Node.js Express, specifically focusing on EJS (Embedded JavaScript templates).

What are some features of Express.js that will be discussed in upcoming videos?

Upcoming videos will discuss features of Express.js such as middleware, routing, template engines, and how to create real-life applications using these features.

Outlines

00:00

💻 Setting Up HTML Pages with Node.js Express

The script discusses how to set up HTML pages using Node.js Express framework. It starts by mentioning the installation of Express and Nodemon, and the concept of routing in Express. The speaker then guides on creating a 'public' folder to store HTML files such as 'index.html', 'blog.html', and 'contact us.html'. Each file is briefly described with a simple HTML boilerplate and specific titles. The script emphasizes the simplicity of serving HTML files using Express and demonstrates how to access the 'public' folder and serve the 'index.html' file. It also introduces the concept of using 'path' to navigate directories and serve files, suggesting the use of constants for better maintainability.

05:00

🌐 Serving HTML Files in Express

This paragraph explains how to serve HTML files using Express. It details the process of sending responses to the browser, specifically how to send HTML files using the 'response.sendFile' method. The script provides an example of how to dynamically construct file paths using template literals and the 'publicPath' variable. It also touches on the necessity of restarting Nodemon to reflect changes in HTML files. The speaker demonstrates accessing different pages like 'index.html', 'blog.html', and 'contact us.html' by navigating to their respective URLs. The paragraph concludes with a teaser for upcoming content on template engines like EJS within the Express framework, hinting at future tutorials on creating real-life applications with Node.js.

Keywords

💡Express

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. In the video, Express is used to create a server that serves HTML pages. It is fundamental to the video's theme of teaching how to build web applications with Node.js.

💡Nodemon

Nodemon is a tool that helps develop Node.js applications by automatically restarting the node application when file changes in the directory are detected. It is mentioned in the script as a way to refresh the server when changes are made to the HTML files.

💡Routing

Routing refers to the process of defining paths through which users can reach specific resources within a web application. In the video, routing is discussed in the context of Express, showing how to set up paths to different HTML pages.

💡HTML

HTML, or HyperText Markup Language, is the standard markup language for creating web pages. The script describes creating HTML files like 'index.html', 'blog.html', and 'contact us.html', which are then served by the Express application.

💡Public Folder

A 'public' folder is a directory in a web application that typically contains static files like HTML, CSS, and JavaScript that are accessible to the client. In the video, the 'public' folder is used to store HTML files that Express serves to the browser.

💡Path

Path refers to the location of a file or directory in a file system. The script explains how to use Node.js's 'path' module to navigate to the 'public' folder where the HTML files are stored.

💡Template Literals

Template literals are a feature in JavaScript that allows embedding expressions within a string, using a template-like syntax. In the script, template literals are used to dynamically construct file paths for serving HTML files.

💡Response

In the context of web development, a 'response' refers to the data sent from the server to the client in response to a request. The video script describes using Express to send HTML files as responses to client requests.

💡EJS

EJS, or Embedded JavaScript templating, is a templating engine that allows for the creation of dynamic HTML pages. The script mentions that future videos will discuss EJS, indicating it as an alternative to static HTML for more interactive web applications.

💡Template Engine

A template engine is a server-side software tool that combines template files with data to produce HTML files dynamically. The script hints at the use of template engines like EJS in Express applications for generating HTML on the fly.

💡Node.js

Node.js is a JavaScript runtime that allows developers to write server-side JavaScript code. The video is centered around using Node.js to create a web server with Express, demonstrating the creation and serving of HTML pages.

Highlights

Introduction to installing Express and Nodemon.

Discussion on routing concepts in Express.

Creating a simple HTML page using Node.js Express framework.

Creating a folder named 'public' for storing HTML files.

Creating 'index.html', 'blog.html', and 'contact us.html' files.

Using HTML boilerplate template for creating pages.

Writing content for 'home', 'blog', and 'contact us' pages.

Accessing the 'public' folder in Node.js.

Using 'path' module to navigate through directories.

Creating a constant variable for the 'public' folder path.

Sending HTML pages to the browser using Express.

Using 'response.sendFile' to serve HTML files.

Accessing 'index.html', 'blog.html', and 'contact us.html' through routing.

Refreshing the page to see updates without restarting Nodemon.

Demonstrating how to render HTML files through Express.

Teaser for upcoming discussion on template engines in Node.js Express.

Introduction to using '.ejs' files for templating in Express.

Announcement of future tutorials on creating real-life applications with Node.js.

Invitation to like and subscribe for upcoming videos.

Transcripts

hello friends last day we discussed

about the uh how to install express how

to install nodemon and we discussed

about the routing concept in express and

here we are getting some things here so

here we are getting the home page and if

i just want to get the blog link so

we'll get the blog right so now

if i just want to create a html page and

if i want to load that then how you can

do this right simple node.js express

framework provides the simple things so

let's create some html files so

just go here and let's create a folder

that is suppose public and inside the

public folder we will store all the

things so

just create a folder

public and inside the public folder

let's create a

index dot

html

or let's create another two files that

is home

sorry home not home that is blog.html

or you can write contact us

dot

html

right so in this way we are creating

three files and let's

use the html boiler template and simply

just i am not going to

explain all the designing part but i

want to show you how to render the html

page through the node.js so simply write

suppose home

and inside the h1 tag just write

this is home page

right and just copy all those things and

paste it here

also here and let's change the title

contact us

also write this is contact us

page

and also here this is

blog

and this is blog page all right so these

three files are here now the thing is

how we can access this index.html or

blog.html so basically in node.js if i

can access this folder

that means we can access all those

things right so for now i just closing

all the things

hello homepage right so i just

removing this thing and inside the here

we will just load the html page right so

i just remove all those things we don't

need this so actually to send anything

to the browser we going to use the

absent and now we are going to send the

html page so we'll have some different

methods so before that let's try to

access this public folder right so

inside the public folder all the things

here

so to access this so let's require the

path so simply create another uh

constant variable so simplify constant

path

or you can use lead very things like no

matter so if you change this as a

constant it will be more better right so

why we are using constant basically

constant cannot be overwritten and one

time it's can be declared right so

simply write path equal to

uh

require

path

okay so path is included and let's use

this so how can we use this so simply

just console

dot log

and let's check what we actually getting

in the directory name so if i just use

simply this javascript things that is

the underscore underscore

d

name

means director name so just go here we

can see

home

hp desktop node express right so inside

this directory name we are getting all

those things

now we need to go inside node express

slash

public folder so how we can do this

simply we can add the public here

so here what path actually doing so

let's create another variable so simply

write let

and i want to create a variable like a

public path right so we will use this

public path everywhere and let's use

path

dot

join that is direct to name and my

folder name is public so let's add this

now if i just going to console log these

things

let's see how we getting or what

actually we are getting

public path so just here we are getting

the node express public so that is the

important things so we can access this

right now the thing is going to use the

index.html when we just run these things

and we need to use the blog html if i

just use slash blog.html

so simply

just

use

response so i want to send a response to

the browser so simply write response and

you need to send the file so simply

write

send file and we'll use

this public path

and here simply use the template literal

and use this curly braces

and we will use index

dot html right and in the same way just

copy this

and inside here public path actually we

are getting the full directory and the

public and then we are just calling the

file name that is for homepage we are

calling index.html for blog we just uh

calling blog.html

and for contact us we are just calling

contact us dot html

right so

for now we don't need console log so

actually we tested it what is inside the

console log so simply close this

with no need of these things so simply

remove this right

and as we are changing in the

html file sometime is not loaded so

let's restart the nodemon once again

and we can get the output so simply just

refresh this this is

block page and this is block and if i

just use simply slash or we can see this

is home page so basically these things

actually coming from here this is home

page and if i just use the contact us so

we'll get the contact us also right so

in this way we can render any html file

through the express and it's very simple

so hope you will like this video and

still if you have any queries about this

video please comment in below comment

section next day we are going to discuss

about one of the template engine in the

node.js express framework right so as we

are using the dot html file so inside

the express we have a dot ejs file so we

will discuss about that things from our

upcoming videos so it may have to see

tutorial on eds and we can create a real

life application so if i just want to

create any web application or any

websites using node we can use the

node templating that is the express

templating actually ejs we can use ejs

so

from next we are going to start about

the ejs and we can discuss about the

features of express js like a midi lower

and there is lots of things so we'll

discuss these things step by step

so if you love this video please like

and subscribe this channel for upcoming

video thanks for watching this video

have a good day bye