Shopify Polaris + Remix pentru app-uri custom: de la setup la review-ul oficial

Bogdan Răducanu · 2026-08-02T06:35:31.780Z

Cum am lansat un app Shopify cu Remix și Polaris, ce capcane de setup am evitat și cum am trecut de review-ul lor draconic din prima încercare.

Postat 2 aug. 2026

typescript

import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(`
    #graphql
    query getProducts {
      products(first: 10) {
        nodes {
          id
          title
        }
      }
    }
  `);
  const data = await response.json();
  return json({ products: data.data.products.nodes });
};

Am lansat luna trecută o aplicație Shopify de bundle-uri pentru un client cu 12k comenzi pe lună. Stack-ul oficial recomandat este acum Remix cu Polaris, iar dacă respecți regulile lor, scrii cod surprinzător de puțin. În postarea asta trec prin ce am învățat din setup și cum am trecut de review-ul lor destul de draconic din prima încercare.

De ce au trecut pe Remix și unde te ajută

Până acum vreun an, aveai un server de Node chinuitor și un frontend de React legat cu sârmă prin App Bridge. Remix a simplificat totul masiv. Când rulezi npm create @shopify/app@latest, primești o structură curată în care tot ce înseamnă autentificare OAuth, rotație de token-uri și session storage (implicit Prisma) e deja configurat.

Cel mai mare plus pe care l-am simțit la proiectul ăsta a fost încărcarea datelor. În loc să fac 3 fetch-uri din frontend prin REST sau GraphQL și să gestionez stări de loading chinuite, fac totul direct pe server în loader. Codul rămâne curat, iar datele ajung deja gata pregătite în React.

Polaris e bun, dar te strânge cu ușa

Polaris este design system-ul lor bazat pe React. Dacă vrei ca app-ul tău să arate nativ în admin-ul Shopify, e impecabil. Are componente gata făcute pentru tabele (IndexTable), formulare, layout-uri de pagină și modale.

Partea proastă? Flexibilitatea e aproape zero. Am încercat să customizez un chart pentru vânzări și am pierdut vreo 6 ore încercând să fac un wrapper peste Recharts ca să nu arate ca un nuc plantat în mijlocul sufrageriei. Polaris te obligă la un anumit ritm vizual. Dacă încerci să fii prea creativ, aplicația ta va arăta ciudat și, mai rău, echipa de review de la Shopify îți va da reject.

Cum am trecut de review din prima încercare (3 zile de așteptare)

Procesul de review e faimos pentru cât de strict e. Băieții chiar testează aplicația, nu e un bot obosit. Am avut colegi care au fost respinși de 4 ori pentru chestii minore. Iată la ce trebuie să fii atent obligatoriu:

Skeleton Loaders peste tot: Dacă apeși pe un tab sau salvezi o opțiune și ecranul rămâne înghețat chiar și 300ms fără un indicator vizual, primești reject. Folosește <SkeletonBodyText> și <SkeletonPage> în Remix când ai stări de useNavigation().state === "submitting".
Error Boundaries explicite: Dacă GraphQL-ul Shopify returnează o eroare (de exemplu, un scope lipsă), app-ul NU are voie să crape cu ecran alb. În Remix trebuie să ai un ErrorBoundary configurat la nivel de rută care să afișeze un <Banner status="critical">.
Responsive pe mobil: Reviewer-ul va deschide Shopify Admin de pe un iPad sau iPhone. Dacă tabelul tău Polaris face scroll orizontal pe ecran mic fără să fie wrap-uit corect, te trimite la plimbare.
Billing API obligatoriu: Dacă app-ul e plătit, trebuie să folosești exclusiv Shopify Billing API. Dacă detectează Stripe sau PayPal integrat de tine în iframe, ai ban direct.

Concluzie

Pachetul Remix + Polaris reduce timpul de development cu cel puțin 30% față de vechiul setup pe Express + React. Însă costul ascuns e disciplina: trebuie să scrii codul exact cum vor ei și să respecți ghidul lor de UX la pixel.

Ați lansat vreo aplicație în Shopify App Store pe stack-ul nou? Cum vi s-a părut procesul de review comparativ cu alte platforme?