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.

Scenario

Anchor link to section titled "Scenario"

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:
- Node.js version 16 or greater
- npm version 7
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.