import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { authenticate } from "../shopify.server";
import { Page, Layout, Card, Text } from "@shopify/polaris";
export const loader = async ({ request }: LoaderFunctionArgs) => {
// Autentificare obligatorie prin Session Tokens (App Bridge)
const { admin, session } = await authenticate.admin(request);
const response = await admin.graphql(`
#graphql
query getShopDetails {
shop {
name
email
currencyCode
}
}
`);
const responseJson = await response.json();
return json({
shop: responseJson.data.shop,
shopOrigin: session.shop,
});
};
export default function ShopSettings() {
const { shop } = useLoaderData<typeof loader>();
return (
<Page title="Setări Magazin">
<Layout>
<Layout.Section>
<Card>
<Text as="h2" variant="headingMd">
Conectat ca: {shop.name}
</Text>
<Text as="p" variant="bodyMd">
Email contact: {shop.email} ({shop.currencyCode})
</Text>
</Card>
</Layout.Section>
</Layout>
</Page>
);
}Dacă construiești o aplicație de Shopify în prezent, stack-ul oficial recomandat e Remix + Polaris. Se mișcă bine, dar integrarea embedded în adminul Shopify vine cu niște trap-uri care nu sunt scrise clar în documentația lor.
Am lansat recent o aplicație custom de upsell pentru un client cu 12.000 de comenzi lunare și am trecut din nou prin procesul lor riguros de QA. Am adunat câteva lecții dureroase despre sesiune, iframe-uri și checklist-ul lor de review.
Setup-ul: De ce Remix + App Bridge îți dă de furcă
În teorie, rulați npm create @shopify/app@latest și aveți totul configurat. În practică, aplicațiile embedded rulează într-un iframe în interiorul dashboard-ului Shopify. Asta înseamnă că browserul va bloca cookie-urile third-party în Safari și Chrome fără nicio ezitare.
Shopify rezolvă asta cu App Bridge și token-uri JWT scurte (session tokens). Dar când combini asta cu server-side rendering-ul din Remix, apar problemele:
- Loader-ele din Remix au nevoie de
authenticate.admin(request)pe absolut fiecare rută protejată. Dacă uiți să pui wrapper-ul pe o singură rută secundară, aplicația crapă tăcut în iframe cu o eroare generică de CORS sau 401. - Redirect-urile clasice din backend nu funcționează. Nu poți da un
redirect('/login')normal pentru că rupi cadrul iframe-ului. Trebuie folosite headerele speciale pe care Polaris și App Bridge le interceptau pentru a forța re-autentificarea la nivel de fereastră principală.
Am pierdut vreo 6 ore depanând un bug unde Safari bloca tot fluxul de OAuth doar pentru că baza de date SQLite locală își pierdea sesiunile la restart-ul dev serverului. În producție, recomand direct PostgreSQL sau Redis persistent pentru session storage.
Coșmarul numit Shopify App Review
Reviewerii de la Shopify sunt extrem de tipicari. Din experiența mea cu aplicații trimise în magazinul lor, majoritatea reject-urilor vin din două zone: design neconform cu liniile Polaris și tratarea greșită a stărilor de încărcare.
Am adunat mai jos checklist-ul pe care îl parcurg înainte de orice submit:
- Polaris Skeleton Display: Când se încarcă datele în loader, nu lăsa pagina albă. Folosește
<SkeletonPage>și<SkeletonBodyText>. Dacă reviewerul vede un ecran alb mai mult de 1.5 secunde în timp ce faci fetch în GraphQL, primești reject din prima. - Responsiveness pe mobil: Chiar dacă e app embedded de admin, ei testează dashboard-ul pe telefon. Componentele Polaris native scalează decent, dar orice div customizat de tine fără Breakpoints Polaris va strica layout-ul.
- Handling la Uninstalled App: Dacă comerciantul dezinstalează app-ul și îl reinstalează peste 5 minute, webhook-ul
APP_UNINSTALLEDtrebuie să curățe sesiunea veche. Dacă primești eroare de cheie unică în DB la reinstalare, procesul se oprește instant.
Trade-off-ul cinstit
Remix + Polaris e cel mai rapid drum spre a fi acceptat în App Store. Polaris îți dă componente gata făcute care arată fix ca admin-ul nativ Shopify, deci comercianții au încredere în app-ul tău din prima secundă.
Partea nasoală? Polaris e un sistem de design extrem de rigid. Dacă clientul vrea un dashboard customizat agresiv, cu grafice complexe sau micro-interacțiuni atipice, te vei bate cu componentele lor React la fiecare pas. De asemenea, Remix cu SSR pe serverless adaugă un mic cold-start pe rutele de API dacă nu folosești un server dedicat sau un provider de edge bun.
Voi ce folosiți pentru app-uri embedded de Shopify? Mergeți pe stack-ul oficial cu Remix sau ați rămas la un SPA clasic cu Node/Express separat?