live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Browser-Sync Library HTTP Live Server With Hotreload Tutorial For Static Files & Node.js JS Web App
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 a new HTTP
0:05
live
0:06
server supported it's a JavaScript and
0:10
nodejs server so browser sync it is
0:13
called as if you just type on browser
0:15
skin this is actually their official
0:18
website and it actually you can start
0:21
your web application on a live server so
0:25
the command is very simple you install
0:27
it globally npm install dasg browser
0:31
sync so I have already installed it so
0:34
the feature is H Auto reload so if you
0:38
make any front-end application it can be
0:41
JavaScript CSS it can be nodejs angular
0:45
react vuejs any framework so you install
0:48
this globally first of all and after
0:51
this you can go to your folder wherever
0:54
you are building your
0:56
application and let me show you a very
0:59
simple examples we have a simple index.
1:01
HTML file here and we go to that
1:04
directory and then we can simply execute
1:07
this command which is browser sync and
1:09
we put this start here and we start the
1:12
server Das Das server and here we need
1:15
to watch for all these files here Das
1:17
Dash files and here you can inside
1:19
double codes you can put all the files
1:21
which you want to watch here so this
1:24
command is telling that all the files
1:26
which starts from html. CSS and Js
1:30
it will be watching so as soon as you
1:33
make changes it will hot Auto reload so
1:35
as soon as I run this command you will
1:37
see it will automatically start a
1:39
development server which run will on
1:42
port number
1:43
3,000 and it is watching all these files
1:46
so if you make any sort of change right
1:48
here so if I make acss change you'll see
1:54
it will auto
1:56
reload and if I make any HTML change as
2:08
well so automatically you will see as
2:10
I'm making changes right
2:12
here in the HTML CSS hot Auto reload is
2:18
functionality is there and same goes
2:20
with the JavaScript as well so if I
2:22
write any valid JavaScript code and
2:25
automatically the application will
2:27
restart and H Auto reload functionality
2:30
will be there so this is actually a nice
2:32
little command line HTTP server which
2:36
comes with all the
2:37
functionalities so you can install it
2:39
globally and then you can start this
2:41
HTTP server right inside your command
2:43
line so wherever you are developing your
2:45
application you just need to execute
2:47
this CR browser sync then start this
2:50
HTTP server and just watch Dash Das
2:54
files so it will watch for all the files
2:57
right here
3:00
so you can even make it simpler as well
3:02
I think you can simply say browser sync
3:05
Dash start server Das Dash so you don't
3:08
need to write those watch command you
3:11
can simply write like this as well
3:12
browser sync start Das D server so it
3:15
will start this server on default port
3:18
number which is 3,000 so if you make
3:20
this change right here still it
3:24
works okay if you don't write that you
3:27
do need to refresh it for this the hot
3:30
Auto reload features will not be present
3:32
in the default server you don't you need
3:34
to explicitly mention right here because
3:37
you do need to das Dash files here you
3:39
need to pass here which files you want
3:41
to hot Auto reload so here Das Das files
3:44
you pass the actual files here which
3:46
starts from html. CSS andj so if you
3:49
pass this now it will work so it is now
3:53
also watching the files as well apart
3:55
from Ser serving it in the browser so if
3:58
you make now changes now it will hot
4:01
Auto reload as well so this is actually
4:03
a open source HTTP server that you can
4:07
run inside the command line that I
4:09
wanted to show you so this is their
4:11
official website as well you can read
4:13
more about it so thank you very much
4:15
guys for watching this video and I will
4:17
be seeing you in the next video and also
4:20
check out my website as well free mediat
4:22
tools.com uh which contains thousands of
4:25
tools regarding audio video and image
4:27
and I will be seeing you guys in the
4:29
next video