UI CDN (OriginProtocol#459)

* UI CDN * Lint
errazudin · Aug 19, 2020 · ada43bb · ada43bb
1 parent e8c4970
commit ada43bb
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 7 deletions.
diff --git a/backend/routes/networks.js b/backend/routes/networks.js
@@ -24,7 +24,8 @@ function pickConfig(body) {
     'googleAnalytics',
     'paypalEnvironment',
     'notificationEmail',
-    'notificationEmailDisplayName'
+    'notificationEmailDisplayName',
+    'uiCdn'
   ])
 }
 

diff --git a/backend/utils/deployShop.js b/backend/utils/deployShop.js
@@ -173,16 +173,21 @@ async function _deployShop({
       ? 'rinkeby'
       : 'localhost'
 
-  const html = fs.readFileSync(`${OutputDir}/public/index.html`).toString()
-  fs.writeFileSync(
-    `${OutputDir}/public/index.html`,
-    html
+  function replaceVars(html) {
+    return html
       .replace('TITLE', publicShopConfig.fullTitle)
       .replace('META_DESC', publicShopConfig.metaDescription || '')
       .replace('DATA_DIR', dataDir)
       .replace(/NETWORK/g, networkName)
       .replace('FAVICON', publicShopConfig.favicon || 'favicon.ico')
-  )
+      .replace('UI_SRC', networkConfig.uiCdn || '')
+  }
+
+  const html = fs.readFileSync(`${OutputDir}/public/index.html`).toString()
+  fs.writeFileSync(`${OutputDir}/public/index.html`, replaceVars(html))
+
+  const cdnHtml = fs.readFileSync(`${OutputDir}/public/cdn.html`).toString()
+  fs.writeFileSync(`${OutputDir}/public/cdn.html`, replaceVars(cdnHtml))
 
   // Note: for legacy reasons, the URLs for the IPFS Gateway and API are stored in
   // the network.ipfs/ipfsApi fields while other configs are stored under network.config.

diff --git a/shop/.gitignore b/shop/.gitignore
@@ -3,6 +3,7 @@ node_modules
 public/*
 !public/images*
 !public/template.html
+!public/template-cdn.html
 !public/favicon.ico
 /data/*
 !/data/example*

diff --git a/shop/public/template-cdn.html b/shop/public/template-cdn.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+
+<head>
+  <title>TITLE</title>
+  <meta charset="utf-8">
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no, user-scalable=no">
+  <meta http-equiv="Content-Language" content="en">
+  <meta name="description" content="META_DESC">
+
+  <% if (htmlWebpackPlugin.options.sentryDSN) { %>
+  <script src="https://browser.sentry-cdn.com/5.19.2/bundle.min.js"
+    integrity="sha384-JpEWxJ7oLRn+baXBgcCKEv73uYWsgouzEResgJneOXvTjDZ+1crAXcNAKZoiL96Z"
+    crossorigin="<%= webpackConfig.output.crossOriginLoading %>"></script>
+  <script>
+    <% /* To listen on react */ %>
+    window._sentryLoaded = true
+
+    Sentry.init({
+      dsn: '<%= htmlWebpackPlugin.options.sentryDSN %>',
+      environment: '<%= htmlWebpackPlugin.options.sentryEnvironment %>',
+    })
+  </script>
+  <% } %>
+
+  <script>
+    localStorage.ognNetwork = "NETWORK"
+    window.ognNetwork = "NETWORK"
+  </script>
+
+  <link rel="data-dir" href="DATA_DIR" />
+  <link rel="icon" href="FAVICON" />
+</head>
+
+<body>
+  <div id="app">
+    <div class="loading-screen"></div>
+  </div>
+</body>
+<script crossorigin src="dist/openpgp.min.js"></script>
+<script>
+  if (typeof window.openpgp !== 'undefined') {
+    openpgp.config.show_comment = false
+    openpgp.config.show_version = false
+    openpgp.initWorker({ path: 'dist/openpgp.worker.min.js' })
+  }
+  (function () {
+    const uiSrc = 'UI_SRC'
+    window.webpackPublicPath = uiSrc
+    const rnd = +new Date()
+    fetch(`${uiSrc}builds.json?${rnd}`)
+      .then((res) => res.json())
+      .then((builds) => {
+        const { hash } = builds[builds.length - 1]
+        const styles = [`vendors~app.${hash}.css`, `app.${hash}.css`]
+        for (const style of styles) {
+          const el = document.createElement('link')
+          el.rel = 'stylesheet'
+          el.href = `${uiSrc}${style}`
+          document.head.appendChild(el)
+        }
+        const scripts = [`dist/vendors~app.${hash}.bundle.js`, `app.${hash}.js`]
+        for (const script of scripts) {
+          const el = document.createElement('script')
+          el.async = 'async'
+          el.src = `${uiSrc}${script}`
+          document.body.appendChild(el)
+        }
+      })
+  })()
+</script>
+
+</html>
diff --git a/shop/src/index.js b/shop/src/index.js
@@ -1,3 +1,5 @@
+// eslint-disable-next-line
+__webpack_public_path__ = window.webpackPublicPath || ''
 require('dotenv').config()
 
 import React, { useEffect } from 'react'

diff --git a/shop/src/pages/super-admin/networks/_Form.js b/shop/src/pages/super-admin/networks/_Form.js
@@ -365,11 +365,16 @@ const NetworkForm = ({ onSave, network, feedback, className }) => {
         </div>
       </div>
       <div className="form-row">
-        <div className="form-group col-md-12">
+        <div className="form-group col-md-6">
           <label>Discord Webhook</label>
           <PasswordField field="discordWebhook" input={input} />
           {Feedback('discordWebhook')}
         </div>
+        <div className="form-group col-md-6">
+          <label>UI CDN</label>
+          <input {...input('uiCdn')} />
+          {Feedback('uiCdn')}
+        </div>
       </div>
       <div className="form-row">
         <div className="form-group col-md-6">

diff --git a/shop/webpack.config.js b/shop/webpack.config.js
@@ -184,6 +184,13 @@ const webpackConfig = {
       sentryDSN: process.env.SENTRY_DSN,
       sentryEnvironment: process.env.ENVIRONMENT
     }),
+    new HtmlWebpackPlugin({
+      template: 'public/template-cdn.html',
+      filename: 'cdn.html',
+      inject: false,
+      sentryDSN: process.env.SENTRY_DSN,
+      sentryEnvironment: process.env.ENVIRONMENT
+    }),
     new webpack.EnvironmentPlugin({
       WEBPACK_BUILD: true,
       NODE_ENV: process.env.NODE_ENV || 'development',