I tend to use a development server rather than file:///
URLs even when developing static sites. There are quite a few things that don't work from file:///
URLs. Just the first two points in my list about how URLs and linking work are compelling enough for me to always start on my development server.
This list isn't likely to be complete. Allowing many features from file:///
would be an easy way to introduce security vulnerabilities into browsers. There are probably quite a few features that I haven't listed here that are locked down for security.
Hiding "index.html"
When you launch your site live you want your URL to be https://example.com/
not https://example.com/index.html
. However, file:///somedir/
shows a directory index rather than loading the index.html file. The only way to that file is to use the URL file:///somedir/index.html
.
That means that linking to your home page on a file URL needs to be done with href="index.html"
rather than href="./"
which is what you will want to use when your site is live.
Root relative links
Root relative linking is only available when using a server. I prefer to link to all my pages and resources using root relative links. Root relative links start with a slash and are relative to the domain name, for example src="/js/foo.js"
.
The advantage of root relative links is that work even from subdirectories. You can create a hierarchy of pages in various folders and use the same links on all your pages. Otherwise you might have to try to figure out the relative paths. For example the relative link would be src="js/foo.js"
from the home page but src="../js/foo.js"
from a page that is one directory deeper.
Cookies and local storage
If your JavaScript wants to use cookies or local storage, you will need a server. From Jack Rogers's answer to creating cookies on file:/// url - evidence it is being created but not showing in document.cookie or cookie list in chrome dev tools:
Cookies are strictly a HTTP mechanism as per RFC 2109.
See this link, here, for the chrome "bug" report of this.
It appears that the --enable-file-cookies
flag has been removed from all platforms that chrome runs on except Android.
You can read more about it here and here.
With this, it appears that there is no way to store cookies under a file:///
URL structure, The best way to go around this would be to run a small server locally when developing. Here's a good list of scripts that can run a local HTTP server from the command line. link
For local storage, see localStorage access from local file
AJAX
AJAX only works when you use a web server. See “Cross origin requests are only supported for HTTP.” error when loading a local file
Although in Chrome one answer says you might be able to start it using the flag --allow-file-access-from-files
.
Service Workers
Service workers allow your page to run and show notifications even when the page is unloaded. However, service workers need a web server. See ServiceWorker does not allow 'file://' origin · Issue #2831 · electron/electron · GitHub
Server side scripts and web applications
You need a web server for your browser to interact with server side technology such as PHP, Perl, Python, ASP, JSP, Ruby on Rails, databases, etc.
You can often do a lot with just client side JavaScript, but at some point most web applications can become more powerful when paired with server side code for login and data storage.