Begin developing a Hydrogen storefront
You're ready to develop a Hydrogen storefront. You want to set up your development environment so that you can begin coding.
In this tutorial, you'll create a Hydrogen app locally to begin developing a Hydrogen storefront. Hydrogen is an ecommerce toolkit for Remix that's optimized for commerce with Shopify.
You want to develop a fully functional Hydrogen storefront that includes a collection page, a product page, and a cart. Because this is your first time creating a Hydrogen storefront, you can start with basic boilerplate code that makes your programming experience easier and more efficient.
Hydrogen storefronts enable you to use Shopify as the commerce engine behind your independently-built storefront experience.
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:
- Set up your development environment.
- Generate a codebase for building your custom storefront.
- Familiarize yourself with the structure of your Hydrogen project.
- Change text and a component's style.
Requirements
Anchor link to section titled "Requirements"You’ve installed the following dependencies:
You've familiarized yourself with React and Tailwind CSS. In this tutorial, you'll build with Tailwind's style library.
Step 1: Create a new Hydrogen Storefront
Anchor link to section titled "Step 1: Create a new Hydrogen Storefront"You can create a Hydrogen storefront locally using yarn
, npm
, or pnpm
.
Change to the directory where you want to create your project:
Run the following command:
Select the Hello World template.
Select JavaScript for your language.
Specify a name for the directory where you want to create your new storefront:
Change to the directory for your new Hydrogen storefront:
Step 2: Start the development server
Anchor link to section titled "Step 2: Start the development server"To preview the Hydrogen Storefront, start your development server:
Run the following command to start the development server:
Navigate to the MiniOxygen development server by navigating to
http://localhost:3000/
, or using the port provided in the console output.
The Hello World index page appears:

Step 3. Explore your project structure
Anchor link to section titled "Step 3. Explore your project structure"So far, you've created a Hydrogen storefront that's based off the Hello World template. Hydrogen templates are working implementations of Hydrogen storefronts.
The Hello World template is a minimal implementation of a Hydrogen storefront. It has few dependencies and little boilerplate, and provides a base for building a Hydrogen storefront.
Open your project
Anchor link to section titled "Open your project"Open your code editor and navigate to your Hydrogen project directory. The Hello World template provides the following structure:
Step 4: Create a route
Anchor link to section titled "Step 4: Create a route"Now that you've explored your Hydrogen project directory, you're ready to create your first route.
Create an
app/routes/_index.jsx
file, export anIndex
component and return a message.Save the file to see your home page update in real-time.
Step 5: Add a CSS framework
Anchor link to section titled "Step 5: Add a CSS framework"In this step, you'll install Tailwind and style some elements. Tailwind is a CSS framework composed of classes. It offers developers a set of guardrails by providing a limited set of spacing, color, and responsive layout utilities.
- Stop the development server by pressing
Ctrl-C
. Install Tailwind and PostCSS, then run the init command to generate
tailwind.config.js
andpostcss.config.js
files.Add the paths to all of your template files in your
tailwind.config.js
file:Create an
app/styles/tailwind.css
file and add the@tailwind
directives for each of Tailwind’s layers.In your
package.json
file, update thescripts
attribute to build both your development and production Tailwind CSS. This will replace your existingbuild
anddev
scripts.
Step 6: Layout
Anchor link to section titled "Step 6: Layout"Create a
app/components/Layout.jsx
file and export aLayout
component using Tailwind styles:In
app/root.jsx
, import the Tailwind build, remove the placeholder "Hello, Hydrogen" message, import your newLayout
component and wrap yourOutlet
in theLayout
.In
app/styles/app.css
, remove the placeholder styles. You can use this file for any styles that Tailwind doesn't provide.Start the server again and you should see your new layout with Tailwind styling applied to your storefront.
You are now ready to dig in and start building your own custom storefront.
- Learn how to build a collection page.