serve astro assets directly through nginx and optimize script loading order

Author: Plopmenz

astro-app/astro.config.mjs

@@ -9,6 +9,10 @@ import node from "@astrojs/node";
 export default defineConfig({
   base: "/xnode-auth",
 
+  build: {
+    client: "./xnode-auth",
+  },
+
   vite: {
     plugins: [tailwindcss()],
     ssr: {

astro-app/src/components/Connect.astro

@@ -1,4 +1,43 @@
 <appkit-button balance="hide"></appkit-button>
 <script>
-    import "../scripts/appkit";
+    import { createAppKit } from "@reown/appkit";
+    import { mainnet } from "@reown/appkit/networks";
+    import { appkitStore } from "../store/appkit";
+    import { isAddress } from "viem";
+    import { projectId, wagmiAdapter } from "../scripts/wagmi";
+
+    const metadata = {
+        name: "Xnode Auth",
+        description: "Web3 authenticator and login dashboard.",
+        url: "https://auth.xnode.openmesh.network",
+        icons: ["https://auth.xnode.openmesh.network/favicon.svg"],
+    };
+
+    const modal = createAppKit({
+        adapters: [wagmiAdapter],
+        networks: [mainnet],
+        metadata,
+        projectId,
+        defaultAccountTypes: {
+            eip155: "eoa",
+        },
+        // social features only work with projects that have whitelisted domains, which cannot be done for the default project id, as it would prevent it to be used on all websites
+        features: {
+            ...(projectId === "6afdeb3a0496b33061a69538819a9a7e"
+                ? { email: false, socials: false }
+                : {}),
+            analytics: false,
+            swaps: false,
+            onramp: false,
+        },
+    });
+
+    modal.subscribeAccount((state) => {
+        const address = state.address;
+        if (address === undefined || isAddress(address)) {
+            appkitStore.account.set(address);
+        } else {
+            console.warn(`Invalid appkit address ${address}`);
+        }
+    });
 </script>

astro-app/src/components/Login.astro

@@ -51,26 +51,17 @@ import Connect from "../components/Connect.astro";
     >
 </div>
 <script>
-    import { wagmiAdapter } from "../scripts/appkit";
+    import sdk from "@farcaster/miniapp-sdk";
+    sdk.actions.ready();
+</script>
+<script>
+    import { wagmiAdapter } from "../scripts/wagmi";
     import { getMessage } from "../lib/message";
     import { toXnodeAddress } from "../lib/xnode-address";
-    import { appkitStore } from "../store/appkit";
     import { signMessage } from "@wagmi/core";
-
-    function setRedirect(redirect: string) {
-        const node = document.getElementById("redirect");
-        if (node) {
-            node.textContent = redirect;
-        }
-    }
-
-    function setError(error: string) {
-        const node = document.getElementById("error");
-        if (node) {
-            node.style.display = error ? "flex" : "none";
-            node.textContent = error;
-        }
-    }
+    import { appkitStore } from "../store/appkit";
+    import { setError } from "../scripts/reactive";
+    import { redirect } from "../scripts/params";
 
     let signingState = false;
     function setSigning(signing: boolean) {
@@ -98,14 +89,6 @@ import Connect from "../components/Connect.astro";
         }
     }
 
-    const urlParams = new URLSearchParams(window.location.search);
-
-    const redirect = urlParams.get("redirect") ?? window.location.origin;
-    setRedirect(redirect);
-
-    const rejected = urlParams.get("rejected");
-    setError(rejected ?? "");
-
     appkitStore.account.subscribe((account) => {
         if (!account) {
             signingState = false;
@@ -166,6 +149,9 @@ import Connect from "../components/Connect.astro";
         });
 </script>
 <script>
-    import sdk from "@farcaster/miniapp-sdk";
-    sdk.actions.ready();
+    import { setRedirect, setError } from "../scripts/reactive";
+    import { redirect, rejected } from "../scripts/params";
+
+    setRedirect(redirect);
+    setError(rejected ?? "");
 </script>

astro-app/src/scripts/appkit.ts

@@ -0,0 +1,3 @@
+const urlParams = new URLSearchParams(window.location.search);
+export const redirect = urlParams.get("redirect") ?? window.location.origin;
+export const rejected = urlParams.get("rejected");

astro-app/src/scripts/params.ts

@@ -0,0 +1,14 @@
+export function setRedirect(redirect: string) {
+  const node = document.getElementById("redirect");
+  if (node) {
+    node.textContent = redirect;
+  }
+}
+
+export function setError(error: string) {
+  const node = document.getElementById("error");
+  if (node) {
+    node.style.display = error ? "flex" : "none";
+    node.textContent = error;
+  }
+}

astro-app/src/scripts/reactive.ts

@@ -0,0 +1,14 @@
+import { mainnet } from "@reown/appkit/networks";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+import { config } from "../lib/config";
+import farcasterMiniApp from "@farcaster/miniapp-wagmi-connector";
+
+export const projectId = config.eth.projectid;
+
+export const networks = [mainnet];
+
+export const wagmiAdapter = new WagmiAdapter({
+  projectId,
+  networks,
+  connectors: [farcasterMiniApp()],
+});

astro-app/src/scripts/wagmi.ts

@@ -332,7 +332,16 @@ in
           ))
           {
             "${cfg.nginxConfig.subpath}" = {
-              proxyPass = "http://127.0.0.1:${builtins.toString cfg.port}";
+              root = "${xnode-auth}/share";
+            };
+            "${cfg.nginxConfig.subpath}/_astro" = {
+              root = "${xnode-auth}/share";
+              extraConfig = ''
+                add_header Cache-Control "public, max-age=31536000, immutable";
+              '';
+            };
+            "${cfg.nginxConfig.subpath}/api" = {
+              proxyPass = "http://127.0.0.1:${builtins.toString cfg.port}${cfg.nginxConfig.subpath}/api";
               extraConfig = ''
                 proxy_set_header Host $server_name;
               '';