Up next in 10
Get the full source code of application here:
Show More Show Less View Video Transcript
0:00
Uh hello guys, in this video I'll show
0:02
you how to run uh HTML file inside your
0:06
uh VS code. So it's very simple. There
0:10
is an extension called as live server.
0:12
You can actually search for this
0:14
extension. It's really popular. So you
0:16
will need this extension. It's developed
0:19
by this person. I have already installed
0:22
it. So once you click this
0:26
live server, it's almost having 75
0:28
million installs. So just install this.
0:31
So it actually launches a local
0:33
development server with live reload
0:35
feature as well. So now after enabling
0:38
this,
0:41
so you can actually go to its settings
0:43
as well. So these are the settings
0:46
normal settings that it has. So this is
0:48
the port number you can configure. This
0:50
is 127.0. 0.0.1. It's normally called as
0:54
localhost.
0:56
So just stick to the default options.
0:58
Don't change anything.
1:02
So once you open your index html,
1:06
so you can actually launch it on quite a
1:09
number of ways. Either you can right
1:10
click and simply see this option right
1:13
here, open with live server. This option
1:15
will come. So once you click this a live
1:19
local development server will launch on
1:21
this address as you can see.
1:24
Now if you want to stop this server you
1:26
also have the stop live server. So now
1:29
the server will be stopped. There is
1:32
also this option go live option which
1:34
also there.
1:36
This also does the same thing. It is a
1:39
little bit shortcut right here. Again
1:41
you go live it will also do the same
1:43
job.
1:44
It will launch a local development. So
1:48
you can see that. So this is the
1:52
extension in VS code. Using this you can
1:54
actually easily run your HTML file. So
1:58
it can have CSS. As you can see we are
2:00
using CSS and also we are using
2:02
JavaScript as well. So whenever you make
2:05
any sort of changes it will
2:06
automatically reflect.
2:10
So just make sure that you have autosave
2:12
enabled. So as soon as you do the
2:15
automatically it will detect the
2:16
changes.
2:18
So we are using this JavaScript file as
2:20
you see we are including this. So if you
2:23
also make any change in
2:27
JavaScript as well. So once again it the
2:30
changes will be reflected back. So this
2:33
is a really nice extension definitely
2:35
install this
2:37
live server.