Can react work over the file:// protocol?

Question

I have developped several tools using basic jQuery and templating from lodash.

I realized using those libraries that Ajax call do not work over the file system and gives this error when I try to load templates using ajax:

XMLHttpRequest cannot load file:///Users/Pro/Google%20Drive/dev/tasks/webDevEnvironment/public/html/pipeline-doc/templates/content-one-variable.html.
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource

I really like React's philosophy, it might be a bit overkill for the little tools I am building. Before I start re-coding everything I was wondering if React apps used ajax in the background for templates or if it would be possible to have everything load in the script tag?

I am just starting with React, from what I understand it would not be a problem to work on the file:// protocol... but I prefer to make sure!

Answer 1

It won't have issues in the most basic case. Depending what you do with it though, it could start having trouble pretty quickly.

An easy workaround would be to not do it over the file:// protocol. You can easily create something like a lightweight express server in node that would then allow you to operate over the http:// protocol and sidestep the whole issue.

var express = require('express'),
    app = express();

app.use(express.static('source-files-directory-goes-here'));
app.listen(3000, function () { console.log('Listening on port 3000'); });

Throw that in a file named something like server.js and you can then just run it with node server.js and it'll search up files from whatever you have in the directory at http://localhost:3000. You just need to use npm install express to get it.

If you want a package.json, which you'll want if you're gonna use React anyways, you can have something like this:

{
    "dependencies": {
        "express": "latest"
    },
    "scripts": {
        "start": "node server.js"
    }
}

And run it with npm start.