How To Deploy A Shopify Hydrogen Storefront To Oxygen
Oxygen serves as a hosting solution that empowers you to effortlessly deploy and preview your Shopify Hydrogen storefront, eliminating the need for intricate infrastructure setup and maintenance.
Within this blog post, you’ll be guided through the process of seamlessly integrating the Hydrogen channel into your Shopify store and effectively deploying your storefront.
Requirements
- A Shopify store should have a valid plan (Basic, Shopify, Advanced), and make sure the store will not be in a development store.
- Should have Apps and channel permissions
- Should have a GitHub account.
Step 1: Add the Hydrogen App
You need to install the Hydrogen app that will enable a storefront channel and use of Oxygen for you where you can manage the storefront.
The Hydrogen channel can be installed using the provided procedure, or alternatively, you have the option to install it directly from the Shopify App Store.
- Navigate to the “Sales channels” section from your Shopify admin and then click on the “>” symbol.
- Select the option for “All recommended sales channels.”
- Choose the “Hydrogen” option under the build custom storefronts section.
- Proceed by clicking on the “Install” button.
After the successful installation of the Hydrogen sales channel app, you should proceed by clicking on the “Hydrogen” option within the sales channels.
This action will lead you to the section dedicated to storefronts where you can create/manage your Shopify Hydrogen storefront and customize various aspects of your storefront settings.
Step 2: Create a Shopify Hydrogen storefront
Within the Hydrogen sales channels interface, it’s necessary to select the “Create Storefront” option. This action will enable you to initiate the process of setting up a new storefront.
Following that, your next step should involve creating a new repository, and making use of the provided starter Shopify Hydrogen storefront template.
Alternatively, if you have already developed the Shopify Hydrogen storefront theme on GitHub, you have the option to connect the existing repository.
This allows for seamless integration and management of your storefront’s codebase.
In the absence of an existing storefront repository, you can initiate the creation process by following these steps.
- Start by choosing the “Demo Store” starter template. This will serve as the initial framework for your storefront’s development.
- Opt for a template language: either JavaScript or TypeScript. This decision determines the language used for your storefront’s template development.
- Choose your GitHub account and input the repository name. The repository is set to private by default, but you have the option to select “public” if you prefer. This choice determines the visibility of your repository on GitHub.
- Subsequently, click the “Create” button. This action will initiate the process of generating your repository based on the selected template and settings.
The creation process will now commence. This involves setting up the repository and initiating the generation of the chosen storefront template.
Step 3: Start the development.
Clone your new repository locally and start the development server. using given command
git clone https://github.com/<username>/HydrogenStorefrontTheme.git \ && cd HydrogenStorefrontTheme \ && npm install \ && npx shopify hydrogen link --storefront "Hydrogen Storefront Theme" \ && npm run dev
Upon the completion of your development work, you possess the flexibility to commit your alterations to any branch apart from the main branch.
This will trigger the deployment of your changes to the preview environment on Oxygen. If you intend to make changes in the production environment, you should commit them directly to the main branch. To review your changes, you can access the preview URL provided.
Step 3: Access Preview URL of Development
After committing changes in a branch other than the main branch, you can access and open the preview URL
It is also possible to modify the environments and variables directly within the storefront settings.
Step 4: Develop to the Production
Once you’ve rigorously tested your development on the preview URL and achieved a successful outcome, you can proceed to merge your code into the production (main) branch. Subsequently, you have the option to transition the storefront’s visibility from private to public.
Certainly, having concluded these steps, you now possess the opportunity to map the domain if you wish. Subsequently, as you progress, you can seamlessly transition to efficiently gathering orders from your headless storefront.
Support
Thank you for reading this article, for any technical assistance, please reach us by email at support@webkul.com
Moreover, you are presented with the choice to opt for Shopify Headless (Hydrogen) Development via our offered services.
Have a Great Day Ahead! See you in the next post. Keep reading 🙂