1

I've just begun coding in Javascript. I'm looking for an in depth answer that explains the features that are available to me when using a web server to serve up my index.html file vs simply opening it directly via my browser.

I found this question here which could be considered a duplicate however I'm looking for an in depth answer that displays all of the options/features/capabilities one gains when serving up their page via a server. There was also this question that gave an answer about ajax.

Answers to both of these questions are vague.

Other than the obvious feature of making the web page available to end users what do I gain when using a server if I plan to simply use this web page I am creating locally?

Lastly, if I need data the database requires a server so that I can access that data... that is unless I'm using something like SQLite and then here I am with a single .html file and a single .sqlite file... no servers needed. What am I missing?

Improve this question
3
  • This is currently a question I'm facing while coding my app. My first attempt at a Web Application outside of AngularJS. This is something I currently have little to no knowledge of. Basically, the apps I created using .NET written in C# I am now attempting to create using javascript/html/css as Web Applications which are the trend these days. No more stand-alone apps... at least not nearly as much.
    – Code Novice
    Aug 28 '19 at 15:57
  • 1
    Besides the obvious feature you are listing yourself, the code executing in the browser does so inside some "sandbox" that limits what it can go. For example the browser may not let the code try to open any local file or connect to any other external host. If instead the browser code calls a local server, the code executing in this server may have different permissions and security applied to it and can do things that the code in the browser can not do.
    – Patrick Mevzek
    Sep 5 '19 at 16:40
  • 1
    I develop my code locally, HTML, CSS, JS, PERL, etc., on my laptop with an IDE that allows for quite a bit but still limited. I also have an environment that allows me to test sites and code with Apache and MySQL and all the elements I need and might need. I have a web server with only what I need for finished sites. My dev computers are often retired computers that are still modern enough to run what I need. It could be an old desktop or laptop. I have 3 set up. It does not have to be much.These give me the opportunity to test my work in a real working environment before deployment.
    – closetnoc
    Sep 15 '19 at 14:41
3

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.

Improve this answer
1
  • And of course the list of reasons don't stop here as I am discovering but this is the most concise answer. Thank you for providing a higher level of understanding which I had lacked when I originally began researching web development. It's a new way of thinking how to code and create an application.
    – Code Novice
    Sep 16 '19 at 15:13
2

By setting up a server you can open the same html file from another device in your local network, like your mobile phone or another computer. Also, you have greater control over how HTTP requests are handled by your application, especially if you want to set up redirection rules for SEO purposes or mess around with headers like user-agent.

Improve this answer
1

Unless you need server side processing you don't need a web server. Server side processing means server side programming languages like PHP or using the include files features of web servers.

Javascript is just client side so you have limited options for sessions and data persistence. I don't know how you intend to use sqlite without any server side help.

Improve this answer
1
  • 1
    Since I'm still new to Javascript this is exactly what I'm figuring out. The capabilities and limitations whether due to security or other. With Javascript I am of course learning about the limitations that are present due to the security that is built into the browser. I hadn't realized until now how separate the local file system is when comparing browser apps to writing say a C# application that does not have to worry about these restrictions.
    – Code Novice
    Sep 16 '19 at 15:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.