Wasserstoff-Demo-Shop

Wasserstoffvorlage: Demo Store

Wasserstoff ist Shopifys Stack für Headless Commerce. Hydrogen ist so konzipiert, dass es mit Remix, dem Full-Stack-Web-Framework von Shopify, harmoniert. Diese Vorlage enthält eine umfassende Einrichtung von Komponenten, Abfragen und Tools für den Einstieg in Wasserstoff. Es wird bei Hydrogen.shop eingesetzt

Schauen Sie sich die Hydrogen-Dokumente an. Machen Sie sich mit Remix vertraut

Was ist enthalten

• Remix
• Wasserstoff
• Sauerstoff
• Shopify-CLI
• ESLint
• Hübscher
• GraphQL-Generator
• TypeScript- und JavaScript-Varianten
• Tailwind CSS (über PostCSS)
• Vollständige Einrichtung von Komponenten und Routen

Erste Schritte

Anforderungen:

• Node.js-Version 18.0.0 oder höher

npm create @shopify/hydrogen@latest -- --template demo-store

Denken Sie daran .env mit der Domain Ihres Shops und dem Storefront-API-Token zu aktualisieren!

Gebäude für die Produktion

npm run build

Lokale Entwicklung

npm run dev

Einrichtung für die Verwendung der Kundenkonto-API (Abschnitt /account )

Richten Sie eine öffentliche Domain mit ngrok ein

1. Richten Sie ein Ngrok-Konto ein und fügen Sie eine permanente Domain hinzu (z. B. https://.app ).
2. Installieren Sie die ngrok-CLI zur Verwendung im Terminal
3. Starten Sie ngrok mit ngrok http --domain=.app 3000

Schließen Sie die öffentliche Domäne in die API-Einstellungen des Kundenkontos ein

1. Gehen Sie zu Ihrem Shopify-Adminbereich => Hydrogen oder Headless -App/-Kanal => Kundenkonto-API => Anwendungseinrichtung
2. Bearbeiten Sie Callback URI(s) so, dass sie https://.app/account/authorize enthalten
3. Bearbeiten Sie Javascript origin(s) dass sie Ihre öffentliche Domäne https://.app einschließen, oder lassen Sie das Feld leer
4. Bearbeiten Sie Logout URI , um Ihre öffentliche Domäne https://.app einzuschließen, oder lassen Sie ihn leer