import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { Outlet, useLoaderData } from "@remix-run/react";
import { AppProvider } from "@shopify/shopify-app-remix/react";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
const { admin, session } = await authenticate.admin(request);
return json({ apiKey: process.env.SHOPIFY_API_KEY || "", shop: session.shop });
};
export default function App() {
const { apiKey, shop } = useLoaderData<typeof loader>();
return (
<AppProvider isEmbeddedApp apiKey={apiKey} forceRedirect shop={shop}>
<Outlet />
</AppProvider>
);
}Am publicat recent a treia aplicație în Shopify App Store și m-am lovit din nou de setup-ul lor "standard": Remix și Polaris. Dacă vrei să treci de review-ul lor draconic din prima încercare, trebuie să înțelegi cum se îmbină astea două în producție. Nu e chiar atât de simplu pe cât promite documentația lor oficială.
De ce Remix + Polaris e calea sigură (și care-i costul)
Shopify te împinge masiv spre Remix. Template-ul în sine e chiar bun, îți configurează Prisma, session storage-ul și rutele de OAuth direct din cutie. La un proiect recent, un app de loialitate pentru un magazin cu 15.000 de comenzi pe lună, am economisit cam 4 zile de boilerplate doar folosind CLI-ul lor.
Dar Polaris (UI kit-ul lor) vine cu un trade-off major. Merge excelent pentru că aplicația ta va arăta exact ca admin-ul nativ Shopify, deci rata de conversie și încrederea userului cresc. Partea proastă? E incredibil de rigid. Dacă clientul tău vrea un layout mai atipic sau branding personalizat, te vei bate cu CSS-ul lor injectat în iFrame-ul de App Bridge până îți pierzi mințile. E perfect pentru tabele, formulare și setări, dar e complet inutil dacă vrei să construiești un dashboard vizual complex.
Setup-ul curat în Remix ca să eviți problemele de hidratare
Cea mai mare problemă la început este că Remix randează pe server (SSR), în timp ce Polaris și App Bridge au nevoie de contextul de browser (iFrame-ul Shopify). Dacă nu ești atent, te trezești cu erori de hidratare React sau, mai rău, cu redirect-uri infinite la autentificare.
Trebuie să te asiguri că orice request de pagină trece prin middleware-ul de autentificare din loader, altfel App Bridge nu va ști să monteze corect iFrame-ul în admin-ul clientului.
Cum să treci de review-ul Shopify din prima
Review-ul lor manual durează de obicei între 3 și 7 zile lucrătoare și oamenii sunt extrem de tipicari. Am picat primul meu review acum doi ani din cauza a două detalii pe care le-am crezut minore:
- Webhook-ul de ștergere (App Uninstalled): Când un comerciant îți șterge aplicația, Shopify îți trimite un webhook. Trebuie neapărat să procesezi acest webhook și să ștergi (sau să anonimizezi) datele lui în maximum 48 de ore. Dacă testerul vede că baza ta de date încă păstrează token-urile după uninstall, îți dă reject instant.
- Consistența vizuală: Dacă ai pus un buton nativ HTML (
<button>) în loc de componenta<Button>din Polaris, testerul va face screenshot, îți va încercui butonul cu roșu și îți va cere să refaci interfața. Ei vor ca experiența userului să fie perfect integrată în admin-ul lor.
Remix + Polaris câștigă detașat când vrei un app integrat rapid și fără bătăi de cap cu OAuth-ul, dar te limitează crunt pe partea de design.
Tu ce folosești pentru aplicațiile de Shopify? Rămâi pe stack-ul lor oficial sau preferi un SPA clasic pe React/Node găzduit separat?