import type { LoaderFunctionArgs } from "react-router"; import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData, useRouteError, } from "react-router"; import polarisStyles from "@shopify/polaris/build/esm/styles.css?url"; import dashboardStyles from "./dashboard.css?url"; export const links = () => [ { rel: "preconnect", href: "https://fonts.googleapis.com" }, { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }, { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" }, { rel: "stylesheet", href: polarisStyles }, { rel: "stylesheet", href: dashboardStyles }, { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" }, { rel: "preconnect", href: "https://cdn.shopify.com" }, ]; // 1. Return the API key from environment variables export const loader = async ({ request }: LoaderFunctionArgs) => { return { apiKey: process.env.SHOPIFY_API_KEY || "", }; }; export default function App() { const { apiKey } = useLoaderData(); return ( {/* 2. Add the Shopify API Key & App Bridge CDN script here */} ); }