Begin developing a Hydrogen storefront

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.

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

• 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.

1. In your terminal, run the following command:

2. 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

3. Change to the directory for your new Hydrogen storefront:

1. Run the following command to start the development server:

2. 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:

   

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.

Now that you've explored your Hydrogen project structure, you're ready to create your first route.

1. Create an app/routes/_index.jsx file, export an Index component and return a message.

2. 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.