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 a front-end web development framework that's optimized for commerce by 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 code base 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, Vite, and Tailwind CSS. Hydrogen is a frontend React framework that uses Vite for server-side rendering and hydration middleware. In this tutorial, you'll build with Tailwind's 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 npx
.
If you want to integrate with an existing React framework, like Next.js or Gatsby, then you can add the @shopify/hydrogen npm
package to your project.
Change to the directory where you want to create your project:
Run the following command:
Provide a name for your Hydrogen storefront.
Change to your app’s directory:
Step 2: Start the development server
Anchor link to section titled "Step 2: Start the development server"Start the development server by running the following command:
The development environment opens automatically at http://localhost:3000:
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, 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: Make a text change
Anchor link to section titled "Step 4: Make a text change"Now that you've explored your Hydrogen project directory, you're ready to make your first change.
In
/src/routes/index.server.jsx
, update theHome
component to return Hello world! and an introductory statement about Hydrogen:Save the file to see your changes updated in real-time:
Step 5: Add styling
Anchor link to section titled "Step 5: Add styling"In this step, you'll install Tailwind and style some elements.
Tailwind is a CSS framework that is composed of classes. It offers developers a set of guardrails by providing a limited set of spacing, color, and responsive layout utilities.
Press
Ctrl-c
to stop the development server.Install
tailwindcss
and its peer dependencies, and generate thetailwind.config.js
andpostcss.config.js
files.Add the paths to the template files in your
tailwind.config.js
file:Add Tailwind directives to
/src/index.css
:Restart your development server.
In
/src/routes/index.server.jsx
, style the Hello world! heading and Welcome to Hydrogen paragraph by adding some classes:Save the file to see your changes updated in real-time:
- Learn how to fetch data from your storefront.