The configuration properties for Hydrogen are located in the
hydrogen.config.ts file at the root of your project.
This guide describes Hydrogen's configuration properties and how to change the location of the configuration file.
Example configurationAnchor link to section titled "Example configuration"
The Hydrogen configuration file contains information that's needed at runtime for routing, connecting to the Storefront API, and many other options. The following example shows a basic Hydrogen configuration file:
Configuration propertiesAnchor link to section titled "Configuration properties"
The following groupings of configuration properties can exist in Hydrogen:
routes property is where you can provide server components and API handlers using Vite's
By default, Hydrogen detects the common prefix of every route and removes it from the URLs. In the following example,
./src/routes would be detected as the common prefix:
If your app requires a more advanced configuration, then you can provide additional information about routes manually:
shopify property contains all the information that your app needs to connect to the Storefront API. This configuration is passed automatically to the
ShopifyProvider component in your app.
For advanced use cases, you can provide a function that returns the same properties. For example, this approach is useful when the Storefront API connection varies depending on the domain or a subpath of the URL:
The function is called inside the
ShopifyProvider component in your app. This means that Suspense fallbacks are shown while resolving the configuration if a promise is returned.
session property allows you to configure sessions support in your Hydrogen app. For more information about configuring sessions support in Hydrogen apps, refer to Session management.
Anchor link to section titled "serverAnalyticsConnectors"
Anchor link to section titled "enableStreaming"
By default, all routes in Hydrogen are stream rendered. Stream rendering is automatically disabled when the user agent is a bot.
Content should be immediately available to bots for SEO purposes. However, you might want to manually disable streaming for a specific page. A common use case is disabling streaming for a custom bot that's not recognized by Hydrogen's bot detection algorithm. You can disable streaming for a custom bot with the
enableStreaming configuration property:
Changing the configuration file locationAnchor link to section titled "Changing the configuration file location"
If you don't want the Hydrogen configuration file located at the root of your project, then you can provide the new path to the file in the Hydrogen Vite plugin (
Related componentsAnchor link to section titled "Related components"
- Learn about React Server Components, an opinionated data-fetching and rendering workflow for React apps.
- Get familiar with the file-based routing system that Hydrogen uses.
- Learn about the Hydrogen framework's built-in support for session management.
- Learn about the analytics support built into Hydrogen apps.