feature: add expo module config and static redirect page (#54)

* feature: add expo module config and static redirect page This adds Atlas to the additional devtools list in the Expo CLI. * refactor: style the static Atlas redirect page * fix(webui): convert source URLs to localhost This is to avoid "unauthorized request" errors in Metro.
expo · May 17, 2024 · b276b54 · b276b54
1 parent 861ff51
commit b276b54
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 1 deletion.
diff --git a/expo-module.config.json b/expo-module.config.json
@@ -0,0 +1,6 @@
+{
+  "platforms": ["devtools"],
+  "devtools": {
+    "webpageRoot": "static"
+  }
+}
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "cli.d.ts",
     "metro.js",
     "metro.d.ts",
+    "static",
     "webui/dist"
   ],
   "homepage": "https://github.com/expo/expo-atlas",

diff --git a/static/index.html b/static/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="refresh" content="0; url=/_expo/atlas" />
+
+    <title>Expo Atlas - Redirecting...</title>
+
+    <script type="text/javascript">
+      window.location.href = '/_expo/atlas';
+    </script>
+
+    <style>
+      html, :host {
+        -webkit-text-size-adjust: 100%;
+        -moz-tab-size: 4;
+        -o-tab-size: 4;
+        tab-size: 4;
+        -webkit-font-feature-settings: normal;
+        font-feature-settings: normal;
+        font-variation-settings: normal;
+        -webkit-tap-highlight-color: transparent;
+        font-family: ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
+        line-height: 1.5
+      }
+
+      html, body, main {
+        background-color: #0c0d0e;
+        height: auto;
+        min-height: 100vh;
+        margin: 0;
+        padding: 0;
+        color: #ecedee;
+      }
+
+      main {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      h2 {
+        margin: 1rem;
+        font-size: 1.125rem;
+      }
+
+      a { color: inherit }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h2>Redirecting.</h2>
+      <p>Opening Atlas for your project, <a href="/_expo/atlas">click here</a> if that doesn't happen automatically</p>
+    </main>
+  </body>
+</html>
diff --git a/webui/src/app/--/bundles/[bundle]/reload+api.ts b/webui/src/app/--/bundles/[bundle]/reload+api.ts
@@ -14,7 +14,11 @@ export async function GET(_request: Request, params: Record<'bundle', string>) {
       );
     }
 
-    return Response.redirect(bundle.serializeOptions.sourceUrl, 302);
+    // Convert the source URL to localhost, avoiding "unauthorized requests" in Metro
+    const sourceUrl = new URL(bundle.serializeOptions.sourceUrl);
+    sourceUrl.hostname = 'localhost';
+
+    return Response.redirect(sourceUrl, 302);
   } catch (error: any) {
     return Response.json({ error: error.message }, { status: 406 });
   }