Why do we need local servers?

You cannot fully test the frontend by simply opening an html file in a browser. A number of features will be unavailable, like asynchronous API requests. And of course, you need server to test the backend. However, using a real live server for active testing is inconvenient, slow, and unsafe.

Native

These are servers built into the language platforms or are separate modules. They are usually enough to test a frontend with not the most complex backend code (for example, for sending form data) or a just the frontend. In addition, you could learn more about the backend, configs, and running commands through the terminal)

Node.js

Install the [Node] itself(https://nodejs.org/) (the npm package manager is included). There is no built-in server in the Node, but as always there are modules for that. For testing, I use http server.

Install it globally. It is started simply by the command http-server inside the project folder. After that, you can specify the exact address to the html file in the browser (if it is not an index at the root).

Read about how to enable https encryption support in my separate note.

Python

For a Python server, you will need to install [Python] (https://www.python.org/downloads/) and probably the Django framework.

On windows, it is started by the command py -3 -m http.server.

PHP

PHP has a built-in local server. It is enough to just install php itself, after which you can start the server with the command php -S localhost:8000.

cons: slow (at least for me/out of the box), long page reload

Java

Although a significant part of modern tools for frontend developers are written in Node in the form of npm packages, you can find tools in other languages too. For example on Java. The w3c validator local version has been written on it.

Backend systems

It’s useful if you need to test a website with a more complex backend, CMS (for example, on Wordpress), but you don’t want to do everything manually.

XAMPP

XAMPP consists of of Apache server with PHP support, MariaDB database (MySQL fork) and Perl. There is a simple graphical interface, but you can also access the config files. After a little manipulation it is also possible to run Python code.

There are also many other options: WAMP, Laravel, Local, Laragon.

Extensions for VS Code

The simplest, but limited, option for testing only the frontend are extensions for code editors. They also run a local server on the selected port and are usually started simply by clicking on a button.

I do not recommend using extensions that open the page preview directly in VS Code. Even if it’s technically a Chrome engine, it’s still better to test your site as closely as possible to what the user is using. That is, in the official stable versions of browsers.

Live Server

The most popular option for VS Code is Live Server.

cons: it runs files only from the sidebar (at least for me), so it will not be possible to run for a single file, only for a project in workspace.