import { json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }) => {
// Această linie validează automat sesiunea și token-ul HMAC
const { admin, session } = await authenticate.admin(request);
// Interogăm API-ul GraphQL Shopify direct prin clientul preconfigurat
const response = await admin.graphql(
`#graphql
query getShopInfo {
shop {
name
primaryDomain {
url
}
}
}`
);
const responseJson = await response.json();
return json({
shop: responseJson.data.shop,
shopId: session.shop
});
};Am trecut recent prin calvarul lansării unei aplicații publice în Shopify App Store pentru un client cu peste 5.000 de comercianți activi. Am decis să folosim stack-ul recomandat oficial de ei: Remix pentru backend și routing, plus Polaris pentru interfață. Am reușit să o publicăm după trei încercări și vreau să îți spun exact unde se rupe filmul și ce trebuie să configurezi ca să nu pierzi două săptămâni blocate în procesul de QA.
Dacă vrei să vinzi aplicații în ecosistemul lor, setup-ul ăsta este calea cea mai rapidă, dar are niște chichițe ascunse care te pot scoate din minți dacă nu ești atent la detalii.
De ce Remix? Setup-ul inițial ne-a salvat 30% din timpul de dezvoltare
Înainte, când scriam aplicații de Shopify cu Express și un SPA în React, gestionarea sesiunilor și schimbul de token-uri OAuth era o corvoadă plină de bug-uri de securitate. Cu template-ul oficial de Remix, treaba asta e rezolvată direct din cutie.
Loader-ele din Remix se ocupă de tot ce înseamnă autentificare pe server prin intermediul utilitarelor din @shopify/shopify-app-remix. Primești direct contextul de API în loader, fără să mai scrii manual middleware-uri pentru verificarea semnăturilor HMAC sau a token-urilor de sesiune.
Trade-off-ul Polaris: Arată nativ, dar ești complet blocat
Polaris este librăria lor de componente React și vine cu un trade-off major.
- Partea bună: Aplicația ta va arăta exact ca admin-ul nativ Shopify. Acest lucru este aproape obligatoriu pentru a trece de review-ul vizual și oferă utilizatorilor o încredere sporită, scăzând rata de dezinstalare imediat după instalare.
- Partea proastă: Dacă ai nevoie de un element grafic customizat care nu se încadrează în specificațiile lor stricte de design, ai de furcă. Am încercat să integrăm un dashboard cu grafice complexe folosind Tailwind CSS pe lângă Polaris și ne-am lovit de conflicte masive de stiluri globale. Sfatul meu este să mergi 100% pe componente native Polaris la prima versiune, chiar dacă pare rigid.
Cum am picat review-ul Shopify de două ori
Echipa de QA de la Shopify este extrem de tipicară. Testează pe tablete vechi, simulează conexiuni 3G și instalează/dezinstalează aplicația obsesiv. Iată cele două motive principale pentru care ne-au respins inițial:
- Redirecționarea pe Mobile (App Bridge): Când utilizatorul instalează aplicația de pe un dispozitiv mobil, Remix face redirecționările prin server. Dacă nu ai configurat corect header-ele de securitate CSP (Content Security Policy), browser-ul securizat din interiorul aplicației Shopify de mobil va bloca iFrame-ul, rezultând un ecran alb. Am rezolvat-o asigurându-ne că returnăm corect header-ele specifice Shopify din loader-ul de root.
- Webhook-ul de dezinstalare (
APP_UNINSTALLED): Mulți devi uită să trateze asta asincron. Când un magazin șterge aplicația, Shopify îți trimite un webhook. Dacă serverul tău nu răspunde cu un status code200 OKîn mai puțin de 5 secunde, QA-ul lor consideră că aplicația e defectă. Soluția a fost să mutăm logica de curățare a bazei de date pe o coadă de execuție în fundal (folosind BullMQ) și să răspundem instant către Shopify.
Concluzie
Remix + Polaris este în prezent cea mai stabilă combinație pentru Shopify, dar te obligă să joci strict după regulile lor. Câștigi viteză pe partea de OAuth și integrare, dar pierzi flexibilitatea pe partea de design.
Voi ce folosiți pentru aplicațiile de Shopify? Ați rămas pe Node clasic cu React separat sau ați trecut la framework-urile moderne?