codesandbox magic

Author: pelikhan

README.md

@@ -10,13 +10,7 @@ The gateway can be run locally (no cloud dependencies), in GitHub CodeSpaces or
 | :exclamation: This implementation is for prototyping only and not meant for production. |
 | --------------------------------------------------------------------------------------- |
 
-## Local development / GitHub Codespaces
-
-Running the gateway in GitHub codespaces will give you an addressable web server that will be reachable by devices which the codespace
-is active. It is an easy to get a development gateway available on the web without having to deal with network issues.
-The tools will automatically detect CodeSpaces and self configure.
-
-Make sure to follow the provisioning steps in the documentation before trying to run locally.
+## Local development
 
 - setup Node.JS 18
 
@@ -54,6 +48,12 @@ You can also access the Swagger sandbox locally:
 -   Click Authorize
 -   Use user/password `devstoreaccount1:Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw==`
 
+### GitHub CodeSpaces, CodeSandbox.io
+
+Running the gateway in GitHub Codespaces/CodeSandbox will give you an addressable web server that will be reachable by devices which the codespace
+is active. It is an easy to get a development gateway available on the web without having to deal with network issues.
+The tools will automatically detect CodeSpaces/CodeSandbox and self configure.
+
 ## Azure services
 
 Make sure to follow the provisioning steps in the documentation before trying to run locally.

dev.mjs

@@ -8,14 +8,28 @@ const out = dotenv.config({ path: azure ? "./.env" : "./local.env" })
 if (out.error) throw out.error
 
 const port = process.env.PORT || (process.env.PORT = "7071")
-// codespace special handling
-const { CODESPACE_NAME, GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN } = process.env
+const {
+    CODESPACE_NAME,
+    GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN,
+    CODESANDBOX_HOST,
+} = process.env
+// GitHub codespaces
 if (CODESPACE_NAME && GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN) {
     process.env.WEBSITE_HOSTNAME = `${CODESPACE_NAME}-${port}.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}`
     process.env.WEBSITE_PROTOCOL = "https"
-    console.log(`GitHub Codespace environment detected...`)
-    console.warn(`- make sure to change the visibility of port '${port}' to 'Public'`)
-} else if (!azure) {
+    console.log(`GitHub Codespace detected...`)
+    console.warn(
+        `- make sure to change the visibility of port '${port}' to 'Public'`
+    )
+}
+// Codesandbox
+else if (CODESANDBOX_HOST) {
+    process.env.WEBSITE_HOSTNAME = CODESANDBOX_HOST
+    process.env.WEBSITE_PROTOCOL = "https"
+    console.log(`Codesandbox.io detected...`)
+}
+// local dev
+else if (!azure) {
     const address = (() => {
         const nis = networkInterfaces()
         for (const interfaceName in nis) {

src/util.ts

@@ -6,10 +6,15 @@ import { DeviceInfo } from "./schema"
  */
 export function selfUrl() {
     // use https://learn.microsoft.com/en-us/azure/app-service/reference-app-settings?tabs=kudu%2Cdotnet
-    const hostname = process.env["WEBSITE_HOSTNAME"]
+    const hostname = process.env.WEBSITE_HOSTNAME
     if (!hostname) throw new Error("WEBSITE_HOSTNAME not configured")
-    const protocol = /^(127\.|0\.|localhost)/i.test(hostname) ? "http" : "https"
-    return `${protocol}://${hostname}`
+    const protocol =
+        process.env.WEBSITE_PROTOCOL || /^(127\.|0\.|localhost)/i.test(hostname)
+            ? "http"
+            : "https"
+    const url = `${protocol}://${hostname}`
+    console.log({ url })
+    return url
 }
 
 export function selfHost() {