Migrating Hydrogen Project to Weaverse

This guide focuses on integrating the Weaverse SDKs and Theme Customizer into your existing Hydrogen project, providing detailed steps to enhance your theme with Weaverse’s powerful features.

Installing the Weaverse SDK

Begin by installing the Weaverse SDKs:

npm install @weaverse/hydrogen@latest

Adding the Weaverse Directory

Create a weaverse directory within your Hydrogen app folder. This will house essential files to establish a Weaverse Client Provider, register Section Components, and define theme schema settings.

WEAVERSE_EMBEDED_CODE

Simply copy the following files into your app/weaverse directory:

• components.ts

• create-weaverse.server.ts

• index.tsx

• schema.server.ts

• style.tsx

Injecting Weaverse Client into App's Load Context

Modify your server.ts file to inject the weaverse client into the getLoadContext function as illustrated below:

WEAVERSE_EMBEDED_CODE

Wrapping the app with withWeaverse HoC

Ensure your main application component is wrapped with the withWeaverse Higher-Order Component (HoC). Learn more in the withWeaverse article.

WEAVERSE_EMBEDED_CODE

Global Theme Settings

Manage theme settings effortlessly by loading them server-side and accessing client-side via the useThemeSettings hook. Discover more about this process in the Global Theme Settings article.

Rendering Weaverse Pages

Configure your routes to load Weaverse page data server-side and utilize the <WeaverseContent /> component to render pages, prioritizing Weaverse configurations and customizations.

WEAVERSE_EMBEDED_CODE

Rendering Weaverse page:

WEAVERSE_EMBEDED_CODE

💡 Key Takeaway: While it's possible to render the <WeaverseContent /> component alongside other components, it's recommended to position the WeaverseContent at the topmost level of the route hierarchy. This ensures that Weaverse's configurations and customizations are prioritized and rendered accurately throughout your project.

Creating the Section/Component

Structure your components and sections within the sections directory and register them in the weaverse/components.ts file, maintaining organization and clarity in your project structure.

WEAVERSE_EMBEDED_CODE

Dive deeper into this topic in the Weaverse Component article.

​

​
​

​