OpenJSCAD example of selfhosted SPA (single page application) webpage

This is an example of an OpenJSCAD-based SPA webpage (see Firefox 80 screenshot), which demonstrates:

• An application that can run from a local web server (see also: Getting web JSCAD example to work locally · Issue #632 · jscad/OpenJSCAD.org)
• Loading of a .jscad script through XHR (which triggers CORS security)
• Passing of a 3D object (numeric) parameter through a query string, and recalculation of 3D scene based on it
• Patching of the min.js engine (required since OpenJSCAD is a library built with Node.js packages, and then "bundled" with browserify), so that data can be exchanged between the browser window and the .jscad Web Worker (see openjscad_min_js_231d3c6.patch)
• Animation (based on OpenJSCAD clock animation - profOnno/clock.jscad · GitHub; see also Animation? Does $t work in OpenJSCAD ? · Issue #38 · jscad/OpenJSCAD.org)
• 2D projection of a 3D object, converted to SVG using OpenJSCAD's serializer, and adding it to the HTML document for display (see also Enhancement: Projections · Issue #99 · jscad/OpenJSCAD.org)
• .htacess for Apache web server, so that correct MIME type is emitted for .jscad files, when they are read through XHR. If it is needed, the .htaccess file should be placed in the example_webpage directory on the server.

Usage

The whole demonstration can be built and ran by running the generate_example.sh Bash script.

Either download the script, and run it "manually":

mkdir /tmp/test
cd /tmp/test
wget https://raw.githubusercontent.com/sdaau/openjscad_example_selfhost_spa_webpage/master/generate_example.sh
bash generate_example.sh

In this case, the folder with the webpage example will be in /tmp/test/build_openjscad_spa/example_webpage

Or - clone the repo, then run the Bash script from there:

cd /tmp
git clone https://github.com/sdaau/openjscad_example_selfhost_spa_webpage.git openjscad_example_selfhost_spa_webpage_git
cd openjscad_example_selfhost_spa_webpage_git
bash generate_example.sh

In this case, the folder with the webpage example will be in /tmp/openjscad_example_selfhost_spa_webpage_git/build_openjscad_spa/example_webpage

Or -- run the commands in the Bash script manually, which is presented in the next section.

Manually run commands

First: in the current directory, clean/remove previous traces of the build directory:

rm -rfv build_openjscad_spa

Create build directory, and change current working directory to it:

mkdir build_openjscad_spa
cd build_openjscad_spa

Clone the OpenJSCAD repo, checkout at a known revision used to develop this example, then go back to parent directory (the build directory):

git clone https://github.com/jscad/OpenJSCAD.org OpenJSCAD.org_git
cd OpenJSCAD.org_git
git checkout 231d3c6393e6d84569d8c00cf32dfe83b85d3163
cd ..

Create directory for the actual example webpage:

mkdir example_webpage

Copy the right dist directory (with OpenJSCAD JavaScript library) in the example directory, and call that directory openjscad_dist:

cp -av OpenJSCAD.org_git/packages/web/dist example_webpage/openjscad_dist

For this example, we actually do not need anything else but min.css and min.js in the openjscad_dist - so remove all the other files, then copy in min.css:

rm -rfv example_webpage/openjscad_dist/[io]*
cp -av OpenJSCAD.org_git/packages/web/min.css example_webpage/openjscad_dist/

For this example, we also need imgs/{busy.gif,favicon.png}, which the OpenJSCAD JavaScript library refers to. Simply copy the entire directory, then delete all other files except for those:

cp -av OpenJSCAD.org_git/packages/web/imgs example_webpage/
rm -rfv example_webpage/imgs/[^bf]*

Create css subdirectory for example_webpage - here just overloading/customizing of existing styles

mkdir example_webpage/css

Get .css file from repo

wget -q -O example_webpage/css/custom-example.css https://raw.githubusercontent.com/sdaau/openjscad_example_selfhost_spa_webpage/master/_files/css/custom-example.css

Get other files from repo:

wget -q -O example_webpage/example_webpage.html https://raw.githubusercontent.com/sdaau/openjscad_example_selfhost_spa_webpage/master/_files/example_webpage.html

wget -q -O example_webpage/example_webpage_init.js https://raw.githubusercontent.com/sdaau/openjscad_example_selfhost_spa_webpage/master/_files/example_webpage_init.js

wget -q -O example_webpage/example_scene.jscad https://raw.githubusercontent.com/sdaau/openjscad_example_selfhost_spa_webpage/master/_files/example_scene.jscad

Get the OpenJSCAD min.js patch, and then apply it:

wget -q -O example_webpage/openjscad_min_js_231d3c6.patch https://raw.githubusercontent.com/sdaau/openjscad_example_selfhost_spa_webpage/master/_files/openjscad_min_js_231d3c6.patch

Change to the directory of the min.js using a subshell (so we do not have to cd back):

(
  cd example_webpage/openjscad_dist
  # since the patch was generated by `git diff`, it refers to `a/packages/web/dist/min.js`, so we will have to use `-p`/`--strip` of `patch` command, to "Strip the smallest prefix containing num leading slashes from each file name found in the patch file"
  patch -p4 <../openjscad_min_js_231d3c6.patch
)

Print the absolute path of the directory with the final output for the example SPA webpage:

echo "example_webpage is ready at: $(readlink -f example_webpage)"

You can upload that directory to your webserver.

Due to XHR loading of .jscad file, opening example_webpage.html in browser via file:// protocol (e.g. when you double-click the .html icon in your OS GUI) will not work.

Therefore, as test, the script here starts a local python3 http.server in the example_webpage directory:

cd example_webpage
python3 -m http.server

To view the resulting webpage, visit: http://localhost:8000/example_webpage.html