Skip to main content

Hydrogen quickstart


Hydrogen 2.0 is out now. These archival Hydrogen 1.0 docs are provided only to assist developers during their upgrade process. Please migrate as soon as possible.

In this quickstart, you'll create a Hydrogen app locally. Hydrogen is a front-end web development framework used for building Shopify custom storefronts.


You’ve installed the following dependencies:

Step 1: Create a Hydrogen app

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

  1. Navigate to the directory where you want to create your project:
cd <directory>
  1. Run the following command:
```bash?title: 'npm'
npm init @shopify/hydrogen

```bash?title: 'npx'
npx @shopify/create-hydrogen

```bash?title: 'pnpm'
pnpm create @shopify/create-hydrogen

```bash?title: 'Yarn'
yarn create @shopify/hydrogen

Step 2: Choose a template

Choose a template to get started building your Hydrogen storefront:

? Choose a template
> Demo Store
Hello World

Step 3: Choose a language

Choose a language to develop your Hydrogen storefront:

? Choose a language
> JavaScript

Step 4: Name your Hydrogen storefront

Enter a name for your Hydrogen storefront:

Name your new Hydrogen storefront
> hydrogen-app

Step 5: Start the development server

  1. Navigate to your app's directory:
cd <app-directory>
  1. Start the development server:
```bash?title: 'npm'
npm run dev

```bash?title: 'Yarn'
yarn dev

You can reach the development server at <http://localhost:3000/>.

Next steps