Getting started with Hydrogen

• Node.js version 16 or greater
• npm version 7 or greater

In your terminal, run the following command:

The script will prompt you with several questions about your app configuration, such as the following:

1. Whether to use sample data from Mock.shop or whether to connect to an existing Shopify store’s inventory.
2. What to name your Hydrogen app project directory.
3. Whether to use JavaScript or TypeScript.
4. Which styling method to use, if any.
   • Supported options: Tailwind, Vanilla Extract, CSS modules, standard CSS.
5. Whether to automatically install package dependencies.
   • By default, Hydrogen installs with npm. To use a different package manager, select “No” and install dependencies manually when the app setup is complete.
6. Whether to create an h2 CLI command shortcut.
   • You can create the h2 alias at any time by running npx shopify hydrogen shortcut.
7. Whether to scaffold standard Shopify routes.
   • If so, how to optionally support multiple languages and currencies with Shopify Markets.
   • If not, you can set up routes later by running npx shopify hydrogen setup.

Hydrogen includes the MiniOxygen development server to run your app locally. MiniOxygen provides close parity with Shopify’s Oxygen runtime. To start your local development server, run the following command:

1. Navigate to your Hydrogen app directory:

2. Start the development server:

By default, your Hydrogen app will be available at http://localhost:3000. You can customize the server’s behavior with several CLI flags.

The development server also starts a GraphiQL API client at http://localhost:3000/graphiql, which enables you to preview and test GraphQL queries in your browser.

• Connect your local Hydrogen app to an existing Shopify store.
• Follow the Hydrogen tutorial series to go from a minimal template to a full-featured custom storefront.