Adding Pack to your existing Shopify Hydrogen project
Integrating Pack into your existing Hydrogen project is simple and takes just a few minutes.
Pack simplifies building and managing your Hydrogen storefront with easy-to-use developer APIs, CRO tools, and a visual page editor. This makes it easier and faster to customize and enhance your storefront needs.
Prerequisites
- A Shopify Hydrogen v2 project
- A Pack account
- Node.js version 16.14.0 or higher
npm(or your package manager of choice, such asyarnorpnpm)
Install the Pack dependencies
- Install the latest version of
@pack/hydrogen
npm
npm install @pack/hydrogen@latest
- Install the latest version of
@pack/react
npm
npm install @pack/react@latest
Update remix.env.d.ts (optional if using Typescript)
If you are using typescript in your Hydrogen project, you will need to add some additional Pack types to your environment definition types.
remix.env.d.ts
interface Env {
SESSION_SECRET: string;
PUBLIC_STOREFRONT_API_TOKEN: string;
PRIVATE_STOREFRONT_API_TOKEN: string;
PUBLIC_STORE_DOMAIN: string;
PUBLIC_STOREFRONT_API_VERSION: string;
PUBLIC_STOREFRONT_ID: string;
PACK_PUBLIC_TOKEN: string;
PACK_SECRET_TOKEN: string;
PACK_CONTENT_ENVIRONMENT?: string;
PACK_API_URL?: string;
PRIVATE_SHOPIFY_CHECKOUT_DOMAIN?: string;
PRIVATE_SHOPIFY_STORE_MULTIPASS_SECRET?: string;
}
remix.env.d.ts
import type {Pack} from '@pack/hydrogen';
...
declare module '@shopify/remix-oxygen' {
export interface AppLoadContext {
session: HydrogenSession;
storefront: Storefront;
env: Env;
pack: Pack;
}
}
Modify your server.ts
- Import
createPackClientandPreviewSessionfrom@pack/hydrogen.
server.ts
import {createPackClient, PreviewSession} from '@pack/hydrogen';
- Initialize Pack's preview session where you initialize the
AppSession. This will create a session storage that Pack will use to manage if you are in preview mode or not.
server.ts
const [cache, session, previewSession] = await Promise.all([
caches.open('hydrogen'),
AppSession.init(request, [env.SESSION_SECRET]),
PreviewSession.init(request, [env.SESSION_SECRET]),
]);
- Creating the
packclient
server.ts
const pack = createPackClient({
cache,
waitUntil,
token: env.PACK_SECRET_TOKEN,
preview: {session: previewSession},
contentEnvironment: env.PACK_CONTENT_ENVIRONMENT,
});
- Adding the Pack client to app load context. By adding
packto your loader context, you can use this Pack client to make requests to fetch data from Pack's CMS API
server.ts
const handleRequest = createRequestHandler({
build: remixBuild,
mode: process.env.NODE_ENV,
getLoadContext: () => ({
session,
storefront,
env,
cart,
pack
}),
});
Adding preview route
By adding this api.edit.ts route, this will allow the customizer and preview links to authenticate and set your storefront in preview mode to pull in draft content.
- Create a
api.edit.tsfile in./app/routes - Add in the action and loader handlers
/app/routes/api.edit.ts
import {previewModeAction, previewModeLoader} from '@pack/hydrogen';
import type {ActionFunction, LoaderFunction} from '@shopify/remix-oxygen';
export const action: ActionFunction = previewModeAction;
export const loader: LoaderFunction = previewModeLoader;
Add Pack's PreviewProvider to your root.tsx
- Request Pack data in root loader
/app/root.ts
export async function loader({context, request}: LoaderFunctionArgs) {
const {storefront, session, pack} = context;
const isPreviewModeEnabled = pack.isPreviewModeEnabled();
const siteSettings = await context.pack.query(SITE_SETTINGS_QUERY);
return defer({
customizerMeta: pack.preview?.session.get('customizerMeta'),
isPreviewModeEnabled,
siteSettings,
...
})
})
const SITE_SETTINGS_QUERY = `#graphql
query SiteSettings($version: Version) {
siteSettings(version: $version) {
id
status
settings
publishedAt
createdAt
updatedAt
favicon
seo {
title
description
keywords
}
}
}
`
- Wrap your app in the
PreviewProvider. This will provide context to get setting and other data from Pack.
/app/root.ts
import {PreviewProvider} from '@pack/react';
import { useLoaderData } from '@remix-run/react';
...
export default function App() {
const {customizerMeta, isPreviewModeEnabled, siteSettings} = useLoaderData();
return (
<PreviewProvider
customizerMeta={customizerMeta}
isPreviewModeEnabled={isPreviewModeEnabled}
siteSettings={siteSettings}
>
<html lang="en">
...
</html>
</PreviewProvider>
);
}
You're done!
After this you are set to start querying data in your route loaders and rendering sections. You should be able to use the customizer and edit and add new sections.
You can take a look at our Blueprint Theme and check out how we structure and implement our Hydrogen project to manage and render sections.
Feel free to also take a look at some of our additional resources and guides below to learn more about storefront development and customization.