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 code base for building your custom storefront.

• Familiarize yourself with the structure of your Hydrogen project.

• Change text and a component's style.

• You’ve installed the following dependencies:

  • Yarn version 1.x or npm
  • Node.js version 16.5.0 or higher

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

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.

1. Change to the directory where you want to create your project:

2. Run the following command:

3. Provide a name for your Hydrogen storefront.

4. Change to your app’s directory:

Start the development server by running the following command:

The development environment opens automatically at http://localhost:3000:

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 code editor and navigate to your Hydrogen project directory. The Hello World template provides the following structure:

Now that you've explored your Hydrogen project directory, you're ready to make your first change.

1. In /src/routes/index.server.jsx, update the Home component to return Hello world! and an introductory statement about Hydrogen:

2. Save the file to see your changes updated in real-time:

   

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.

1. Press Ctrl-c to stop the development server.

2. Install tailwindcss and its peer dependencies, and generate the tailwind.config.js and postcss.config.js files.

3. Add the paths to the template files in your tailwind.config.js file:

4. Add Tailwind directives to /src/index.css:

5. Restart your development server.

6. In /src/routes/index.server.jsx, style the Hello world! heading and Welcome to Hydrogen paragraph by adding some classes:

7. Save the file to see your changes updated in real-time:

   

• Learn how to fetch data from your storefront.