Up next in 10
Node.js & JS Tutorial to Start HTTP Live Server With Hot Reload Using http-server & live-server
Feb 5, 2025
Get the full source code of application here:
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you two
0:04
packages which are useful for uh making
0:08
this HTTP server and serving your HTML
0:12
CSS JavaScript files inside the browser
0:14
with hot reload changes as well so let's
0:18
suppose you are developing a web
0:20
application and you want a live
0:22
server so we have this written this
0:25
simple HTML file here and side by side
0:27
you'll see this output as well so as you
0:30
make any sort of changes these changes
0:32
will be reflected back so we are Simply
0:35
Having This Server right here which is
0:37
running on port number 4,000 so there
0:40
are two packages essentially uh in
0:42
nodejs if you want to I Will Show You
0:45
comparison here the first package is
0:47
simply
0:49
http-server so if you go to npmjs.com uh
0:52
just search for this package so it's a
0:54
zero
0:55
configuration package so you can even
0:58
globally install this uh pack package
1:00
inside your command line so whenever you
1:02
are building any kind of application you
1:04
can start a HTTP server inside a
1:07
directory so the command is very simple
1:09
here uh you can globally install this
1:11
package npmi HTTP Das server and then
1:15
you can add this flag here- G which is
1:17
for Global so this is actually the
1:20
command you can install this package so
1:23
once this package is installed you can
1:26
simply type this command wherever you
1:28
are developing the application so so
1:30
open the command line there and simply
1:33
write HTTP server dasp and followed by
1:36
the port number so which port number you
1:39
want to use so you simply write like
1:41
this so this will start this HTTP server
1:43
on this uh port number so if you try to
1:47
open uh Local Host
1:51
4,000 you will see the you will see the
1:53
output here of this HTML
1:56
file and
1:58
uh if you make any sort of change here
2:01
uh let's suppose if
2:03
I this obviously doesn't support hot
2:05
reload because if you make changes you
2:07
do need to reload the page so if I
2:09
refresh it you will see the changes
2:10
taken place but it's a handy way still
2:15
if you want to start a simple HTTP
2:17
server so this is actually a handy way
2:20
so here you can write HTML CSS code as
2:23
well so JavaScript code as well so you
2:26
can see that
2:32
so you can see that you can use it with
2:34
any technology if you are building an
2:36
HTML CSS we application or react angular
2:40
as well you can just use this package
2:42
the second package in comparison to this
2:44
it has a additional
2:46
feature with the hot odd reload so this
2:50
package is also you can globally install
2:52
the name of the package is live server
2:55
so this is the name this is a command
2:57
here so you install it globally as well
3:00
so once installed globally you can
3:02
simply type live server inside the
3:05
directory wherever you are building your
3:06
project so if you just type live server
3:09
it will start the development server at
3:11
Port number 8080 it will automatically
3:14
open this you will see
3:17
that and now if I make any sort of
3:19
change here now it has the capability of
3:23
H reload so as I make the change you
3:25
will see it will automatically restart
3:28
the application and the change will
3:30
reflect so if I again make any sort of
3:33
change
3:35
here so this is a fully fleshed HTTP
3:38
server with H or reload as well so as
3:41
you make changes side by side you will
3:43
see the result so these are the two
3:45
packages essentially HTTP server and
3:47
live server and if you want to change
3:50
this port number so you can simply write
3:53
Dash Das port and then you
3:56
can just choose your own port number so
3:58
this is the command here so you can pass
4:00
this option Dash dashport and if you
4:03
enter it you will see it will open this
4:05
server at Port number 4,000 so in in
4:08
this way you can change the port number
4:10
as well so essentially these are the two
4:12
packages in nodejs which supports uh if
4:15
you want to open the HTTP server with
4:19
hot reload as functionality as well so
4:22
thank you very much for watching this
4:24
video and also check out my website as
4:26
well freem mediat tools.com uh which
4:29
contains thousands of tools regarding
4:31
audio video and image and I will be
4:33
seeing you guys in the next video