Setting Up Localhost for Development

Setting up your local development environment is a crucial step in the development process.

The Customizer allows you to preview your local storefront in real-time, making it easy to test your changes before pushing them to production.

  1. Clone the Repository
    Start by cloning the storefront's repository to your local machine.

  2. Install Dependencies
    Run npm install to install necessary dependencies.

  3. Environment Configuration
    Use npx shopify hydrogen env pull for a quick environment setup. This will pull the necessary environment configurations.
    Alternatively, you can manually copy and paste the environment variables from Shopify.

  4. Start the Development Server
    Run npm run dev to start the development server. Your local storefront will be available at http://localhost:8080.

Additional Setup

Adding a Localhost Preview URL to the Customizer
In order to preview your local storefront in Customizer, you will need to add your localhost URL to the Customizer preview URLs.

  1. Navigate to the Customizer.
  2. Select the preview URL dropdown (located below the Publish button).
  3. Click on "Edit preview URLs."
  4. Add your new URL and click Save.


Preview URLs

Learn how to manage preview URLs in the Customizer

Read more

Content Environments

Learn how to use Content Environments to preview content changes

Read more

Content Management API

Learn how to use the Content Management API to manage content

Read more

Section Schema API

Learn how to use the Section Schema API to manage sections

Read more

Was this page helpful?