Explain Codes LogoExplain Codes Logo

How to run HTML file on localhost?

html
local-hosting
http-server
live-reloading
Nikita BarsukovbyNikita Barsukov·Aug 11, 2024
TLDR

Swiftly set up a localhost server by utilizing Python's built-in http.server module. Just navigate to your HTML file's directory via a terminal and execute:

  • Python 3: python -m http.server 8000 # Who needs a web-server when you've Python 3!
  • Python 2: python -m SimpleHTTPServer 8000 # Grannies still on Python 2, this is for you!

Then, pop open http://localhost:8000 in your web browser. Your file should be there, smilin' at ya.

Various methods to host HTML locally

There are several ways to locally host your HTML file. Here are a few of the most popular methods:

Using Node.js http-server

Node.js offers a simple zero-configuration command-line HTTP server, http-server. Install it globally via:

npm install http-server -g

Direct your terminal to the folder of your HTML file, then run:

http-server

Access your masterpiece at localhost:8080 or customize the port if you fancy.

The Pythonic way: Built-in HTTP server

If Python is more your speed, spin the built-in HTTP server like so:

python -m http.server 8000 # Grab your Monty Python shirts folks, we're going live at 8000!

Now, your HTML file is all set at localhost:8000.

Winning with Visual Studio Code

Visual Studio Code users, rejoice! The Live Server extension offers a one-click solution to host HTML files locally with the added charm of live reloading. Code, save, and observe changes in real time.

Simplified setup for macOS users

Mac users, use Homebrew to install http-server:

brew install http-server # Remember folks, drink responsibly. Coding while intoxicated is NOT recommended!

With http-server lurking in your system, you're just a command away from hosting your HTML files.

Cross-platform web server solutions

For broader solutions:

  • XAMPP: This PHP development environment works seamlessly on Windows, Linux, and macOS.
  • MAMP: Primarily catered to macOS folks but also available for Windows.
  • WSL2: For Windows users craving for a Linux-like environment.

Resolving common server issues

Running into annoying CORS issues? The --cors flag with http-server will be your savior. Checking some webcam functionality? Ensure your server settings can handle the device requirements.

Enhancing your workflow

A streamlined workflow is vital for an efficient development session. Using local servers offers instant feedback and lets you test interactive features of your page in real time.

Power of browser extensions & IDE plugins

Further enhance your local development experience via IDE plugins or browser extensions. These tools can drastically reduce the time spent on setup and maintenance.

Ensuring server security

Server security is of paramount importance, even on a local level. Make sure to update your server software regularly and adhere to security best practices to keep your files safe from unauthorized access.