Juan P. Prieto juanpprieto

Deploying Hydrogen on Alternative Hosting Runtimes

If you want to use Hydrogen but prefer not to use Oxygen, you can deploy Hydrogen to various hosting platforms that support Remix. This guide walks you through adapting your Hydrogen app for an alternative hosting runtime.

Note: While Hydrogen and Remix are designed to run on any platform, some features of Hydrogen rely on Oxygen's Workers platform and support for certain Web APIs like Cache. This is an advanced guide that covers the areas to consider when hosting Hydrogen apps on your own architecture, and assumes you are comfortable with using Remix's adapters or creating your own. The steps in this guide are not supported by Shopify.

Adapting Your Hydrogen App for an Alternative Hosting Runtime

To adapt your Hydrogen app for an alternative hosting runtime, follow these steps:

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

	import { CacheLong } from '@shopify/hydrogen';

	interface Config {
	cacheControl: string;
	removeNoIndex: boolean;
	updateCanonical: boolean;
	ignoreRedirects: boolean;
	}

	const config: Config = {

	{% comment %}

	UPDATE: Now you can use this theme to more easily manage your redirects:
	https://github.com/benjaminsehl/shopify-headless-theme

	{% endcomment %}

	{% assign new_website = 'https://headless-website.com/' %}
	<!doctype html>
	<html>

	{
	"title": "Change caps_lock to Esc and Control",
	"rules": [
	{
	"description": "Post Esc if Caps is tapped, Control if held.",
	"manipulators": [
	{
	"type": "basic",
	"from": {
	"key_code": "caps_lock",

	// original code: https://github.com/AnthumChris/fetch-progress-indicators
	const element = document.getElementById('progress');

	fetch('url')
	.then(response => {

	if (!response.ok) {
	throw Error(response.status+' '+response.statusText)
	}

	import {useEffect} from 'react'
	import {RecoilRoot, useRecoilState, atom} from 'recoil'

	// User data

	const user1 = {username: 'joe', bio: "You will never see me, unless of course this example is totally broken."}
	const user2 = {username: 'bob', bio: "I am the one true user."}
	const user3 = {username: 'fred', bio: "Just kidding, make way for the new guy."}

	// Recoil atom to store user. The default user is user1, but it will be

	// Custom promise-based compose
	const composeWithPromise = (...args) =>
	R.composeWith((f, val) => {
	if (val && val.then) {
	return val.then(f);
	}
	if (Array.isArray(val) && val.length && val[0] && val[0].then) {
	return Promise.all(val).then(f);
	}
	return f(val);

	import React, { useState, useEffect } from 'react'
	import { useDebounce } from './use-debounce'

	const MySearchComponent = props => {
	const [search, setSearch, {
	signal,
	debouncing
	}] = useDebounce('')

	const [results, setResults] = useState([])

	function (user, context, callback) {
	if (context.clientMetadata && context.clientMetadata.shopify_domain && context.clientMetadata.shopify_multipass_secret)
	{
	const RULE_NAME = 'shopify-multipasstoken';
	const CLIENTNAME = context.clientName;
	console.log(`${RULE_NAME} started by ${CLIENTNAME}`);

	const now = (new Date()).toISOString();
	let shopifyToken = {
	email: user.email,