Hydrogen quickstart
In this quickstart, you'll create a Hydrogen app locally. Hydrogen is a front-end web development framework used for building Shopify custom storefronts.
Requirements
Anchor link to section titled "Requirements"You’ve installed the following dependencies:
Step 1: Create a Hydrogen app
Anchor link to section titled "Step 1: Create a Hydrogen app"You can create a Hydrogen app locally using npm, npx, or yarn.
Navigate to the directory where you want to create your project:
Run the following command:
| Flag | Description |
|---|---|
--template demo-store |
Scaffolds a Hydrogen storefront using the Demo Store template. This is the default template. |
--template hello-world-js |
Scaffolds a Hydrogen storefront using the JavaScript Hello World template. You can also use the -- template hello-world flag, which defaults to the JavaScript template. |
--template hello-world-ts |
Scaffolds a Hydrogen storefront using the TypeScript Hello World template. |
Step 2: Name your Hydrogen storefront
Anchor link to section titled "Step 2: Name your Hydrogen storefront"In your terminal, enter a name for your Hydrogen storefront:
Step 3: Start the development server
Anchor link to section titled "Step 3: Start the development server"Navigate to your app's directory:
Open the development environment at http://localhost:3000:
- Follow the Hydrogen tutorial series to go from "Hello World" to a fully built out Shopify custom storefront.