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.
- Create an index route
Requirements
Anchor link to section titled "Requirements"You're using API version 2023-07 or higher.
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.
In your terminal, run the following command:
Select the following configuration:
- Connect to Shopify: Use sample data from Mock.shop.
- Where would you like to create your storefront? hydrogen-storefront
- Select a language: JavaScript
- Select a styling library: Tailwind
- Install dependencies with npm? (y) Yes
- Create a global `h2` alias? (y) Yes
- Do you want to scaffold routes and core functionality? (n) No, set up later
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"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 placeholder 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 minimal Hydrogen storefront without any routes. Open your code editor and navigate to your Hydrogen project directory to explore the project structure.
Step 4: Create a route
Anchor link to section titled "Step 4: Create a route"Now that you've explored your Hydrogen project structure, 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.
The header and footer you can see in your index page were generated by the Skeleton template and rendered in app/components/Layout.jsx
.
You are now ready to dig in and start building your own custom storefront.
- Learn how to build a collection page.