How to ship html and JavaScript for local use?

Question

For licensing reasons I cannot host my files on a webserver. I need to serve my website locally.

I have several .json files that I am loading in my JavaScript like this

      var jsoncontent = (function () {
    let json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': "data/content.json",
        'dataType': "json",
        'success': function (data) {
            json = data;
        }
    });
    return json;

chrome gives me a an error

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

some searching explained to me that this is a good security measure and that just hosting it online will fix it. I cannot do this however for legal reasons.

do I need to stuff all the data into the javascript? Do I need to put everything in the same directory? I'd like to keep my files organized and avoid both, if possible. I don't want users to be required to turn of that security feature, so that is of the table. Also having them run a local server is crazy.

hints would be greatly appreciated.

I want the user to be able download a .zip extract it and just doubleclick on index.html to run the thing.

AJAX doesn't make file system requests, it makes HTTP requests. A web server is required to handle those requests. If everything is local and bandwidth isn't a concern, just include the JSON data directly in the page and skip the AJAX entirely. (Side note: When you *do* use AJAX, `async: false` is a famously bad idea. Browsers are likely to even stop supporting it. Keep your asynchronous code asynchronous.) — David, Nov 29 '17 at 15:41
Since you are using it locally the protocol used is file (file://C: ...) Not http, data, chrome, chrome-extension, https ... — , Nov 29 '17 at 15:43
@David I'd rather not have the javscript contain 10mb worth of json, is the another way of including it "direclty"? — Nivatius, Nov 29 '17 at 16:02
@JordiNebot I don't want to use a local server. it is unpractical to my use-case did you even read the question? — Nivatius, Nov 29 '17 at 16:03
@Nivatius: Is there a noticeable performance problem when including the data directly? Whether the data is loaded immediately or loaded as the result of a user action, it still needs to be loaded. What you're essentially going to run into here is that JavaScript *generally* can't access the local file system (for obvious security reasons). Maybe a `FileReader` object can help: https://stackoverflow.com/a/21446426/328193 But I wouldn't be surprised if you're exhausting the options here simply because of how you've architected this. Web applications are meant to be, well, web applications. — David, Nov 29 '17 at 16:15
Yes I did. You need to serve a webapp locally. It seems reasonable to me to recommend using a local server for this use-case. You say to run a local server is *crazy*. Fair enough. To me it's the only rational way I can think of. I'm sorry for not being more helpful. — Jordi Nebot, Nov 29 '17 at 16:15
@David no I just thought it would make the code really ugly. I guess I have to deal with it :( — Nivatius, Nov 29 '17 at 16:47

score 1 · Answer 1 · 2017-11-29T16:41:33.657

1

You have quite a lot of options here. You could either use MAMP (Windows & Mac), LAMP (Linux), XAMPP (Linux, Mac or Windows) or WAMP (Windows Only). You could alternatively use byethost and require a password to access the files(?) using CPanel. Although I would recommend MAMP or one of the others. If you told us what operating system you were using, then we could help more, so I've downvoted your question. I also noticed that you were using AJAX for local file urls. Even if you did find a way to do it locally without a webserver, you can't use any Chrome debugging extensions on local files. So I'd recommend the webserver option as it only takes 5 minutes and can be accessed by all the computers in your local network.

How To Install LAMPServer - linux.com

WAMPServer Download Page

MAMP Download Page

XAMPP Download Page

edited Nov 29 '17 at 16:41

answered Nov 29 '17 at 16:34

I just want plain files. I dont want the user to need to install something. I want to distribute a .zip with some files and an html file in it. when the html file is opened with a modern browser the website should work. regardless of operating system. I think I did explain this in the question. So I don't see why you downvoted this. – Nivatius Nov 29 '17 at 16:44
2

You **cannot** use AJAX to get local files. This does not work as it sends a HTTP request and JS **does not have access to your filesystem!** - and even if it did, AJAX wouldn't work - As @David said, "If everything is local and bandwidth isn't a concern, just include the JSON data directly in the page and skip the AJAX entirely." As David also said "avoid using async: false;" and I can see why. This would slow down your webpage as you are disabling asynchronous loading. What you could do is just take others suggestions and pop it in your JS, as the users aren't gonna notice that. – Nov 29 '17 at 16:49

How to ship html and JavaScript for local use?

1 Answers1