Using a Simple Python Server for Local Resources

I recently discovered that Chrome does not allow the loading of local resources when I tried to link a stylesheet from one local project to another. Here is an example of what I tried to add to the HTML in my project:

<link rel="stylesheet" href="file:///Users/name/Directory/style.css">

And Chrome gave me this error:

Not allowed to load local resource

After a bit of searching, I found a pretty good solution on Stack Overflow. Python has a simple web server built in, and macOS comes with Python pre-installed.

To start up the server in Python 2 (the version pre-installed in macOS), navigate to the directory you want to serve, and run this command:

python -m SimpleHTTPServer

The default port for the server is 8000, but you can add a custom port on the end of the command like this:

python -m SimpleHTTPServer 1234

For Python 3 you can run this command instead:

python3 -m http.server

Again, you can add a custom port to the end if needed.

Now you can link to the file using localhost (or the IP address 127.0.0.1):

<link rel="stylesheet" href="http://localhost:8000/style.css">

Side Note

I also use xip.io occasionally to test local projects on my mobile devices. In order to for xip.io to work, you will have to replace localhost with your computer’s IP address.

Resources

• Python 2 documentation — SimpleHTTPServer — Simple HTTP request handler
• Python 3 documentation — http.server — HTTP servers