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,33 +51,29 @@ import Connect from "../components/Connect.astro";
     >
 </div>
 <script>
-    import { wagmiAdapter } from "../scripts/appkit";
-    import { getMessage } from "../lib/message";
-    import { toXnodeAddress } from "../lib/xnode-address";
-    import { appkitStore } from "../store/appkit";
-    import { signMessage } from "@wagmi/core";
+    const urlParams = new URLSearchParams(window.location.search);
+    const redirect = urlParams.get("redirect") ?? window.location.origin;
+    const rejected = urlParams.get("rejected");
 
-    function setRedirect(redirect: string) {
+    export function setRedirect(redirect: string) {
         const node = document.getElementById("redirect");
         if (node) {
             node.textContent = redirect;
         }
     }
 
-    function setError(error: string) {
+    export function setError(error: string) {
         const node = document.getElementById("error");
         if (node) {
             node.style.display = error ? "flex" : "none";
             node.textContent = error;
         }
     }
 
-    let signingState = false;
-    function setSigning(signing: boolean) {
-        signingState = signing;
-        updateDisplay();
-    }
+    setRedirect(redirect);
+    setError(rejected ?? "");
 
+    const { appkitStore } = await import("../store/appkit");
     function updateDisplay() {
         // Signing indicator
         {
@@ -98,13 +94,11 @@ 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 ?? "");
+    let signingState = false;
+    function setSigning(signing: boolean) {
+        signingState = signing;
+        updateDisplay();
+    }
 
     appkitStore.account.subscribe((account) => {
         if (!account) {
@@ -113,6 +107,10 @@ import Connect from "../components/Connect.astro";
         updateDisplay();
     });
 
+    const { wagmiAdapter } = await import("../scripts/wagmi");
+    const { getMessage } = await import("../lib/message");
+    const { toXnodeAddress } = await import("../lib/xnode-address");
+    const { signMessage } = await import("@wagmi/core");
     document
         .getElementById("authenticate")
         ?.addEventListener("click", async () => {
@@ -164,8 +162,7 @@ import Connect from "../components/Connect.astro";
                 setSigning(false);
             }
         });
-</script>
-<script>
-    import sdk from "@farcaster/miniapp-sdk";
+
+    const { sdk } = await import("@farcaster/miniapp-sdk");
     sdk.actions.ready();
 </script>

astro-app/src/pages/api/login.ts

@@ -23,6 +23,7 @@ export const POST: APIRoute = async ({ request, cookies }) => {
       httpOnly: true,
       secure: true,
       sameSite: "none",
+      path: "/",
     } as const;
     cookies.set("xnode_auth_user", user, cookieOptions);
     if (user?.startsWith("eth:")) {

astro-app/src/scripts/appkit.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;
               '';