Skip to main content

Hydrogen quickstart

tip

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.

Requirements​

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:
```bash
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
  TypeScript

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:
```bash
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​