JavaScript — What Is A Server? Live Server Quick Start

What exactly is a server and why do we need one anyway?

So lets think about this from the context of web browsing. When we type in a web address in the search bar and press enter, that sends a request to a web server. A Web Server is basically just another computer out there somewhere that contains all the different files that make up the particular website you searched for.

So when the web server gets the request, it will “respond” and send you the HTML, Javascript, and CSS that actually makes up that website. This causes the website to actually display on your screen.

Since the files we’ll be making during this series will all be stored on our own computers rather than a web server, we need to provide a way for our computer to serve the files to the browser as if we DID send a request to a web server.

We can achieve this through a Local Development Server. This allows our computer to act as a server for our website. This is where the Live Server extension comes in handy. Lets see it in action.

In my file tree, I have a folder called Chatper 1 that contains an index.html file.

I want to populate my html file with the boiler plate code for an html file. An easy way to do this is to simply type “doc” and press TAB. This should auto-populate the html file with what you need.

If I want to preview this html file inside a web page, I need to give it a little bit of information. If you type “h1” and press TAB, this should create an h1 tag for you to type whatever you want to display. For this example I’m just going to type “TEST” within the brackets.

<h1>TEST</h1>

like so…

Now I have something that can be seen on a web page. Live Server is what makes this next part so easy.

Simply right click within your HTML file and select “Open with live server”. Now a web page should appear that says “TEST” on it.

So as we go through and iterate on our code, we can easily view our progress in a web server! How convenient!