remix-run/remix-store

آخر نشاط مصدر مسجل: ١٣ أكتوبر ٢٠٢٦ في ١٤:٥٨

آخر تحديث لفهرس SkillsMP: ١٢ نوفمبر ٢٠٢٦ في ١٢:٥٢

skills مجمعة: ٢١

نجوم GitHub: ٢١٨
تفرعات GitHub: ٢٢

التثبيت بمساعدة مساعد ذكي

انسخ هذا الطلب إلى المساعد الذكي الذي تستخدمه.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/remix-run/remix-store.

ملف README للمستودع

مصدر ملف README للمستودع: README.md

قراءة الملف الأصلي

عرض ملف README كاملًا

# Remix Store The storefront behind [shop.remix.run](https://shop.remix.run). The storefront runs on Remix 3 and framework-neutral Hydrogen across native Node/Fly and Oxygen runtimes. ## Requirements - Node.js 24 - pnpm 10.33.4 ## Local development ```sh pnpm install cp .env.example .env # Populate PRIVATE_STOREFRONT_API_TOKEN from the configured Hydrogen environment. pnpm dev ``` The private Storefront token remains server-only and enables request-aware cart, checkout, and Shopify redirect handling. Oxygen supplies `oxygen-buyer-ip`; Fly supplies `fly-client-ip`, or behind Fastly, `x-cdn-client-ip` authenticated by `CDN_ORIGIN_SECRET` (see [`FLY_DEPLOYMENT.md`](./FLY_DEPLOYMENT.md#fastly-cdn)). Other Node runtimes use the client address resolved by Remix's HTTP adapter from the socket or, when explicitly configured behind a trusted proxy with `TRUST_PROXY=true`, overwritten proxy headers. Never forward platform buyer-IP headers outside their runtime. `PUBLIC_CHECKOUT_DOMAIN` is not a runtime input; checkout uses Shopify's authoritative `cart.checkoutUrl`. The app does not use durable application sessions or require `SESSION_SECRET`. `pnpm dev` runs the framework-native Node server with `remix/assets`. For UI-heavy work, use `pnpm hmr` to preserve browser state while hot-updating client and server modules. Use `pnpm dev:oxygen` when testing the same application under MiniOxygen's Worker runtime. The example environment points at the live production store. Purchases create real orders and charge real money. ## Validation ```sh pnpm lint pnpm typecheck pnpm test pnpm test:e2e pnpm test:e2e:oxygen:dev pnpm test:e2e:oxygen pnpm build:oxygen pnpm preview:oxygen ``` The end-to-end suites use a deterministic local Storefront fixture: `test:e2e` runs native Node, `test:e2e:oxygen:dev` runs MiniOxygen development, and `test:e2e:oxygen` builds and runs the production Worker. Pull requests exercise all three runtimes. Set `BASE_URL` to target an existing deployment instead. The Oxygen build produces a self-contained Worker at `dist/server/index.js` and browser assets in `dist/client/`. MiniOxygen preview and Shopify CLI discover these standard output directories automatically. The Node server compiles browser modules through `remix/assets` for Fly. ## Deployments | URL | What it is | | ------------------------------------------------------------------------ | ------------------------------------------------------- | | [remix-store.freetls.fastly.net](https://remix-store.freetls.fastly.net) | **Use this one.** Fly app behind the Fastly CDN | | [remix-store.fly.dev](https://remix-store.fly.dev) | Fly origin, bypasses the CDN (debugging, health checks) | Fastly caches fingerprinted `/assets/*` files and short-lived root `public/` files. Browsing handlers opt successful frame responses (`X-Remix-Frame: true`) into `private, max-age=5` so the browser can reuse prefetched pages for 5 seconds while shared CDN caches bypass it. Full documents embed the cart, so the renderer always sends them `private, no-store`, as it does for cart pages, errors, and mutations. HTML varies by cookie and Remix frame headers. Shared policies live in `app/lib/cache-control.ts`. Responses served through Fastly include `X-Cache` and `X-Served-By` headers. Oxygen deployments use `.github/workflows/oxygen-deployment.yml`; `pnpm deploy:oxygen` deploys a preview locally. Both pass `--build-command 'pnpm build:oxygen'` so Shopify CLI runs this app's Vite build. The build writes the pinned compatibility date to `dist/server/oxygen.json` alongside the Worker. Fly setup, secrets, local image verification, and continuous deployment are documented in [`FLY_DEPLOYMENT.md`](./FLY_DEPLOYMENT.md). ## Architecture - `app/routes.ts` defines the typed route contract. - `app/router.ts` owns the shared Fetch app, routes, middleware, and runtime boundary. - `app/assets.ts` defines the shared metadata contract, document asset sources, and document asset factory. - `app/assets.node.ts` constructs the native Remix asset server; `app/assets.oxygen.ts` constructs Pitlane's Worker-safe manifest resolver. - `app/node.ts` composes Node static files, Remix Assets, rendering, and routing. - `app/middleware/storefront.ts` creates a request-scoped Hydrogen Storefront client. - `app/middleware/render.tsx` contains runtime-neutral streaming SSR. - `app/middleware/csp.ts` enforces a nonce-based Content Security Policy on HTML responses. Remix's renderer stamps the nonce on generated tags; `app/ui/document.tsx` stamps authored and Shopify scripts. Add new third-party origins to its directives. - `app/runtime.ts` binds environment, cache, and `waitUntil` values to each request. - `server.node.ts` owns the Node/Fly-compatible HTTP lifecycle. - `app/entry.oxygen.ts` composes and serves the Oxygen Worker runtime. - `app/actions/public/entry.tsx` hydrates browser components on both targets. - `vite/remix-oxygen.ts` composes [Pitlane's Remix Vite plugin](https://pitlane.tools/guides/vite-plugin) with MiniOxygen, then bundles Pitlane's asset manifest into the single `index.js` Worker that Oxygen deploys. Deploy builds serve assets from the deployment's CDN prefix (`HYDROGEN_ASSET_BASE_URL`), so they stay reachable after later deployments. Pitlane's resolver implements the metadata interface consumed by Remix's `render({ assets })` middleware. Remix owns streaming, frames, and hydration; Pitlane rewrites `clientEntry(import.meta.url, ...)` to portable `file:app/…#Export` identities and resolves them to built browser modules. The installed Remix asset server compiles from the filesystem in Node, so Oxygen needs this build-time bridge. `browserBoundary` in `app/assets.ts` defines which sources are public: the Node asset server refuses to serve anything outside it, and the Oxygen build and dev server fail when a browser module imports something outside it. ## License MIT License — see [`LICENSE.md`](./LICENSE.md).

جارٍ تحميل ملف README للمستودع…

Skills في هذا المستودع

التصنيف قيد الانتظار

skill

المهنة

الوصف

آخر تحديث

remix-store

غير مصنف

Builds, reviews, and refactors this Remix Store v3 app using Remix 3, framework-agnostic Hydrogen, Node, Oxygen, Vite, and remix/* imports. Use for app structure, routing, middleware, data, UI, browser interaction, tests, and deployment; not for implementing…

لغة النص الأصلي: الإنجليزية

2026-10-13

hydrogen-analytics

غير مصنف

Guide for adding or reviewing Hydrogen storefront analytics. Use when working with ShopifyScripts analytics, AnalyticsEvent, consent mode, page/product/ collection/search/cart view events, cart update tracking, custom analytics destinations, or framework…

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-cart-drawer

غير مصنف

Guide for building an accessible cart drawer using @shopify/hydrogen. Use when creating or reviewing a cart drawer, mini cart, or slide-out cart, including native dialog element (showModal), closedby light dismiss, body scroll lock, exit animations, and…

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-cart-metafields

غير مصنف

Behavioral guide for reading and writing cart metafields with @shopify/hydrogen. Use when adding, modifying, or reviewing cart metafield reads or writes, an app-owned cart metafield route, cart-to-order metafield copying, or custom cart data such as delivery…

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-cart-ui

غير مصنف

Behavioral guide for building cart UI with @shopify/hydrogen: line items, quantity and remove controls, optimistic updates, discount, note, and cart attribute inputs, and the full-page /cart fallback. Use when writing, modifying, or reviewing cart line-item…

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-collection-browser

غير مصنف

Guide for building collection and search browsing UI with @shopify/hydrogen. Use when creating, modifying, or reviewing collection routes, search results, product grids, filters, sort controls, active filter chips, or URL-synced browse state in storefront…

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-customer-account

غير مصنف

Customer Account API setup for Hydrogen storefronts. Use when wiring customer sessions, login/logout/OAuth route handlers, account profile, order history, account-gated UI, cart buyer identity sync, or Customer Account GraphQL queries.

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-image

غير مصنف

Helper-only sizing of Shopify CDN image URLs. Use when rendering Storefront API images in product/collection cards, PDP galleries, PLP heroes, cart thumbnails, or other img element surfaces.

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-local-https

غير مصنف

Configure trusted local HTTPS for Customer Account API development with Vite-based frameworks or Next.js.

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-markets

غير مصنف

Guide for implementing Shopify Markets with Hydrogen. Use when adding market routing, country/language localization, Shopify Markets, subdomains, per-market domains, path-prefixed markets, Next.js App Router market routing, or Storefront API @inContext wiring.

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-money

غير مصنف

Guide for formatting Shopify money values in Hydrogen storefronts. Use when rendering product prices, compare-at prices, cart totals, collection price ranges, Shop Pay prices, or any MoneyV2 amount/currencyCode values.

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-oxygen

غير مصنف

Audit and adapt an existing Hydrogen storefront for Shopify Oxygen and local MiniOxygen. Use when asked to make a server-capable Hydrogen project Oxygen-compatible, add or repair its Worker server entrypoint, configure MiniOxygen, remove Node runtime…

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-predictive-search

غير مصنف

Guide for building predictive search with @shopify/hydrogen. Use when adding, modifying, or reviewing autocomplete/search-as-you-type UI, predictive search route handlers, tracking URLs, custom predictive search fragments, or framework predictive search…

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-request-handlers

غير مصنف

Guide for wiring Hydrogen request handlers in server frameworks. Use when adding, modifying, or reviewing handleShopifyRoutes, handleShopifyRedirects, SFAPI proxy routes, cart, predictive search, and Customer Account server handlers, UCP business profiles,…

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-routing

غير مصنف

Guide for Hydrogen route templates and Shopify storefront URL routing. Use when adding, modifying, or reviewing createShopifyRouteTemplates, routeTemplates, custom Shopify resource or utility-page paths, handleShopifyRoutes, standard route redirects,…

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-setup

غير مصنف

End-to-end Hydrogen storefront setup orchestrator. Use whenever scaffolding a Hydrogen storefront from scratch into an existing application.

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-shop-pay

غير مصنف

Guide for adding or reviewing Shop Pay buttons in Hydrogen storefronts. Use when working with ShopPayButton, renderShopPayButton, createShopPayButton, product buy buttons, cart checkout acceleration, variant IDs, quantities, or source attribution attributes.

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-smoke-test

غير مصنف

Smoke-test checklist for Hydrogen storefronts built by agents. Use after creating or modifying a Hydrogen storefront, setup flow, cart, product page, collection/search browsing, analytics, request handlers, Shopify redirects, Shop Pay, or framework middleware…

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-storefront-client

غير مصنف

Guide for @shopify/hydrogen — the type-safe Storefront API GraphQL client. Use when writing, modifying, or reviewing code that creates a storefront client, writes GraphQL queries with gql(), handles SFAPI errors, or wires up storefront data fetching in any…

لغة النص الأصلي: الإنجليزية

2026-10-09

hydrogen-variant-form

غير مصنف

Behavioral guide for building product variant selection UI with @shopify/hydrogen. Use when writing, modifying, or reviewing product option selectors, variant pickers, or add-to-cart forms. Framework agnostic.

لغة النص الأصلي: الإنجليزية

2026-10-09

testing-practices

غير مصنف

Write, review, or refactor tests that maximize confidence per maintenance cost. Use for test strategy, unit/integration/browser/E2E tests, fixtures, mocks, flaky tests, skipped tests, brittle assertions, or deciding what behavior deserves coverage.

لغة النص الأصلي: الإنجليزية

2026-08-11

عرض ٢١ من أصل ٢١ skills مجمعة.