{"id":346571,"date":"2023-08-31T13:10:12","date_gmt":"2023-08-31T19:10:12","guid":{"rendered":"https:\/\/r-posts.com\/?p=10537"},"modified":"2023-08-31T13:10:12","modified_gmt":"2023-08-31T19:10:12","slug":"build-serverless-shiny-application-via-github-page","status":"publish","type":"post","link":"https:\/\/www.r-bloggers.com\/2023\/08\/build-serverless-shiny-application-via-github-page\/","title":{"rendered":"Build serverless shiny application via Github page"},"content":{"rendered":"\r\n\r\n
\r\n[This article was first published on R-posts.com<\/a><\/strong>, and kindly contributed to R-bloggers<\/a>]. (You can report issue about the content on this page here<\/a>)\r\n
Want to share your content on R-bloggers? click here<\/a> if you have a blog, or here<\/a> if you don't.\r\n<\/div>\n

Simple guide for simple shiny application\u00a0<\/h3>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

TL;DR<\/h4>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\"\"<\/div>\r\n<\/div>\r\n<\/figure>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

I made\u00a0<\/span>shiny<\/strong>\u00a0<\/span>application in\u00a0<\/span>github page<\/strong>\u00a0<\/span>with\u00a0<\/span>quarto.<\/strong><\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

You can check code in\u00a0<\/span>my github repository<\/a>\u00a0<\/span>and\u00a0<\/span>result<\/a>,\u00a0<\/span>result2<\/a><\/p>\r\n<\/blockquote>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

How we use shiny<\/h4>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

Shiny<\/code>\u00a0<\/span>is R package to make user utilize R with web browser without install it.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

So my company utilizes shiny to provide statistical analysis for doctors (who don\u2019t know R but need statistics).<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\"\"<\/div>\r\n<\/div>\r\n<\/figure>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
<\/span><\/span><\/span><\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

Behind shiny<\/strong><\/h4>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

As you know,\u00a0<\/span>shiny<\/code>\u00a0<\/span>is consisted with 2 part. UI and Server<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

You may think just\u00a0<\/span>UI<\/strong>\u00a0<\/span>is channel to both\u00a0<\/span>get input<\/strong>\u00a0<\/span>(data) from user and\u00a0<\/span>return calculated output<\/strong>\u00a0<\/span>(result) to user.
\r\nand\u00a0<\/span>server<\/strong>\u00a0<\/span>is just\u00a0<\/span>calculator<\/strong><\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

It means,\u00a0<\/span>server requires<\/strong>\u00a0<\/span>dynamic calculation that may\u00a0<\/span>change, not fixed<\/strong>\u00a0<\/span>contents (it called as static web page)<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

To achieve dynamic calculation, there are several options.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

We can use\u00a0<\/span>shinyapps.io<\/a>, posit connect, or deploy own shiny server in other cloud like AWS \/ azure \/ GCP \u2026<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

These options can be categorized into two main categories: free but with limited features, or feature-rich but paid.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\"\"<\/div>\r\n<\/div>\r\n<\/figure>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

There is no single right answer, but I use shinyapps.io in see toy level project or deploy using shiny server in company\u2019s cloud server which is not just toy level.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n
The rise of webR<\/span>
\r\n<\/span><\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n


\r\nRecent,\u00a0<\/span>webassembly<\/strong>\u00a0<\/span>(wasm<\/code>) has emerged. that is use programming language in web browser (like Chrome) without install it (via javascript)<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n

As far as I know,\u00a0<\/span>webR<\/a>\u00a0<\/span>(R version of wasm) is built from late 2022 and some Examples are being shared to make R available on the web.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n

I understand logic for webR like just below figure. (but understanding is not necessary to run)<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n

\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\"\"<\/div>\r\n<\/div>\r\n<\/figure>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n
<\/span><\/span><\/span><\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n

Shiny with wasm<\/h4>\r\n\r\n\r\n\r\n\r\n\r\n\r\n

For shiny, there is already wasm application called\u00a0<\/span>shinylive<\/strong><\/a>. but it utilizes\u00a0<\/span>shiny for Python<\/strong>.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n

\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\"\"<\/div>\r\n<\/div>\r\n<\/figure>\r\n\r\n\r\n\r\n\r\n\r\n\r\n

Personally, I\u2019m not familiar with this. Since I used R for a long time
\r\nso I wasn\u2019t interested in this.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n

but very recent, The article has been shared with appsilon\u2019s shiny weekly newsletter.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n

and Leemput explains\u00a0<\/span>how to implant webR and shiny application in WordPress<\/strong><\/a>\u00a0<\/span>very kindly.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n

Since wordpress provides a static page service, this means that shiny can be planted using the\u00a0<\/span>github page<\/strong>\u00a0<\/span>I\u2019m familiar with. (There are examples with netlify. so I think static page service like Vercel, Notion, Firebase or even medium may use webR)<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n

The logic is just below. (as I understand)<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n

\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\"\"<\/div>\r\n<\/div>\r\n<\/figure>\r\n\r\n\r\n\r\n\r\n\r\n\r\n

note, Main difference with webR and shiny wasm is service worker<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n


\r\n<\/span>\r\n\r\n\r\n\r\n\r\n\r\n\r\n
<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n
<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n

Let\u2019s Build it<\/h4>\r\n\r\n\r\n\r\n\r\n\r\n

To build serverless shiny application with github page, we need 3 + 1 things.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n

1. HTML contents (button<\/strong>\u00a0<\/span>to show status of wasm and\u00a0<\/span>iframe<\/strong>\u00a0<\/span>for shiny applicaiton)<\/p>\r\n\r\n\r\n\r\n\r\n\r\n

2. shiny code (app.R<\/strong>, we\u2019ll utilize pre-made and publicly avaiable app)<\/p>\r\n\r\n\r\n\r\n\r\n\r\n

3.\u00a0<\/span>javascript<\/strong>\u00a0<\/span>to run service worker (web worker + serivce worker)<\/p>\r\n\r\n\r\n\r\n\r\n\r\n

and hard thing.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n

4.\u00a0<\/span>configuration for github page<\/strong>\u00a0<\/span>to utilize service worker via proxy.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n

we can utilize the resources provided by Leemput. (HTML contents and javascript code)<\/p>\r\n\r\n\r\n\r\n\r\n\r\n

so let\u2019s make\u00a0<\/span>index.qmd<\/strong>\u00a0<\/span>like below (you can check in my\u00a0<\/span>repo<\/a>\u00a0<\/span>too)
\r\n
\r\nImportant:<\/strong> Change html<\/strong> to \u201c{=html}\u201d<\/strong>. I changed it since it breaks wordpress site.<\/p>\r\n\r\n\r\n

\r\n\r\n\r\n
\r\n\r\n\r\n
\r\n\r\n\r\n
---\r\ntitle: "serverless shiny with github page"\r\ninclude-in-header:\r\ntext: | \r\n  <script> type='application\/javascript' src = 'enable-threads.js' <\/script>\r\n---\r\n\r\n```html\r\n<button class="btn btn-success btn-sm" type="button" style="background-color: dodgerblue" id="statusButton">\r\n  <i class="fas fa-spinner fa-spin"><\/i>\r\n  Loading webR...\r\n<\/button>\r\n<div id="iframeContainer"><\/div>\r\n<script defer src="<https:\/\/use.fontawesome.com\/releases\/v5.15.4\/js\/all.js>" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"><\/script>\r\n<script type="module">\r\n  import { WebR } from '<https:\/\/webr.r-wasm.org\/latest\/webr.mjs>';\r\n  const webR = new WebR();\r\n  \/\/ TODO\r\n  const shinyScriptURL = '<https:\/\/raw.githubusercontent.com\/rstudio\/shiny\/main\/inst\/examples\/01_hello\/app.R>'\r\n  const shinyScriptName = 'app.R'\r\n  let webSocketHandleCounter = 0;\r\n  let webSocketRefs = {};\r\n  const loadShiny = async () => {\r\n    try {\r\n      document.getElementById('statusButton').innerHTML = `\r\n        <i class="fas fa-spinner fa-spin"><\/i>\r\n        Setting up websocket proxy and register service worker`;\r\n      class WebSocketProxy {\r\n        url;\r\n        handle;\r\n        bufferedAmount;\r\n        readyState;\r\n        constructor(_url) {\r\n          this.url = _url\r\n          this.handle = webSocketHandleCounter++;\r\n          this.bufferedAmount = 0;\r\n          this.shelter = null;\r\n          webSocketRefs[this.handle] = this;\r\n          webR.evalRVoid(`\r\n                        onWSOpen <- options('webr_httpuv_onWSOpen')[[1]]\r\n                        if (!is.null(onWSOpen)) {\r\n                          onWSOpen(${this.handle},list(handle = ${this.handle}))\r\n                        }`)\r\n          setTimeout(() => {\r\n            this.readyState = 1;\r\n            this.onopen()},\r\n            0);\r\n        }\r\n        async send(msg) {\r\n          webR.evalRVoid(`\r\n          onWSMessage <- options('webr_httpuv_onWSMessage')[[1]]\r\n          if (!is.null(onWSMessage)) {onWSMessage(${this.handle}, FALSE, '${msg}')}\r\n          `)\r\n        }\r\n      }\r\n      await webR.init();\r\n      console.log('webR ready');\r\n      (async () => {\r\n        for (; ;) {\r\n          const output = await webR.read();\r\n          switch (output.type) {\r\n            case 'stdout':\r\n              console.log(output.data)\r\n              break;\r\n            case 'stderr':\r\n              console.log(output.data)\r\n              break;\r\n            case '_webR_httpuv_TcpResponse':\r\n              const registration = await navigator.serviceWorker.getRegistration();\r\n              registration.active.postMessage({\r\n                type: "wasm-http-response",\r\n                uuid: output.uuid,\r\n                response: output.data,\r\n              });\r\n              break;\r\n            case '_webR_httpuv_WSResponse':\r\n              const event = { data: output.data.message };\r\n              webSocketRefs[output.data.handle].onmessage(event);\r\n              console.log(event)\r\n              break;\r\n          }\r\n        }\r\n      })();\r\n      \/\/ TODO\r\n      const registration = await navigator.serviceWorker.register('\/wasmR\/httpuv-serviceworker.js', { scope: '\/wasmR\/' }).catch((error) => {\r\n      console.error('Service worker registration error:', error);\r\n      });\r\n      if ('serviceWorker' in navigator) {\r\n        navigator.serviceWorker.getRegistration()\r\n          .then((registration) => {\r\n            if (registration) {\r\n              const scope = registration.scope;\r\n              console.log('Service worker scope:', scope);\r\n            } else {\r\n              console.log('No registered service worker found.');\r\n            }\r\n          })\r\n          .catch((error) => {\r\n            console.error('Error retrieving service worker registration:', error);\r\n          });\r\n      } else {\r\n        console.log('Service workers not supported.');\r\n      }\r\n      await navigator.serviceWorker.ready;\r\n      window.addEventListener('beforeunload', async () => {\r\n        await registration.unregister();\r\n      });\r\n      console.log("service worker registered");\r\n      document.getElementById('statusButton').innerHTML = `\r\n        <i class="fas fa-spinner fa-spin"><\/i>\r\n        Downloading R script...\r\n      `;\r\n      await webR.evalR("download.file('" + shinyScriptURL + "', '" + shinyScriptName + "')");\r\n      console.log("file downloaded");\r\n      document.getElementById('statusButton').innerHTML = `\r\n        <i class="fas fa-spinner fa-spin"><\/i>\r\n        Installing packages...\r\n      `;\r\n      await webR.installPackages(["shiny", "jsonlite"])\r\n      document.getElementById('statusButton').innerHTML = `\r\n        <i class="fas fa-spinner fa-spin"><\/i>\r\n        Loading app...\r\n      `;\r\n      webR.writeConsole(`\r\n          library(shiny)\r\n          runApp('` + shinyScriptName + `')\r\n      `);\r\n      \/\/ Setup listener for service worker messages\r\n      navigator.serviceWorker.addEventListener('message', async (event) => {\r\n        if (event.data.type === 'wasm-http-fetch') {\r\n          var url = new URL(event.data.url);\r\n          var pathname = url.pathname.replace(\/.*\\\\\/__wasm__\\\\\/([0-9a-fA-F-]{36})\/, "");\r\n          var query = url.search.replace(\/^\\\\?\/, '');\r\n          webR.evalRVoid(`\r\n                     onRequest <- options("webr_httpuv_onRequest")[[1]]\r\n                     if (!is.null(onRequest)) {\r\n                       onRequest(\r\n                         list(\r\n                           PATH_INFO = "${pathname}",\r\n                           REQUEST_METHOD = "${event.data.method}",\r\n                           UUID = "${event.data.uuid}",\r\n                           QUERY_STRING = "${query}"\r\n                         )\r\n                       )\r\n                     }\r\n                     `);\r\n        }\r\n      });\r\n      \/\/ Register with service worker and get our client ID\r\n      const clientId = await new Promise((resolve) => {\r\n        navigator.serviceWorker.addEventListener('message', function listener(event) {\r\n          if (event.data.type === 'registration-successful') {\r\n            navigator.serviceWorker.removeEventListener('message', listener);\r\n            resolve(event.data.clientId);\r\n            console.log("event data:")\r\n            console.log(event.data)\r\n          }\r\n        });\r\n        registration.active.postMessage({ type: "register-client" });\r\n      });\r\n      console.log('I am client: ', clientId);\r\n      console.log("serviceworker proxy is ready");\r\n      \/\/ Load the WASM httpuv hosted page in an iframe\r\n      const containerDiv = document.getElementById('iframeContainer');\r\n      let iframe = document.createElement('iframe');\r\n      iframe.id = 'app';\r\n      iframe.src = `.\/__wasm__\/${clientId}\/`;\r\n      iframe.frameBorder = '0';\r\n      iframe.style.width = '100%';\r\n      iframe.style.height = '600px'; \/\/ Adjust the height as needed\r\n      iframe.style.overflow = 'auto';\r\n      containerDiv.appendChild(iframe);\r\n      \/\/ Install the websocket proxy for chatting to httpuv\r\n      iframe.contentWindow.WebSocket = WebSocketProxy;\r\n      document.getElementById('statusButton').innerHTML = `\r\n          <i class="fas fa-check-circle"><\/i>\r\n          App loaded!\r\n      `;\r\n      document.getElementById('statusButton').style.backgroundColor = 'green';\r\n      console.log("App loaded!");\r\n    } catch (error) {\r\n      console.log("Error:", error);\r\n      document.getElementById('statusButton').innerHTML = `\r\n        <i class="fas fa-times-circle"><\/i>\r\n        Something went wrong...\r\n      `;\r\n      document.getElementById('statusButton').style.backgroundColor = 'red';\r\n    }\r\n  };\r\n  loadShiny();\r\n<\/script>\r\n```<\/pre>\r\n\r\n\r\n\r\n\r\n
note that, there is\u00a0<\/span>4 code<\/strong>\u00a0<\/span>that you must notice.<\/p>\r\n\r\n\r\n\r\n
    \r\n    \r\n    \r\n    \r\n\t
  1. Line 3\u20134<\/code>\u00a0<\/span>add header to\u00a0<\/span>enable-thread.js<\/code>\u00a0<\/span>: github page has some permissions-policy (CORB \/ COOP \/ COEP) that blocks resource from other source page. so add this to enable it.\u00a0<\/li>\r\n    \r\n    \r\n    \r\n\t
  2. Line 7<\/code>\u00a0add \u201c=html\u201d to HTML code in quarto (not just show it)<\/li>\r\n    \r\n    \r\n    \r\n\t
  3. First TODO<\/code>\u00a0<\/span>set\u00a0<\/span>app.R code via URL<\/strong>: I tried to include in repo and call it like\u00a0<\/span>repo\/app.R<\/code>, but it didn\u2019t work. so upload\u00a0<\/span>app.R<\/code>\u00a0<\/span>in your repo and call it with raw file URL<\/li>\r\n    \r\n    \r\n    \r\n\t
  4. Last TODO<\/code>\u00a0<\/span>register service worker<\/strong>\u00a0<\/span>along your github page:
    \r\nin registration, above code use\u00a0<\/span>\/wasmR\/httpuv-serviceworker.js<\/code>\u00a0<\/span>and scope\u00a0<\/span>\/wasmR\/<\/code>\u00a0<\/span>but you must change to wasmR as your repository name.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n
    after complete index.qmd. render it to index.html<\/p>\r\n\r\n\r\n\r\n
    \r\n\r\n\r\n\r\n
    but result will not show in localhost.<\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n
    Remain step is so easy.<\/p>\r\n\r\n\r\n\r\n