Up next in 10
How to Turn on HTTP Live Server and Run Code in VSCode
0 views
Jul 1, 2025
Get the full source code of application here:
View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video, I will show you a VS code
0:04
extension which allows you to turn on
0:07
the live server inside your VS code. Uh
0:09
live server is nothing but it will start
0:11
a simple HTTP server to actually serve
0:14
your files. This can be HTML, CSS on
0:17
JavaScript files. So just go to the
0:19
extensions tab and just search for this
0:22
extension which is live server. It's a
0:26
very popular extension. As you can see,
0:28
it's developed by this person, Redfig
0:31
Day, and it's got 65 million downloads.
0:34
And just click the install button to
0:36
start a local development server.
0:45
So once you install this, you just go to
0:47
any HTML file to start a development
0:51
server. Simply open this
0:54
and here you will see this option open
0:56
with live server. This option will
0:58
appear right here and simply you open
1:02
this file in the live server. So your
1:04
application will start here. The web
1:07
page will be opened directly in the
1:08
browser. It will start this local
1:10
development server
1:12
and here you can run your application
1:14
very simply
1:17
like this. So
1:21
you can do this with any file. This can
1:23
be any HTML file that you're running. So
1:25
this will save you a lot of time because
1:28
this will start this local development
1:30
server. So this is the FX extension.
1:32
Simply type live server and the very
1:35
first extension which comes at 65
1:38
million downloads.
1:40
So Ritig D. So this is the extension. In
1:42
this way, you can turn on the live
1:44
server in VS Code and start a local
1:46
development server inside your VS code
1:49
to actually
1:52
open and run your files directly in the
1:55
browser itself. So if you want to stop
1:57
this, there is also this stop live
1:59
server option. So this will stop this
2:02
live server. Again, if you do this, it
2:05
will start open another.
2:10
So if you create multiple files, let's
2:12
suppose I say index 2.html
2:15
and again create a file again you need
2:17
to start another development server. You
2:19
will see again it will start this server
2:22
once again. So it can handle multiple
2:25
files as well. So it's if you make any
2:28
sort of changes you will see it will hot
2:30
auto reload. You'll see it can even
2:34
contain stylesheet as well. So we can
2:37
style it.
2:43
We can write here JavaScript as well.
2:49
So it will automatically reload here.
2:52
You would see that. So this is the
2:55
extension. Simply install it and start
2:57
using it. Uh please hit that like
2:59
button, subscribe the channel and also
3:01
check out my website freemediatools.com
3:04
uh which contains thousands of tools.