setup webserver for flipper-server

Summary: This sets up the metro bundler for flipper-server, to be able to serve the front end. Note that this is a setup that is only relevant for development purposes Done in this diff: * setup metro * setup fast refresh * setup nodemon to be able to refresh on server changes Not done in this diff * Setup FlipperServerImpl in the flipper-server * Load flipper-ui-core in flipper-ui-browser * Load plugins * Support options, env vars etc etc * Make flipper-server stand alone (it is largely self contained, but still requires some static resources like theming) Reviewed By: passy, aigoncharov Differential Revision: D32626137 fbshipit-source-id: 47f580356ddf0993392d3b583082b187661727e9
2021-12-08 04:25:28 -08:00
parent 2b81be6c29
commit 0dfc73da93
10 changed files with 759 additions and 18 deletions
--- a/desktop/static/index.web.dev.html
+++ b/desktop/static/index.web.dev.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="style.css">
+    <link id="flipper-theme-import" rel="stylesheet">
+    <title>Flipper</title>
+    <script>
+      window.flipperConfig = {
+        theme: 'light',
+        entryPoint: 'flipper-ui-browser/src/index-fast-refresh.bundle?platform=web&dev=true&minify=false',
+      }
+    </script>
+    <style>
+
+      #loading {
+        -webkit-app-region: drag;
+        z-index: 999999;
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        padding: 50px;
+        overflow: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 20px;
+        color: #525252;
+        text-align: center;
+      }
+
+      .__infinity-dev-box-error {
+        background-color: red;
+        font-family: monospace;
+        font-size: 12px;
+        z-index: 10;
+        top: 0;
+        left: 0;
+        position: absolute;
+      }
+
+    </style>
+  </head>
+  <body>
+    <div id="root">
+      <div id="loading">
+        Loading...
+      </div>
+    </div>
+
+
+    <div class="__infinity-dev-box __infinity-dev-box-error" hidden>
+
+    </div>
+
+    <script src="/socket.io/socket.io.js"></script>
+
+    <script>
+      (function() {
+        // FIXME: needed to make Metro work
+        window.global = window;
+        global.electronRequire = window.require;
+
+        let suppressErrors = false;
+
+        const socket = io(location.origin);
+
+        socket.on('refresh', () => {
+          location.reload();
+        });
+
+        socket.on('hasErrors', (html) => {
+          openError(html);
+          suppressErrors = true;
+        });
+
+        function openError(text) {
+          if (suppressErrors) {
+            return;
+          }
+
+          const box = document.querySelector('.__infinity-dev-box-error');
+          box.removeAttribute('hidden');
+          box.textContent = text;
+        }
+        window.flipperShowError = openError;
+
+        // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
+        try {
+          if (window.flipperConfig.theme === 'dark') {
+            document.getElementById('flipper-theme-import').href="themes/dark.css";
+          } else {
+            document.getElementById('flipper-theme-import').href="themes/light.css";
+          }
+        } catch(e) {
+          console.error("Failed to initialize theme", e);
+          document.getElementById('flipper-theme-import').href="themes/light.css";
+        }
+
+        function init() {
+          const script = document.createElement('script');
+          script.src = window.flipperConfig.entryPoint;
+
+          script.onerror = (e) => {
+            openError('Script failure. Check Chrome console for more info. ');
+          };
+
+          document.body.appendChild(script);
+        }
+        init();
+      })();
+    </script>
+  </body>
+</html>