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.
• Change text and a component's style.

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.

You can create a Hydrogen storefront locally using yarn, npm, or pnpm.

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

2. Run the following command:

3. Select the Hello World template.

4. Select JavaScript for your language.

5. Specify a name for the directory where you want to create your new storefront:

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

To preview the Hydrogen Storefront, start your development server:

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 Hello World index page appears:

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

   

In this step, you'll install Tailwind and style some elements. Tailwind is a CSS framework composed of classes. It offers developers a set of guardrails by providing a limited set of spacing, color, and responsive layout utilities.

1. Stop the development server by pressing Ctrl-C.

2. Install Tailwind and PostCSS, then run the init command to generate tailwind.config.js and postcss.config.js files.

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

4. Create an app/styles/tailwind.css file and add the @tailwind directives for each of Tailwind’s layers.

5. In your package.json file, update the scripts attribute to build both your development and production Tailwind CSS. This will replace your existing build and dev scripts.

1. Create a app/components/Layout.jsx file and export a Layout component using Tailwind styles:

2. In app/root.jsx, import the Tailwind build, remove the placeholder "Hello, Hydrogen" message, import your new Layout component and wrap your Outlet in the Layout.

3. In app/styles/app.css, remove the placeholder styles. You can use this file for any styles that Tailwind doesn't provide.

4. Start the server again and you should see your new layout with Tailwind styling applied to your storefront.

   

You are now ready to dig in and start building your own custom storefront.

• Learn how to build a collection page.