fix(HTTPS): Fixes an issue with connecting using HTTPS. Closes #206

client/src/components/WelcomeButtons.tsx

@@ -65,6 +65,17 @@ export const WelcomeButtons = ({className}: {className?: string}) => {
           <NavLink className="btn btn-info btn-outline" to="/docs">
             How-to Guides
           </NavLink>
+          {process.env.NODE_ENV === "production" &&
+            location.protocol !== "https" && (
+              <a
+                className="btn btn-error btn-outline"
+                href={`https://${location.hostname}:${
+                  Number(location.port) + 1
+                }`}
+              >
+                Use HTTPS
+              </a>
+            )}
         </>
       )}
     </div>

client/src/docs/Troubleshooting/using-https.mdx

@@ -0,0 +1,58 @@
+---
+title: Using HTTPS
+order: 1
+---
+
+# Using HTTPS
+
+Thorium Nova has clients connect using HTTP by default. However, browsers like
+Chrome only allow certain features to be used when the connection is using
+HTTPS. These include things like WebUSB, WebMIDI, WebRTC, and video and audio
+capture.
+
+None of these features are currently being used, but eventually we hope to
+incorporate them into the controls. These might be used for things like:
+
+- Connecting DMX lights and controlling them from any connected client.
+- Using a MIDI control board as an interface for the controls.
+- Peer-to-peer voice chat for conversations between remote crew members and
+  between the crew and flight director.
+
+## Activating HTTPS
+
+Since Thorium Nova is hosted within the networks of players and not on the open
+internet, it isn't possible to avoid the security warnings of browsers. However,
+it is possible to get around them.
+
+You can activate HTTPS by clicking the "Use HTTPS" button on the Thorium Nova
+main screen. This will redirect your browser to the same page, but using the
+HTTPS protocol and with the port number incremented by one, which by default
+is 4445. For example, the new URL will be `https://<ip address>:4445`.
+
+The first time you do this, you will likely see a warning from the browser about
+the security of the connection. Different browsers provide different ways to
+ignore this warning.
+
+![Google Chrome showing a security warning](./insecure.png)
+
+In Google Chrome, you need to click on the page and type `thisisunsafe` into the
+window. There isn't a text box to type it into, you just type it on the window.
+This will cause the page to actually load.
+
+## A Note About Security
+
+If a web browser is giving you a security warning, that means the website does
+have some kind of security vulnerability. Using HTTPS with Thorium Nova is
+**not** an exception.
+
+Of course, Thorium Nova isn't designed to pose a risk to you or your computer.
+While it is possible Thorium Nova could use it's HTTPS connection to do
+nefarious things, if you trust the developers of Thorium Nova and the code, you
+can be reasonably confident that using HTTPS with Thorium Nova is safe. Since
+it's open-source, you are always welcome to review the code yourself.
+
+If you can't bring yourself to trust Thorium Nova, than it's probably best to
+not use it with the built-in HTTPS. There are ways you can set up Thorium Nova
+to work with HTTPS in a secure way. You could create your own security
+certificate to use with Thorium Nova or you could connect to the Thorium Nova
+HTTP server using a proxy.

desktop/main/electron.ts

@@ -31,7 +31,7 @@ const cert = fs.readFileSync(
   ),
   "utf8"
 );
-const port = process.env.PORT || 4444;
+const port = Number(process.env.PORT) || 4444;
 
 async function createWindow() {
   await startThoriumServer();
@@ -72,7 +72,9 @@ async function createWindow() {
     // e.preventDefault();
   });
 
-  win.loadURL(`https://localhost:${port}`);
+  // We add 1 to the port, since we want to connect to the HTTPS server
+  // which is 1 more than the default port
+  win.loadURL(`https://localhost:${port + 1}`);
   win.on("closed", () => {
     win = null;
   });

server/API.md

@@ -3,7 +3,7 @@
 ## Environment Variables
 
 - `PORT` - Set the port for the HTTP server. Useful for headless setups.
-  Defaults to 4444.
+  Defaults to 4444. The HTTPS server with use the port + 1, defaulting to 4445.
 - `COOKIE_SECRET` - A secret key used to encrypt secure cookies. This is
   currently unused.
 - `THORIUM_PATH` - The directory that will contain the data and assets for

server/package.json

@@ -33,6 +33,7 @@
     "fastify": "^3.25.0",
     "fastify-cookie": "^5.4.0",
     "fastify-cors": "^6.0.2",
+    "fastify-http-proxy": "^6.2.1",
     "fastify-multipart": "^5.2.1",
     "fastify-static": "^4.5.0",
     "fastify-websocket": "^4.0.0",