All right guys so in this video I want to show you how to install something called live server which |
is something we’ll be using through the course. |
And basically it’s an extension to V.S. code that allow us to open our aged e-mail pages on a little |
development server as opposed to open them in the file system. |
So right now you can see that the website is open and if you look at the you are Albar it’s file colon |
with three slashes and then basically just shows the path to the file. |
So the server will actually open it on what’s called our local host and not only that it will or it |
will auto reload. |
So when we save in each team I’ll file or CSX or JavaScript or anything else it’s going to just auto |
reload. |
You don’t have to keep hitting the reload button every time we make a change. |
So we’re gonna go ahead and do that and I’m gonna just create a new file here. |
I’m going to call it 0 2 underscore Liv underscore server dot age to email just naming it after what |
we’re doing here. |
And there’s something else that I want to show you guys instead of typing out the whole structure here |
like we did in this file with this code we can use Emmett’s to generate that structure. |
So what I’m going to do is just put an exclamation and I can either hit enter or tab and it’s just going |
to kind of create that structure for us so we don’t have to type it out for every age HTML page we create. |
Now notice there are some some added things here we have some meta tags we’re going gonna go over meta |
tags including these ones in the next video. |
But for now I just wanted to show you that we can quickly generate our structure our our doc type each |
team all had body tags and stuff like that. |
So we’re going to change the title here to live server and we’ll go down here and just put an H1 and |
we’ll say we’ll say hello world does it really matter. |
I just want to put something and then I’m gonna save this with control s and we want to now install |
Live servers somewhere and go over here to this extensions icon and make this a little bigger and we’re |
going to search for live dash server and it’s gonna be this this one here this first one with this purple |
icon. |
Now to install an extension and V.S. code you just want to click the little green install button once |
it installs you want to click reload to activate. |
So it’s just going to kind of reset the EDI editor and now under enabled you’re going to see live server |
and any other extensions that you install will also be displayed here. |
So now what we can do is instead of leaving and going and opening up the file we can simply right click |
and we can say open with live server and the browser will automatically open and it will display the |
web page and notice that you are all now is different. |
It’s not just that file path. |
It’s 1 2 7 0 0 1 which is what’s called the loop back address and this is always going to loop back |
to your local machine. |
So this is your local host. |
And then this colon 50 500 this is the port number that it’s running on. |
You can run things on different ports and then you just have the name of the file that’s loading. |
So from now on we’re going to use live server to open our files instead of you know leaving and going |
and opening the file manually. |
Also if I change something like let’s change this to we’ll just add a paragraph here and we’ll say this |
is a test and I’ll just save and now if I go to Chrome you can see this is a test is displayed. |
I didn’t have to go and reload it. |
It just auto loads and this is great for when you when you actually have you know your editor on one |
side and then the browser because it automatically updates. |
Now I don’t want to do that because I only have so much screen real estate here for you guys and I don’t |
want to make that the editor too small. |
We might do that in some videos later on but for now I’m just going to switch back and forth. |
So to stop the server if you go down here you can see this port fifty five hundred. |
If you click that it will stop the server from running. |
And if I go back to the browser and reload you’ll see it and it no longer works if I want to start it |
again I can either again do open with live server or I can click this go live link down here if I click |
that it will start it back up and open it in the browser. |
All right. |
So I just wanted to show you guys that and let you know that that’s what we’ll be using as opposed to |
just opening the opening our HD him all files right on the file system. |
So in the next video we’re going to take a look at meta tags we’ll look at the ones that are generated |
here as well as some others. |
{{
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8318905676201904"
crossorigin="anonymous"></script>
}}