import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
// authenticate.admin se ocupă automat de Session Tokens în iframe
const { admin, session } = await authenticate.admin(request);
const response = await admin.graphql(`
query getShopDetails {
shop {
name
email
plan {
displayName
}
}
}
`);
const responseJson = await response.json();
return json({
shop: responseJson.data.shop,
domain: session.shop,
});
};Dacă vrei să scoți o aplicație publică pe Shopify App Store, stiva oficială bazată pe Remix și Polaris e practic singura cale care nu te face să-ți smulgi părul din cap. Am trecut recent o aplicație de B2B (care procesează în jur de 12k comenzi lunar) prin procesul lor strict de re-certificare și am adunat câteva lecții practice. Hai să vedem ce merită folosit din ecosistemul lor și unde sunt minusurile ascunse.
De ce Remix și Polaris e stack-ul implicit
Când Shopify a adoptat Remix ca framework oficial, au simplificat enorm integrarea de App Bridge. Template-ul lor oficial îți rezolvă din start 80% din problemele de boilerplate: autentificare bazată pe session tokens, gestionarea webhook-urilor și menținerea sesiunii în iframe-ul din admin.
Polaris, pe de altă parte, este design system-ul lor de React. Arată impecabil în Admin Dashboard, iar comercianții au impresia că aplicația ta e o funcționalitate nativă din Shopify. Asta crește rata de conversie din start.
Trade-off-ul? Polaris te limitează extrem de mult la capitolul flexibilitate vizuală. Dacă vrei un dashboard cu grafice ultra-custom, layout-uri atipice sau animații complexe, Polaris mai mult te încurcă. Dar pentru SaaS-uri clasice de gestiune, e combinația ideală.
Greșeala care îți aduce reject automat: Session Tokens
Cea mai mare capcană pentru cineva care vine din Node sau Express tradițional e gestiunea sesiunii. Safari și Brave blochează agresiv third-party cookies în iframe-uri. Dacă încerci să folosești cookie-uri clasice de sesiune, aplicația ta va intra într-un loop infinit de redirect-uri în admin-ul Shopify.
Shopify folosește acum JWT-uri scurte (Session Tokens) transmise direct prin App Bridge. În Remix, trebuie să folosești exclusiv wrapper-ul authenticate.admin(request) în fiecare loader sau action din rutele protejate.
La ce se uită echipa de QA la review
Procesul de review durează de obicei între 3 și 5 zile lucrătoare. La ultimul submission am primit un reject din prima încercare pentru o chestie banală de UX. Iată ce verifică ei cu atenție:
- Webhook-ul de dezinstalare: Când un comerciant șterge aplicația, ești obligat prin TOS să procesezi webhook-ul
app/uninstalledși să-i marchezi magazinul ca inactiv în baza ta de date. Dacă ruta ta întoarce 500 sau timeout (peste 5 secunde), e reject direct. - In-App Billing API: Toate plățile trebuie procesate prin Billing API-ul Shopify. Dacă ai cel mai mic link extern către un checkout de Stripe sau alt procesator terț, te resping instant.
- Meniul de navigare nativ: Aplicația trebuie să folosească
<NavMenu>din App Bridge. Fără link-uri statice scrie cu<a>HTML simplu care sparg iframe-ul.
Dacă respecți structura oferită de template-ul de Remix și nu încerci să inventezi tu propria autentificare, treci de review din prima încercare. Voi ce bătăi de cap ați avut cu App Bridge v3 sau cu iframe-urile pe browserele bazate på WebKit?