# HOOPS Visualize Web HTTPS server with reverse proxy

**URL:** <https://forum.techsoft3d.com/t/hoops-visualize-web-https-server-with-reverse-proxy/1682>\
**Category:** HOOPS Visualize Web\
**Tags:** knowledge-base, faq, how-to\
**Created:** [March 7, 2023, 3:56am UTC](https://forum.techsoft3d.com/t/hoops-visualize-web-https-server-with-reverse-proxy/1682 "2023-03-07T03:56:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Toshi-TS3D](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.techsoft3d.com/toshi-ts3d/32/885_2.png) [@Toshi-TS3D](https://forum.techsoft3d.com/u/Toshi-TS3D)\
**Post date:** [March 7, 2023, 3:56am UTC](https://forum.techsoft3d.com/t/hoops-visualize-web-https-server-with-reverse-proxy/1682/1 "2023-03-07T03:56:36Z")

</div>

## Introduction

Although the HOOPS Visualize Web SC server can be configured with an HTTPS server as described in this article: [HOOPS Visualize Web Server with HTTPS (SSL)](https://forum.techsoft3d.com/t/hoops-communicator-server-with-https-ssl/1681) , a non-standard port `(11182`) remains open to the internet, which poses a security risk. This port should be closed by restricting it to a private environment. It is important to minimizes exposure to the public network.

This article explains alternative way to configure SC server with HTTPS server by using an NGINX reverse proxy.

If you have not yet created an HTTPS server, please refer to the following article: [How to setup HTTPS server with AWS](https://forum.techsoft3d.com/t/how-to-setup-https-server-with-aws/1680)

## SDK / OS / server in use (version)

- HOOPS Visualize Web (2026.1.0)
- AWS Ubuntu Server (24.04 LTS)
- NGINX (1.24.0)

## Instruction

### HOOPS Visualize Web server installation

Place the folders and files required for the HVW server from the SDK.  
Here is an illustration of how to configure the server:

```auto
var
 └── www
      ├── html
      │ ├── demo-app
      │ ├── hoops-web-viewer.mjs
      │ ├── engine.esm.wasm
      │ └── sample.html
      ├── server
      ├── 3rd_party
      └── sc_models

```

1. Transfer the `tar.gz` file of HOOPS Visualize Web for Linux to the `/tmp` folder of the virtual server via SCP
2. Extract the `tar.gz` file

```bash
cd /tmp
tar -zxvf HOOPS_Visualize_Web_202x.x.x_Linux_xxx.tar.gz

```

1. Allocate the necessary folders in a root folder of NGINX

```bash
cd HOOPS_Visualize_Web_202x.x.x/
sudo cp -r 3rd_party/ server/ /var/www/
sudo cp -r quick_start/converted_models/standard/sc_models/ /var/www/
cd web_viewer/
sudo cp -r demo-app hoops-web-viewer.mjs engine.esm.wasm /var/www/html/

```

### HOOPS Visualize Web server setup

1. Open `Config.js` for HOOPS Communicator Stream Cache Server

```auto
sudo vi /var/www/server/node/Config.js

```

1. Set model search directory

```auto
    modelDirs: [
        "./sc_models",
    ],

```

1. Save and quit:`:wq`

Note that it is not necessary to set SSL settings of Config.js if reverse proxy is used. WSS requests are routed through and handled as WS requests by reverse proxy of NGINX before it reaches the SC server.

 ![SSL_27](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/1X/91fc2c57fb41236646315f041b025cdc1b1ea1d2.png)

### Edit inbound rules

1. Edit the inbound rules of the virtual server so that HTTP (80), HTTPS (443) and SSH (22) ports are opened to the internet (Delete 11182 port)  
 ![スクリーンショット 2023-03-10 7.22.39](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/1X/e61c14c29dc3586e4c0a5b3a6adcdc8ba99c494d.png)

### Setting reverse proxy

1. Open the NGINX setting file

```auto
sudo vi /etc/nginx/sites-enabled/default

```

1. Add the following location under existing location / {…}

```auto
        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }
        location /wsproxy/ {
            rewrite /wsproxy/([^/]+) / break;
            proxy_pass http://127.0.0.1:$1;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
        location /httpproxy/ {
            #Rewrite request URI (path), capturing some info in the process.
            #Capture 1 = back-end server port. Capture 2 = back-end server path.
            rewrite /httpproxy/([^/]+)/([^/]+) /$2 break;

            #Proxy to the back end server
            proxy_pass http://127.0.0.1:$1;
        }
        client_max_body_size 200M;

```

1. Save and quit: `:wq`

### Add mjs extension to MIME types of NGINX

Adding mjs extension to MIME types since there’s no entry for the mjs extension in NGINX ’s default file type.

1. Open the MIME types setting file

```auto
sudo vi /etc/nginx/mime.types

```

1. Add `mjs` extension to the js line  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/2X/9/955cad4cc3ab880a2a6d58e9b52e5f0069c32486.png)
2. Save and quit: `:wq`

Note that if hoops-web-viewer.mjs is loaded without adding the mjs file type, the following error occurs:  
`Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream".`

### Reload NGINX

1. Reload NGINX to apply the changed settings

```auto
sudo service nginx reload

```

### Minimal sample viewer creation

Configure a proxy connection using a minimal HTML sample.

1. Create a sample HTML and open

```auto
sudo touch /var/www/html/sample.html
sudo vi /var/www/html/sample.html

```

1. Implement the following HTML

```auto
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8"/>
        <title>Simple</title>
         <style>
            #container {
                width:600px;
                height:480px;
                position:relative;
                border: thin solid #000000;
            }
        </style>

        <script type="importmap">
            {
              "imports": {
                "@hoops/web-viewer": "/hoops-web-viewer.mjs"
              }
            }
        </script>
        <script type="module">
            import {WebViewer} from "@hoops/web-viewer";
            WebViewer.defaultEnginePath = "./";
        </script>

        <script type="module">
            import { WebViewer } from "@hoops/web-viewer";
            window.onload = function () {
                const endpoint = "wss://" + window.location.hostname + "/wsproxy/11182";
                const viewer = new WebViewer({
                    containerId: "container",
                    model: "microengine",
                    endpointUri: endpoint,
                    enginePath: "./"
                });
                viewer.start();
            };
        </script>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>

```

Note that `11180` port is specified with `/wsproxy/` location. This `/wsproxy/` location will be rewritten as `ws://YOUR_DOMAIN_NAME:11182` by reverse proxy of NGINX.

1. Save and quit: `:wq`
2. Start the HOOPS Visualize Web server

```bash
cd /var/www/server/node
../../3rd_party/node/bin/node --expose-gc ./lib/Startup.js

```

1. Open `https://YOUR_DOMAIN_NAME/sample.html` using your web browser to verify you have configured the proxy connections correctly  
 ![SSL_22_2](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/1X/0e69c0ff1ecf294b5b647194d1a3e52b9cfb7463.png)

## Edit sample viewer

If you want to use demo-app/index.html with reverse proxy, it is necessary to edit Router.js

1. Open Router.js

```auto
sudo vi /var/www/html/demo-app/app/Router.js

```

1. Edit `:` to `/wsproxy/` of the `wsUriRoot` function  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/2X/7/77328a6c0b1804aaf23e4054bf2698de9247ab0b.png)
2. Save and quit: `:wq`
3. Start the HOOPS Visualize Web server

```auto
sudo sh /var/www/server/node/start_server.sh

```

1. Open `https://YOUR_DOMAIN_NAME/demo-app/index.html?viewer=csr&model=arboleda&wsPort=11182` using your web browser  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/2X/a/acb67438bcf5db242c3e3db000f788f0c2e13486.jpeg)

## HVW server start service

Make a service so that the HVW Server is started at boot time.

1. Create a description file for service and open

```bash
sudo touch /etc/systemd/system/onboot.service
sudo vi /etc/systemd/system/onboot.service

```

1. Write the following service description

```bash
[Unit]
Description=auto start commands in /etc/onboot.sh on boot
[Service]
Type=simple
ExecStart=/etc/onboot.sh
RemainAfterExit=yes
[Install]
WantedBy=multi-user.target

```

1. Save and quit:`:wq`

2. Create a shell file for the service and open

```bash
sudo touch /etc/onboot.sh
sudo chmod 0755 /etc/onboot.sh
sudo vi /etc/onboot.sh

```

1. Write the following shell command to start the server

```bash
#!/bin/bash
cd /var/www/server/node
../../3rd_party/node/bin/node --expose-gc ./lib/Startup.js

```

1. Save and quit: `:wq`

2. Verify the service is registered

```bash
sudo systemctl list-unit-files --type=service | grep onboot.service

```

[![img_10](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/1X/8b1b2690234c914dd575747fd79a10d4aa14b649.png)](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/1X/8b1b2690234c914dd575747fd79a10d4aa14b649.png "img\_10")

[img\_10795×133 4.84 KB](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/1X/8b1b2690234c914dd575747fd79a10d4aa14b649.png "img\_10")

1. Enable the service to start automatically

```bash
sudo systemctl enable onboot.service

```

1. Restart the virtual server and verify whether HOOPS Visualize Web Server is started automatically

```bash
sudo systemctl status onboot.service

```

[![img_11](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/1X/010ed09b4ed48bc163b8d23832025e1a7fbbc4ee.png)](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/1X/010ed09b4ed48bc163b8d23832025e1a7fbbc4ee.png "img\_11")

[img\_111003×486 25.1 KB](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/1X/010ed09b4ed48bc163b8d23832025e1a7fbbc4ee.png "img\_11")

1. Reload the URL of sample the HTML (`http://xxx.xxx.xxx.xxx/sample.html`) in your web browser to verify you have configured HVW Server to automatically start as a service correctly

---

<div class="post-metadata">

**Author:** ![Toshi-TS3D](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.techsoft3d.com/toshi-ts3d/32/885_2.png) [@Toshi-TS3D](https://forum.techsoft3d.com/u/Toshi-TS3D)\
**Post date:** [July 23, 2024, 3:12am UTC](https://forum.techsoft3d.com/t/hoops-visualize-web-https-server-with-reverse-proxy/1682/2 "2024-07-23T03:12:45Z")

</div>

I’ve updated this article for the HOOPS Communicator WebViewer ESM version (2024.4.0).