remix-run/remix-store

remix-run-Profil

Letzte erfasste Quellaktivität: 13. Oktober 2026 um 14:58

SkillsMP-Katalog aktualisiert: 26. Oktober 2026 um 11:37

gesammelte Skills: 21

GitHub-Stars: 217
GitHub-Forks: 22

README des Repositorys

README-Quelldatei: README.md

README-Quelldatei lesen

Vollständige README anzeigen

# 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/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 des Repositorys wird geladen…

Skills in diesem Repository

Klassifizierung ausstehend

Skill

Beruf

Beschreibung

Aktualisiert

remix-store

nicht klassifiziert

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…

Quellsprache: Englisch

2026-10-13

hydrogen-analytics

nicht klassifiziert

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…

Quellsprache: Englisch

2026-10-09

hydrogen-cart-drawer

nicht klassifiziert

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…

Quellsprache: Englisch

2026-10-09

hydrogen-cart-metafields

nicht klassifiziert

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…

Quellsprache: Englisch

2026-10-09

hydrogen-cart-ui

nicht klassifiziert

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…

Quellsprache: Englisch

2026-10-09

hydrogen-collection-browser

nicht klassifiziert

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…

Quellsprache: Englisch

2026-10-09

hydrogen-customer-account

nicht klassifiziert

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.

Quellsprache: Englisch

2026-10-09

hydrogen-image

nicht klassifiziert

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.

Quellsprache: Englisch

2026-10-09

hydrogen-local-https

nicht klassifiziert

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

Quellsprache: Englisch

2026-10-09

hydrogen-markets

nicht klassifiziert

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.

Quellsprache: Englisch

2026-10-09

hydrogen-money

nicht klassifiziert

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.

Quellsprache: Englisch

2026-10-09

hydrogen-oxygen

nicht klassifiziert

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…

Quellsprache: Englisch

2026-10-09

hydrogen-predictive-search

nicht klassifiziert

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…

Quellsprache: Englisch

2026-10-09

hydrogen-request-handlers

nicht klassifiziert

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,…

Quellsprache: Englisch

2026-10-09

hydrogen-routing

nicht klassifiziert

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,…

Quellsprache: Englisch

2026-10-09

hydrogen-setup

nicht klassifiziert

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

Quellsprache: Englisch

2026-10-09

hydrogen-shop-pay

nicht klassifiziert

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.

Quellsprache: Englisch

2026-10-09

hydrogen-smoke-test

nicht klassifiziert

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…

Quellsprache: Englisch

2026-10-09

hydrogen-storefront-client

nicht klassifiziert

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…

Quellsprache: Englisch

2026-10-09

hydrogen-variant-form

nicht klassifiziert

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.

Quellsprache: Englisch

2026-10-09

testing-practices

nicht klassifiziert

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.

Quellsprache: Englisch

2026-08-11

Es werden 21 von 21 gesammelten Skills angezeigt.

Mit einem KI-Assistenten installieren

Diesen Prompt kopieren und in den verwendeten KI-Assistenten einfügen.

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