Load HTML pages using Express Js | Express JS Tutorial | Node Js | Learning Points
Summary
TLDRThis 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
💻 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.
🌐 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.
Mindmap
Keywords
💡Express
💡Nodemon
💡Routing
💡HTML
💡Public Folder
💡Path
💡Template Literals
💡Response
💡EJS
💡Template Engine
💡Node.js
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
浏览更多相关视频
Blade templates & Layouts | Laravel 10 Tutorial #7
Create Portfolio website HTML & CSS only ✅ Part - 1
⛅ Cloudflare Workers as a Web Server (with Webpack) #serverless (lesson 2)
React tutorial for beginners ⚛️
Node.js + Express - Tutorial - What is Express? And why should we use it?
HTML and CSS for Beginners Part 2: Building your first web page!
5.0 / 5 (0 votes)