import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { Page, Layout, Card, Text } from "@shopify/polaris";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
// Validează session token-ul și face redirect automat dacă e expirat
const { admin, session } = await authenticate.admin(request);
const response = await admin.graphql(`
#graphql
query getShopInfo {
shop {
name
myshopifyDomain
}
}
`);
const responseJson = await response.json();
return json({ shop: responseJson.data.shop });
};
export default function Index() {
const { shop } = useLoaderData<typeof loader>();
return (
<Page title="Dashboard Aplicație">
<Layout>
<Layout.Section>
<Card>
<Text as="h2" variant="headingMd">
Magazin conectat: {shop.name}
</Text>
</Card>
</Layout.Section>
</Layout>
</Page>
);
}Am lansat recent a treia aplicație de Shopify din portofoliu — un plugin de cross-sell pentru magazine din zona de fashion. De data asta am mers 100% pe stack-ul recomandat de ei: Remix + Polaris v12, conectate prin noul CLI 3.x. Aplicația are acum peste 3.200 de magazine active și am economisit lejer 2-3 săptămâni de dev față de vechiul meu boilerplate de Node cu React SPA.
Setup-ul cu Remix: de ce îți salvează nopțile
Până anul trecut, integrarea OAuth și gestionarea token-urilor de sesiune în iFrame-ul din Shopify Admin era un coșmar pur cu Safari ITP (Intelligent Tracking Prevention). De când au făcut pivotul oficial spre Remix, pachetul @shopify/shopify-app-remix se ocupă de 90% din mizerie. Când comerciantul deschide aplicația, session token-ul e validat automat direct pe server în rutele de Remix.
Timpul de prim randat în admin a scăzut la sub 1.1 secunde, comparativ cu 2.8 secunde cât aveam pe vechea arhitectură cu Express și Vite. Polaris oferă componente React care arată identic cu restul panoului Shopify, ceea ce oferă un UX nativ incredibil.
Trade-off-ul sincer? Polaris e extrem de rigid. Dacă clientul îți cere un dashboard atipic sau vizualizări complexe de date, te bați crunt cu componentele lor de layout (BlockStack, InlineGrid). Am pierdut o zi întreagă încercând să aliniesc două carduri la o înălțime egală fără să sparg regulile de accesibilitate impuse de biblioteca lor.
Ghidul de supraviețuire la Shopify App Review
Shopify are unul dintre cele mai drastice procese de review din industrie. Mi-au respins o aplicație de trei ori acum 4 ani pentru chestii banale. Cu stack-ul nou, am primit OK-ul din prima încercare, în fix 3 zile lucrătoare.
Ce verifică obsesiv echipa lor de review și cum te ajută Remix + Polaris:
- State-urile de încărcare: Dacă aplicația ta afișează un ecran alb mai mult de 300ms când trage date, primești reject instant. Trebuie să folosești componenta
SkeletonPagedin Polaris pe rutele din Remix cât timpuseNavigationîți spune că starea eloading. - Manevrarea sesiunilor expirate: Când expiră token-ul JWT, aplicația nu are voie să rămână blocată cu o eroare 401 în consolă. Funcția
authenticate.admin(request)pusă la începutul loader-ului din Remix face redirect automat și silențios către re-autentificare. - Mobile responsiveness: Reviewerii testează iFrame-ul pe rezoluții mici de tabletă. Layout-ul Polaris e responsive nativ, deci scăpați de hack-uri de CSS custom.
Cum arată un Loader curat în Remix
Jos aveți exemplul de loader pe care îl folosesc pe toate rutele din aplicație. Se ocupă de autentificare, scoate GraphQL client-ul pre-configurat și întoarce datele gata pregătite pentru componentele Polaris.
Dacă vreți să lansați un SaaS în Shopify App Store, sfatul meu e să nu reinventați roata. Mergeți pe Remix + Polaris, respectați regulile lor stricte de UI și treceți de review fără stres.
Voi ce stack folosiți pentru aplicații de e-commerce? Ați rămas pe backend-uri clasice de Laravel/Node sau ați trecut pe framework-urile dedicate furnizate de platforme?