Using a local server

If you double click a local .html file, your default browser will open it and display the file. However, if you look at the URL, it will be a URL beginning with file://, i.e. using the file URI scheme.

The file:// URI scheme is inherently insecure, since there is no clear separation of origins. Therefore, many modern Web Platform technologies are disabled on file://. To take full advantage of the modern web stack, you need to be using a local web sever during development instead of the file:// protocol.

There are dozens of tools for that. In this page, we will discuss a few possible routes.

Live Server extension on VSCode

If you use Visual Studio Code (VSCode) as your editor, you can install the Live Server extension. After installation, open the folder containing your files in VSCode and click on "Go Live" in the bottom right corner. The server will start and display the port it is using. The advantage of this method is that it will automatically refresh your webpage, including CSS files, which can sometimes be cached and require a "hard refresh". This eliminates the need to refresh the page after each change.

Python’s SimpleHTTPServer

If you have Python 2.x installed (e.g. if you are on MacOS you almost certainly do) you can just open the command line and run:

python -m SimpleHTTPServer

This will start a local server on port 8000 in the current directory. This means you can visit localhost:8000 in your browser and see index.html from the directory your server started from.

You can change the port (useful if you need multiple local servers on different directories) like so:

python -m SimpleHTTPServer -p 8080

Python 3 http.server

TBD

NPM’s http-server

A somewhat more robust option is http-server.

You need Node and npm installed before installing it (but if you do any serious web development you will eventually need these anyway, even though we won't use them in class).

Then you install it by running:

npm install -g http-server

This also defaults to port 8000, and you can also change the port with the -p flag.