simplified example

www/src/cgi-bin/get-contents

@@ -0,0 +1,12 @@
+#!/bin/sh
+
+echo "Content-Type: text/plain"
+echo ""
+
+if [ -f /tmp/test/hello.txt ] ; then
+cat /tmp/test/hello.txt
+exit 0
+else
+echo "File Not Found"
+exit 1
+fi

www/src/cgi-bin/list-dir

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+echo "Content-Type: text/plain"
+echo ""
+
+ls -1a /tmp/test
+exit 0

www/src/connection_view.js

@@ -16,7 +16,7 @@ export class ConnectionView {
         
         this.urlTextbox = document.createElement("input");
         this.urlTextbox.type = "text";
-        this.urlTextbox.value = window.location.href.replace(/^http/, "ws");
+        this.urlTextbox.value = window.location.href.replace(/^http/, "ws") + 'webfuse-api';
         connectBox.appendChild(this.urlTextbox);
 
         this.connectButton = document.createElement("input");
@@ -25,8 +25,8 @@ export class ConnectionView {
         this.connectButton.addEventListener("click", () => { this._onConnectButtonClicked(); });
         connectBox.appendChild(this.connectButton);
 
-
         const authenticateBox = document.createElement("div");
+        authenticateBox.classList.add('hidden');
         this.element.appendChild(authenticateBox);
 
         const authLabel = document.createElement("span");

www/src/index.html

@@ -12,6 +12,31 @@
         <div class="title">Connection</div>
         <div id="connection"></div>
     </div>
+
+    <div class="window">
+        <div class="title">Info</div>
+        <div>
+            <p>Please connect to start providing files. This page updates every 5 seconds.</p>
+            <p>There are two files provided in this example:
+                <ul>
+                    <li><b>hello.txt:</b> a plain text file</li>
+                    <li><b>sayhello.sh:</b> a shell script printing a text to stdout</li>
+                </ul>
+            </p>
+            <p>To display the files, see /tmp/test directory inside the container.</p>
+        </div>
+    </div>
+
+    <div class="window">
+        <div class="title">/tmp/test</div>
+        <div id="directory"></div>
+    </div>
+
+    <div class="window">
+        <div class="title">/tmp/test/hello.txt</div>
+        <div id="contents"></div>
+    </div>
+
 </div>
 
 <%= htmlWebpackPlugin.tags.bodyTage %>

www/src/index.js

@@ -7,6 +7,22 @@ function mode(value) {
     return parseInt(value, 8);
 }
 
+function updateContents() {
+    const directory = document.getElementById('directory');
+    fetch("cgi-bin/list-dir").then(response => response.text()).then((text) => {
+        directory.textContent = text;
+    })
+    .catch(() => { directory.innerHTML = ''; });
+
+    const contents = document.getElementById('contents');
+    fetch("cgi-bin/get-contents").then(response => response.text()).then((text) => {
+        contents.textContent = text;
+    })
+    .catch(() => { contents.innerHTML = ''; });
+
+    window.setTimeout(updateContents, 5 * 1000);
+}
+
 function startup() {
     const provider = new FileSystemProvider({
         inode: 1,
@@ -20,6 +36,7 @@ function startup() {
     const client = new Client();
     const connectionView = new ConnectionView(client, provider);    
     document.getElementById('connection').appendChild(connectionView.element);
+    updateContents();
 }
 
 window.onload = startup;

www/src/style/main.css

@@ -15,7 +15,7 @@ html, body {
     border-radius: 5px;
     padding: 10px;
     margin-bottom: 25px;
-    color: white;
+    color: #c0c0c0;
 }
 
 .window .title {
@@ -45,3 +45,11 @@ html, body {
     text-align: center;
 }
 
+.hidden {
+    display: none;
+    visibility: hidden;
+}
+
+#contents, #directory {
+    white-space: pre;
+}

www/webpack.config.js

@@ -18,7 +18,8 @@ module.exports = {
             template: "./src/index.html"
         }),
         new CopyWebpackPlugin([
-            { from: './src/style', to: 'style' }
+            { from: './src/style', to: 'style' },
+            { from: './src/cgi-bin', to: 'cgi-bin', copyPermissions: true }
         ])
     ],
     resolve: {