I am trying to set up a dev env for my kid who is just starting out with HTML/JS.
Till a few months ago, I was able to just load the files using file:/// in a browser and debug. However, now none of the browsers support it anymore. I get the following errors --
Origin null is not allowed by Access-Control-Allow-Origin. Status code: 0
Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. Status code: 0
I understand that this is because of CORS settings changes. That's fine, but it forces me to set up an actual environment for my kid. It's no longer easy. I am looking for options to not make her jump through hoops.
Ideally I want debugging to be just calling http://localhost/Code/Project1/project1.html
Where Code is the dev directory in her home directory on the Mac and each project is organized in its own sub directory.
How do I achieve it?
I know Macs come with apache. I tried adding the Code directory in the DocumentRoot of apache2 (/Library/WebServer/Documents) as a symlink
However, apache does not follow it - gives me permission errors.
I tried modifying the configuration to AllowSymLinks allow all. That did not help either.
I am not tied to this particular option. Any other option will do.
The editor we use is VSCode.
We can move to any editor if it makes this easier.
Easier to set up dev environment but am running into as described above and would like to ask for options
I am trying to set up a dev env for my kid who is just starting out with HTML/JS.
Till a few months ago, I was able to just load the files using file:/// in a browser and debug. However, now none of the browsers support it anymore. I get the following errors --
Origin null is not allowed by Access-Control-Allow-Origin. Status code: 0
Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. Status code: 0
I understand that this is because of CORS settings changes. That's fine, but it forces me to set up an actual environment for my kid. It's no longer easy. I am looking for options to not make her jump through hoops.
Ideally I want debugging to be just calling http://localhost/Code/Project1/project1.html
Where Code is the dev directory in her home directory on the Mac and each project is organized in its own sub directory.
How do I achieve it?
I know Macs come with apache. I tried adding the Code directory in the DocumentRoot of apache2 (/Library/WebServer/Documents) as a symlink
However, apache does not follow it - gives me permission errors.
I tried modifying the configuration to AllowSymLinks allow all. That did not help either.
I am not tied to this particular option. Any other option will do.
The editor we use is VSCode.
We can move to any editor if it makes this easier.
Easier to set up dev environment but am running into as described above and would like to ask for options
The easiest way... use Microsoft's "Live Preview" extension for VS Code.
https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
This takes care of running a web server for you, and also embeds a browser window in the IDE which refreshes when changes are made. My students have had good luck with this, as they can see the effect of their changes right away without having to worry too much about other aspects just yet.
Also, that web server is still accessible via other browsers on the system if you wish.
127.0.0.1instead oflocalhost? I didn't test your actual setup but for some of the blocks for security there is an exception for the local host (and the hostname could be faked, so only IP address for localhost is accepted there) – cyberbrain Commented Feb 1 at 21:47file:///URLs definitely still work in all browsers. What doesn't necessarily work is to have your content loaded from local filesystem URLs try to access other files or other services, because the browser won't trust stuff. – Pointy Commented Feb 1 at 22:05