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 learnAnchor 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.
- Change text and a component's style.
RequirementsAnchor link to section titled "Requirements"
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.
Step 1: Create a new Hydrogen StorefrontAnchor link to section titled "Step 1: Create a new Hydrogen Storefront"
You can create a Hydrogen storefront locally using
Change to the directory where you want to create your project:
Run the following command:
Select the Hello World template.
Specify a name for the directory where you want to create your new storefront:
Change to the directory for your new Hydrogen storefront:
Step 2: Start the development serverAnchor link to section titled "Step 2: Start the development server"
To preview the Hydrogen Storefront, start your 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 Hello World index page appears:
Step 3. Explore your project structureAnchor link to section titled "Step 3. Explore your project structure"
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 projectAnchor link to section titled "Open your project"
Open your code editor and navigate to your Hydrogen project directory. The Hello World template provides the following structure:
Step 4: Create a routeAnchor link to section titled "Step 4: Create a route"
Now that you've explored your Hydrogen project directory, you're ready to create your first route.
app/routes/_index.jsxfile, export an
Indexcomponent and return a message.
Save the file to see your home page update in real-time.
Step 5: Add a CSS frameworkAnchor link to section titled "Step 5: Add a CSS framework"
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.
- Stop the development server by pressing
Install Tailwind and PostCSS, then run the init command to generate
Add the paths to all of your template files in your
app/styles/tailwind.cssfile and add the
@tailwinddirectives for each of Tailwind’s layers.
package.jsonfile, update the
scriptsattribute to build both your development and production Tailwind CSS. This will replace your existing
Step 6: LayoutAnchor link to section titled "Step 6: Layout"
app/components/Layout.jsxfile and export a
Layoutcomponent using Tailwind styles:
app/root.jsx, import the Tailwind build, remove the placeholder "Hello, Hydrogen" message, import your new
Layoutcomponent and wrap your
app/styles/app.css, remove the placeholder styles. You can use this file for any styles that Tailwind doesn't provide.
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.