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.

   Please double check the .env file to ensure all necessary variables are present. If you set PACK_SECRET_TOKEN as a secret environment variable in Shopify, you must manually add it to your .env file.

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.