import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
// Helper-ul ăsta verifică automat sesiunea și face redirect dacă e nevoie
const { admin, session } = await authenticate.admin(request);
// Cerem datele magazinului direct prin GraphQL API-ul injectat în admin
const response = await admin.graphql(`
#graphql
query getShopInfo {
shop {
name
primaryDomain {
url
}
}
}
`);
const responseJson = await response.json();
return json({
shop: responseJson.data.shop,
shopDomain: session.shop
});
};Am lansat recent a treia aplicație în Shopify App Store folosind template-ul lor oficial bazat pe Remix și Polaris. Dacă vii de la vechiul setup cu Express și React chior, trecerea asta o să-ți pară o gură de aer proaspăt, dar vine la pachet cu câteva bube mari. Vreau să vă zic exact ce funcționează, unde se împute treaba la review-ul Shopify și cum să nu pierzi două săptămâni degeaba.
De ce Remix + Polaris e noul standard (și ce e nasol la el)
Până acum un an-doi, să faci o aplicație embedded de Shopify însemna să-ți scrii singur logica de OAuth, să configurezi manual App Bridge și să speri că React-ul tău nu face figuri în iframe-ul din admin. Template-ul actual cu Remix rezolvă asta din start. Totul vine preconfigurat prin @shopify/shopify-app-remix.
La un proiect recent de bundle-uri, cu vreo 1.200 de useri activi, am redus timpul de bootstrap cu 40% față de vechiul boilerplate cu Express. Primiști loaders și actions gata scrise pentru autentificare, iar Polaris (sistemul lor de design) se integrează perfect.
Dar există un trade-off destul de mare. Remix te forțează să folosești arhitectura lui de routing și server-side rendering. Dacă ulterior vrei să muți aplicația pe altă platformă (de exemplu, BigCommerce sau WooCommerce), rescrii aproape tot codul de frontend și backend. Ești legat la gât de ecosistemul Shopify.
Capcana din setup: Session Storage-ul implicit
Când rulezi npm run create-app, Shopify îți trântește în proiect un adaptor de SQLite pentru sesiuni. E perfect pentru development local, dar e o bombă cu ceas pentru producție.
Am pățit la prima aplicație să o urcăm în producție pe SQLite pentru că ne grăbeam. La doar 50 de instalări simultane venite dintr-o campanie de marketing, baza de date s-a blocat complet (database is locked). Remix încerca să scrie sesiunile de OAuth în același timp și totul a crăpat. Sfatul meu: treci pe Postgres sau Redis din prima zi. Schimbarea se face în shopify.server.ts în doar 5 minute, dar te scapă de nopți nedormite.
Cum treci de review-ul Shopify din prima încercare
Reviewerii de la Shopify sunt incredibil de tipicari. Nu glumesc, testează aplicația pe ecrane de tablete ciudate și verifică fiecare interacțiune. Iată trei chestii care îți vor aduce reject instant dacă le ignori:
- State-urile de încărcare (Loading States): Dacă un user apasă pe un buton de salvare și durează mai mult de 500ms fără ca butonul să devină
loading(folosind proprietatea din Polaris), primești reject. FoloseșteuseNavigationdin Remix pentru a controla starea butoanelor la submit-uri. - Ieșirea din iframe (Breakout): Când instalezi aplicația, utilizatorul trebuie redirecționat pentru OAuth. Dacă încerci să faci asta cu un redirect clasic de Express/React, browser-ul va bloca cererea din cauza politicilor de securitate din iframe. Trebuie să folosești helper-ul
shopify.authenticate.admin(request)care se ocupă de "breakout-ul" corect din admin. - Butonul de dezinstalare: Aplicația ta trebuie să curețe datele clienților (GDPR webhooks) în maxim 48 de ore de la dezinstalare. Dacă nu ai rutele de webhooks configurate corect în Remix, Shopify îți va respinge aplicația direct.
În final, Remix + Polaris merită efortul dacă vrei să construiești rapid și să vinzi în ecosistemul lor. Îți oferă credibilitate vizuală instantă, iar clienții au senzația că folosesc tot Shopify, nu o aplicație terță ciudată.
Voi ce folosiți pentru aplicațiile de Shopify? Ați rămas pe Node + React clasic sau ați făcut trecerea la Remix?