Create a custom environment
Custom environments enable you to work on different versions of a Hydrogen storefront without affecting other versions of your storefront.
For information about environments, refer to Oxygen environments.
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:
- Create a new custom environment.
- Trigger a deployment in a custom environment.
- Preview a deployment in a custom environment.
- Publish the latest changes to a custom environment deployment.
- Delete a custom environment.
Requirements
Anchor link to section titled "Requirements"- You have access to the Shopify admin of the store that you're working with.
- You've connected a storefront through the Hydrogen channel.
- You're familiar with the concept of environments.
Step 1: Create a new branch in your Git repository
Anchor link to section titled "Step 1: Create a new branch in your Git repository"- Run
git clone <your-hydrogen-git-repository>
. - Run
git checkout -b <your-new-branch-name>
. - Change a file in your Git repository.
- Run
git add .
. - Run
git commit -m "<your commit message>"
. - Run
git push --set-upstream origin <your-new-branch-name>
.
Step 2: Assign the branch to your new custom environment
Anchor link to section titled "Step 2: Assign the branch to your new custom environment"- From your Shopify admin, under Sales channels, click Hydrogen.
- From the Hydrogen storefront page, click the storefront that you want to change.
- Click Storefront settings > Environments and variables.
- Beside Environments, click Add environment.
- Under Branch, select the branch that you want to create an environment for from the Select branch drop-down.
- Under Name, type the name you want for your custom environment.
- Click Save.
Step 3: Trigger a deployment in your custom environment
Anchor link to section titled "Step 3: Trigger a deployment in your custom environment"- Ensure that you're using the Git branch that you want to deploy.
- Change a file in your Git repository.
- Run
git add .
. - Run
git commit -m "<your commit message>"
. - Run
git push
.
Step 4: Preview the latest changes to your custom environment
Anchor link to section titled "Step 4: Preview the latest changes to your custom environment"- From your Shopify admin, under Sales channels, click Hydrogen.
- From the Hydrogen storefront page, click the storefront that you want to preview.
- Under Custom environments, click
…
beside the custom environment that you want to preview. - Click Edit environment.
- Under ENVIRONMENT URL, click the URL.
Step 5: Publish your custom environment
Anchor link to section titled "Step 5: Publish your custom environment"- From your Shopify admin, under Sales channels, click Hydrogen.
- From the Hydrogen storefront page, click the storefront that you want to change.
- Under Custom environments, click
…
beside the custom environment that you want to make public. - Click Edit environment.
- Under URL privacy, select Public.
- Click Save.
Step 6: Delete your custom environment (optional)
Anchor link to section titled "Step 6: Delete your custom environment (optional)"- From your Shopify admin, under Sales channels, click Hydrogen.
- From the Hydrogen storefront page, click the storefront that you want to change.
- Under Custom environments, click
…
beside the custom environment that you want to delete. - Click Edit environment.
- Click Delete environment.
- Click Delete environment again to confirm that you want to delete your environment.
- Learn how to create environment variables and use them to store reusable data for use in the Hydrogen storefront code.
- Learn how to roll back to a previous deployment when a bug or error exists on the most recent deployment while you work on a fix.
- Learn how to toggle the privacy of your preview URLs.