Getting started with Hydrogen
In this guide, you'll create a new Hydrogen app in your local development environment using the command line.
Requirements
Anchor link to section titled "Requirements"Create a new Hydrogen app
Anchor link to section titled "Create a new Hydrogen app"In your terminal, run the following command:
The script will prompt you with several questions about your app configuration, such as the following:
- Whether to use sample data from Mock.shop or whether to connect to an existing Shopify store’s inventory.
- What to name your Hydrogen app project directory.
- Whether to use JavaScript or TypeScript.
- Which styling method to use, if any.
- Supported options: Tailwind, Vanilla Extract, CSS modules, standard CSS.
- 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.
- Whether to create an
h2
CLI command shortcut.- You can create the
h2
alias at any time by runningnpx shopify hydrogen shortcut
.
- You can create the
- 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
.
Start a development server
Anchor link to section titled "Start a development server"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:
Navigate to your Hydrogen app directory:
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.