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.
- Create an index route
RequirementsAnchor link to section titled "Requirements"
You're using API version 2023-07 or higher.
You’ve installed the following dependencies:
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 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 serverAnchor 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 structureAnchor 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.
Step 4: Create a routeAnchor link to section titled "Step 4: Create a route"
Now that you've explored your Hydrogen project structure, 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.
The header and footer you can see in your index page were generated by the Skeleton template and rendered in
You are now ready to dig in and start building your own custom storefront.
- Learn how to build a collection page.