Preview Hydrogen storefronts locally
Before you push changes to a Git repository, you might want to test changes to your Hydrogen storefront locally. You can use a local server to preview your storefront.
What you'll learn
Anchor link to section titled "What you'll learn"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.
Requirements
Anchor link to section titled "Requirements"- 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
.
Step 1: Install your Hydrogen storefront dependencies
Anchor link to section titled "Step 1: Install your Hydrogen storefront dependencies"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.
- 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
.
Step 2: Test your Hydrogen storefront code
Anchor link to section titled "Step 2: Test your Hydrogen storefront code"You should test your code locally to ensure that it runs properly without errors before you deploy your Hydrogen code to Oxygen.
- In the default branch of the Git repository that contains your Hydrogen storefront code, run
yarn test
.
Step 3: Build your Hydrogen storefront code
Anchor link to section titled "Step 3: Build your Hydrogen storefront code"Before you can run a local server to preview your Hydrogen storefront, you'll need to build your code first.
- In the default branch of the Git repository that contains your Hydrogen storefront code, run
yarn build
.
Step 4: Run a local server to preview your Hydrogen storefront
Anchor link to section titled "Step 4: Run a local server to preview your Hydrogen storefront"After successfully building your Hydrogen storefront code, you can run a local server on your machine, which enables you to view your storefront locally.
- In the default branch of the Git repository that contains your Hydrogen storefront code, run
yarn preview
. - Click the link in the output to preview your Hydrogen storefront in your web browser.