Running HTML, CSS and JavaScript programs that need a localhost web server hosting them, using very lightweight free nginx web server

Last updated on 21 May 2024
In a barebones Blogger blog to HTML book program that I am writing in HTML, CSS & JavaScript, I was able to run the program without issues if I was accessing the pages via a web server like Live Server extension in VSCode. But directly opening the index.html page from the file system in Chrome or Edge browser resulted in an error when the JavaScript code tries to write to a new window it created. Details of that error are given in a section later on in this post.

Workarounds for that error by running Chrome with --disable-web-security flag may not be a proper solution.

One solution is to use VSCode and Live Server. Another is to create a small Node Express server hosting these static pages. But what if someone wants to use my program and is not a developer and so not into VSCode or Node Express. Asking him/her to install it just for using my program seems odd.

So I looked around for a lightweight web server for Windows which could host my program and allow users to run it via the html page accessed on browser like Chrome using localhost hostname. I felt that Apache server could be an overkill for my program. I came across nginx which seems to very lightweight and meets my needs. That is covered in a section below.

Note that for running my program on localhost (local computer), I need only http protocol support and not https. Live Server also seems to only support http protocol and not https.

Using very lightweight web server (for Windows) - nginx to run HTML, CSS and JavaScript program

https://nginx.org/en/download.html  (Stable version, zip file)
After unzip, the folder is just around 4.5 MB! Very lightweight.

To use nginx: Beginner’s Guide, https://nginx.org/en/docs/beginners_guide.html

The procedure to set up nginx to run an HTML, CSS and JavaScript program on localhost seems to be very simple:
  1. Unzip the nginx stable version zip downloaded from above mentioned site
  2. In the unzipped folder (e.g. nginx-1.24.0 which is what I got on unzip), there is an 'html' folder. Rename index.html in 'html' folder to something else (saved as backup). Copy HTML, CSS and JavaScript files of the program (in my case: index.html, index.css, blogbook.html, howtosaveblogbook.html and script.js) into the 'html' folder
  3. Open a command prompt in the unzipped folder (e.g. nginx-1.24.0) and run nginx.exe. The web server (nginx.exe) will listen to requests on localhost port 80.
  4. Open 'http://localhost' in a browser (like Chrome). The index.html page of the program will get loaded (program starts running). [Port 80 is the default port and so 'http://localhost' in browser address bar is enough.] As this program is now being hosted by a web server, Chrome does not given an error for JavaScript code writing to a new window it created
To stop the web server, from another command prompt in nginx folder, run 'nginx -s quit' for graceful ending of web server (seems to wait till browser tab using web server is closed) or run 'nginx -s stop' for force stop of web server (seems to not wait for closure of any open browser tabs using it).

The Beginner's Guide article provided earlier covers other cases like configuring nginx to use different directories. Changing the default port nginx listens to seems to be a straightforward change in the configuration file: conf/nginx.conf (but I have not tried that so far).

I later wrote a batch file - nginx-cmd.bat - to help me easily start and stop nginx. Its contents are given below:
@echo off
echo nginx start nginx
echo. 
echo To stop nginx, in another command window:
echo nginx -s stop fast shutdown
echo nginx -s quit graceful shutdown
echo.
echo nginx doc: https://nginx.org/en/docs/windows.html
@echo on
cd D:\Users\Ravi-user\nginx-1.24.0
@echo off
cmd /k
--- end batch file ---

Procedure to add nginx-cmd.bat to Windows Start Menu:
Kludge/workaround: Rename .bat file to .exe, right-click file and choose pin to start. Next from Start menu, right-click the added item and open file location. In the shortcut entry, right-click and change target name extn. from .exe to .bat. Finally rename the main command file back to .bat from .exe.

Cross-origin access error in JavaScript when writing to new window

When JavaScript tries to write to new window it created, and the page is loaded directly on local machine (as against being loaded via a web server on local machine like VSCode 'Live Server' extension), Chrome blocks writing to a cross-origin frame. Example error message in browser console:
script.js:128 Uncaught DOMException: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "null" from accessing a cross-origin frame.
---

Corresponding Javascript code where line:128 is the 'newWindow.document.body.innerHTML =' line below:
const newWindow = window.open("blogbook.html");
    setTimeout(function () {
      newWindow.document.body.innerHTML =
        '<main id="main">' + contentHTML + "</main>";
    }, 1000); // Delay of 1 second works
-----

The article: blocked a frame of origin "null" from accessing a cross-origin frame, https://stackoverflow.com/questions/29983786/blocked-a-frame-of-origin-null-from-accessing-a-cross-origin-frame-chrome, has some info. on this issue. Key points from it:
*) This is a standard Chrome security feature. It can be disabled by running Chrome with --disable-web-security argument.
*) Firefox does not seem to have this issue.
*) [Additional point from my side:] I tried Edge browser but it gave the same error. 

Comments

Post a Comment

Archive