Spinning Up A Local Server

Configure your computer to serve content from `localhost` using the Live Server extension and VS Code.

Prerequisites

Before you begin, make sure that you have the following tools installed on your computer:

Context: What does “Spinning Up A Server” Really Mean?

You’ve probably heard this term being thrown out in tech-speak-ey conversations on the internet and wondered: what does it mean to “spin up a server” and how can you do it?

A server is a computer that can provide some service to another computer. A common kind of server is a web server which hosts (stores) the code for a website in its memory and provides a URL where clients (the users of the internet) can access that code. When a web server receives a request, it sends the code over the internet to the client’s browser via Hypertext Transfer Protocol (HTTP).

“Spinning up” a server refers to the discs in the hard-drive of a server physically spinning up to speed to serve their contents.

When developing a new web application, it can be useful to test how your website is served via HTTP before hosting publicly. This is where localhost comes in. You can think of localhost as a personal web server URL that can be configured to:

  • host content accessible from a particular directory (folder).
  • serve content via HTTP (accessible from your computer only).

Visiting http://localhost thus mimics the experience of accessing content served via HTTP. This can be incredibly helpful if the content being served is highly dependant upon being served via HTTP.

The section below will walk you through how to configure localhost to serve content via HTTP using the code editor VS Code and the extension Live Server.

Spinning Up a Local Server Using Live Server and VS Code

  1. We recommend using Visual Studio Code (VSCode) in this tutorial. If you don’t have it and need help installing VSCode, you can find a more in-depth tutorial in our article about installing VSCode.

  2. Open VSCode and navigate to the “Extensions” view which can be found on the left-hand sidebar. Search for and install the “Live Server” plugin.

    The Live Server extension can be found by searching in the Extensions view on the left-hand sidebar of VS Code.

  3. Use VSCode to create a new file called index.html and place the code below inside. Then save the file.

    <!-- index.html --> <html> <head> <title> My Website </title> </head> <body> <p> Hello World </p> </body> </html>
  4. Click the “Go Live” button at the bottom-right-hand corner of VSCode to start a server on port 5500. This will also prompt your browser to open a new window/tab that loads your index.html file.

    Animated gif. Pressing the "Go Live" button starts a server at port 5500. A new tab is opened in default browser with 127.0.0.1:5500 appears in the address bar and the served content is rendered.

  5. Make changes to your website file and save the file. This will automatically refresh your browser page and you should see the changes you’ve made.

  6. When you’re done with editing, click the button that contains the port number of your server (by default it’s 5500) to shut down the server.

Some additional resources: