This guide shows you how to deploy a Shopify Hydrogen application on Layer0.

Deploying requires an account on Layer0. Sign up here for free.

If you have not already done so, install the Layer0 CLI

npm i -g @layer0/cli

If you don't already have a Shopify Hydrogen app, create one by running the following:

npx create-hydrogen-app
cd project-name
npm install --legacy-peer-deps

You can verify your app works by running it locally with:

npm run dev

In the root directory of your project run 0 init:

0 init

This will automatically update your package.json and add all of the required Layer0 dependencies and files to your project. These include:

  • The @layer0/core package - Allows you to declare routes and deploy your application on Layer0
  • The @layer0/prefetch package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed
  • layer0.config.js - A configuration file for Layer0
  • routes.js - A default routes file that sends all requests to Shopify Hydrogen.

Install @layer0/express by running the following:

npm install @layer0/express

Update layer0.config.js at the root of your project to the following:

// This file was automatically added by layer0 deploy.
// You should commit this file to source control.
module.exports = {
  connector: '@layer0/express',
  express: {
    appPath: './server.js',
  },
  includeFiles: {
    public: true,
    dist: true,
  },
}

Update routes.js at the root of your project to the following:

// This file was added by layer0 init.
// You should commit this file to source control.
const ONE_HOUR = 60 * 60
const ONE_DAY = 24 * ONE_HOUR

const { Router } = require('@layer0/core/router')

module.exports = new Router()
  .match('/assets/:path*', ({ cache }) => {
    cache({
      edge: {
        maxAgeSeconds: ONE_DAY,
        forcePrivateCaching: true,
      },
      browser: {
        maxAgeSeconds: 0,
        serviceWorkerSeconds: ONE_DAY,
      },
    })
  })
  .match('/', ({ cache }) => {
    cache({
      edge: {
        maxAgeSeconds: ONE_DAY,
      },
      browser: false,
    })
  })
  .match('/collections/:path*', ({ cache }) => {
    cache({
      edge: {
        maxAgeSeconds: ONE_DAY,
      },
      browser: false,
    })
  })
  .match('/products/:path*', ({ cache }) => {
    cache({
      edge: {
        maxAgeSeconds: ONE_DAY,
        forcePrivateCaching: true,
      },
      browser: {
        maxAgeSeconds: 0,
        serviceWorkerSeconds: ONE_DAY,
      },
    })
  })
  .fallback(({ renderWithApp }) => renderWithApp())

Refer to the Routing guide for the full syntax of the routes.js file and how to configure it for your use case.

Create a production build of your app by running the following in your project's root directory:

npm run build

Run Layer0 on your local machine:

npm run 0:dev

Load the site http://127.0.0.1:3000

Create a production build of your app by running the following in your project's root directory:

npm run build

Next, deploy the build to Layer0 by running the 0 deploy command:

0 deploy

Refer to the Deploying guide for more information on the deploy command and its options.

Edit this guide on GitHub