Preview Hydrogen storefronts locally

In this tutorial, you'll learn how to do the following tasks:

• Install Hydrogen storefront dependencies.
• Test your Hydrogen storefront code.
• Build your Hydrogen storefront code.
• Run a local server to preview your Hydrogen storefront.

• Get access to the Shopify admin of the store that you're working with.
• Create a Hydrogen storefront locally or create a storefront using the Hydrogen channel.
• Install Node.js.
• Install yarn.

Your local environment needs to have specific dependencies to run Hydrogen code locally. Oxygen handles dependencies automatically, so you don't need to install dependencies in Oxygen environments when you push your Hydrogen code to your Git repository.

1. In the default branch of the Git repository that contains your Hydrogen storefront code, run yarn.

After you run yarn, a yarn.lock file is created in the root directory of the Hydrogen Git repository, which contains the versions of the dependencies that are required for the Hydrogen project. The yarn.lock file ensures that the versions of the dependencies within the file are used when the Hydrogen storefront is deployed to Oxygen. You should keep the yarn.lock file, and commit it to your Git history.

You can also use the yarn.lock file to check if any of your dependencies have security issues by running yarn audit.

You should test your code locally to ensure that it runs properly without errors before you deploy your Hydrogen code to Oxygen.

1. In the default branch of the Git repository that contains your Hydrogen storefront code, run yarn test.

Before you can run a local server to preview your Hydrogen storefront, you'll need to build your code first.

1. In the default branch of the Git repository that contains your Hydrogen storefront code, run yarn build.

After successfully building your Hydrogen storefront code, you can run a local server on your machine, which enables you to view your storefront locally.

1. In the default branch of the Git repository that contains your Hydrogen storefront code, run yarn preview.
2. Click the link in the output to preview your Hydrogen storefront in your web browser.