import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { Page, Layout, Card, Text, BlockStack } from "@shopify/polaris";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
// Autentificare obligatorie prin App Bridge
const { admin } = await authenticate.admin(request);
const response = await admin.graphql(`
#graphql
query getShopDetails {
shop {
name
currencyCode
}
}
`);
const responseJson = await response.json();
return json({ shop: responseJson.data.shop });
};
export default function Dashboard() {
const { shop } = useLoaderData<typeof loader>();
return (
<Page title="Setări Aplicație">
<Layout>
<Layout.Section>
<Card>
<BlockStack gap="200">
<Text as="h2" variant="headingMd">
Magazin activ: {shop.name}
</Text>
<Text as="p" variant="bodyMd">
Monedă principală: {shop.currencyCode}
</Text>
</BlockStack>
</Card>
</Layout.Section>
</Layout>
</Page>
);
}Am lansat recent al treilea app custom în Shopify App Store folosind stack-ul lor recomandat: Remix (template-ul CLI oficial) și Polaris v12. La un proiect anterior de upsell am atins 14k magazine active, iar review-ul de la echipa Shopify a durat 11 zile pline de feedback tehnic la secundă.
Dacă vrei să eviți refuzurile repetate pe motiv de UX sau probleme de autentificare, sunt câteva chestii specifice pe care nu le găsești clar explicate în documentația lor.
De ce Remix e alegerea corectă (și unde te încurcă)
Shopify a mutat tot ecosistemul pe Remix și se simte. Înainte, cu Node + Express + React, pierdeai două zile doar configurând middleware-ul de autentificare și Session Tokens. Acum, pachetul @shopify/shopify-app-remix se ocupă de refresh-ul de token-uri, OAuth și headers de securitate automat.
Trade-off-ul? Ești blocat în arhitectura Remix de routes și loaders. Dacă ai nevoie de procesări grele în fundal, loader-ul din Remix îți dă timeout rapid în iframe-ul din admin. A trebuit să decuplez rapid calculele grele și să folosesc BullMQ cu un server separat de Node pentru fundal.
Ghilotina numită Shopify App Review
Echipa de review de la Shopify e obsedată de trei chestii: performanță în iframe, ghidul de design Polaris și flow-ul de ieșire din aplicație (uninstalled webhook).
- Embedded App vs. Non-Embedded: Aplicația rulează într-un iframe în admin-ul comerciantului. Dacă folosești redirecționări clasice (
window.location.href) în loc deopen()din App Bridge, Shopify îți respinge app-ul instant. Am pățit-o la prima trimitere pentru că un buton de checkout extern spărgea iframe-ul. - Polaris Web Vitals: UI-ul trebuie să arate NATIV. Dacă pui butoane cu stiluri custom de CSS peste componentele Polaris, reviewer-ul îți trimite screenshot cu roșu. Folosește direct
<BlockStack>,<InlineGrid>și<Card>. Nu încerca să reinventezi roata. - Meniul de navigare: Trebuie să declari exact rutele în
shopify.app.toml. Dacă ai un link în aplicație care nu e definit în App Bridge navigation, primești rejection.
Autentificarea în Loaders: capcana din producție
Codul de mai jos este boilerplate-ul curat pe care îl folosesc în producție pe toate rutele protejate. Fără authenticate.admin(request), Shopify nu-ți va valida cererile când comutatorul de magazin este folosit în fundal.
Trimiterea aplicației în review nu e grea dacă respecți ghidul lor de Polaris 100% și nu încerci să forțezi layout-uri custom. La mine, după ce am reparat redirecționările de App Bridge, aprobarea a venit în sub 48 de ore.
Voi ce stack folosiți pentru app-uri de Shopify? Ați rămas pe infrastructura veche cu React/Express sau ați migrat pe Remix?