2024.1
This version of the demo store template is no longer available. If you are just starting out please use the 2024.7 example.
This example requires "@rechargeapps/storefront-client": "1.17.0" or greater.
This example is for "@shopify/hydrogen": "~2024.1.x" and uses the Customer Account API for authenticating your customers.
- NPM
- Yarn
- PNPM
npm create @shopify/hydrogen@latest -- --template demo-store
yarn create @shopify/hydrogen@latest -- --template demo-store
pnpm create @shopify/hydrogen@latest -- --template demo-store
The rest of the documentation assumes your Hydrogen app is already setup and connected to your store. For more information on setting up your developer environment and doing the initial setup with Hydrogen please see their Hydrogen docs and Getting started.
📄️ Setup
There are a few configuration things to setup when using the Recharge JavaScript SDK with Hydrogen. This page with guide you through them.
📄️ Initialization
RechargeSession
📄️ Authentication & Session
To authenticate customers with the Recharge JavaScript SDK we will create a utility that validates the customer's session and logs into Recharge as needed and stores the Recharge Session via the rechargeSession.server module we previously setup.
📄️ Data Fetching
When fetching data via the Recharge JavaScript SDK in Hydrogen we recommend always fetching data within a loader/action.
📄️ Oxygen/Cloudflare Deployments
As mentioned in Initialization, if deploying your Hydrogen app to Oxygen (which is a Cloudflare Worker environment) you will need to update your remix.config.js file with some additional settings. Add the following options to your configuration file: