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
<link rel="stylesheet" href="http://localhost:8000/style.css">
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.