Search code examples
javascripthtmlapache

Setting up a local dev environment for HTML Javascript

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

Solution

  • 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.

    Screenshot