Setting up a Hydrogen 2 storefront from scratch

npm create @shopify/hydrogen@latest
# Or with the Shopify CLI:
shopify hydrogen init

# Answer the prompts:
# Project name: my-storefront
# Template: Hello World
# Language: TypeScript
# Link to store: yes (select your dev store)

// app/routes/_index.tsx
import { json } from '@shopify/remix-oxygen';
import type { LoaderFunctionArgs } from '@shopify/remix-oxygen';

const COLLECTIONS_QUERY = `#graphql
  query FeaturedCollections {
    collections(first: 4, sortKey: UPDATED_AT, reverse: true) {
      nodes {
        id
        title
        handle
        image { url altText width height }
      }
    }
  }
` as const;

export async function loader({ context }: LoaderFunctionArgs) {
  const { storefront } = context;
  const { collections } = await storefront.query(COLLECTIONS_QUERY, {
    cache: storefront.CacheLong(),
  });
  return json({ collections: collections.nodes });
}

// app/routes/collections.$handle.tsx
import { json } from '@shopify/remix-oxygen';
import { useLoaderData, Link } from '@remix-run/react';
import { getPaginationVariables, Pagination, Image, Money } from '@shopify/hydrogen';
import type { LoaderFunctionArgs } from '@shopify/remix-oxygen';

const COLLECTION_QUERY = `#graphql
  query Collection($handle: String!, $first: Int, $last: Int, $after: String, $before: String) {
    collection(handle: $handle) {
      id title description
      products(first: $first, last: $last, after: $after, before: $before) {
        nodes {
          id title handle
          featuredImage { url altText }
          priceRange { minVariantPrice { amount currencyCode } }
        }
        pageInfo { hasNextPage hasPreviousPage startCursor endCursor }
      }
    }
  }
` as const;

export async function loader({ params, request, context }: LoaderFunctionArgs) {
  const paginationVariables = getPaginationVariables(request, { pageBy: 12 });
  const { collection } = await context.storefront.query(COLLECTION_QUERY, {
    variables: { handle: params.handle!, ...paginationVariables },
    cache: context.storefront.CacheShort(),
  });
  if (!collection) throw new Response('Collection not found', { status: 404 });
  return json({ collection });
}

export default function CollectionPage() {
  const { collection } = useLoaderData<typeof loader>();
  return (
    <div>
      <h1>{collection.title}</h1>
      <Pagination connection={collection.products}>
        {({ nodes, NextLink, PreviousLink }) => (
          <>
            <PreviousLink>Load previous</PreviousLink>
            <div className="grid">
              {nodes.map((product) => (
                <Link key={product.id} to={`/products/${product.handle}`}>
                  <Image data={product.featuredImage!} />
                  <h3>{product.title}</h3>
                  <Money data={product.priceRange.minVariantPrice} />
                </Link>
              ))}
            </div>
            <NextLink>Load more</NextLink>
          </>
        )}
      </Pagination>
    </div>
  );
}

// app/routes/products.$handle.tsx (simplified)
import { VariantSelector, AddToCartButton, Money } from '@shopify/hydrogen';
import { getSelectedProductOptions } from '@shopify/hydrogen';

export async function loader({ params, request, context }: LoaderFunctionArgs) {
  const selectedOptions = getSelectedProductOptions(request);
  const { product } = await context.storefront.query(PRODUCT_QUERY, {
    variables: { handle: params.handle!, selectedOptions },
    cache: context.storefront.CacheShort(),
  });
  if (!product) throw new Response('Product not found', { status: 404 });
  return json({ product });
}

export default function ProductPage() {
  const { product } = useLoaderData<typeof loader>();
  const selectedVariant = product.selectedVariant ?? product.variants.nodes[0];

  return (
    <div>
      <h1>{product.title}</h1>
      <Money data={selectedVariant.price} />
      <VariantSelector handle={product.handle} options={product.options}>
        {({ option }) => (
          <div key={option.name}>
            <label>{option.name}</label>
            {option.values.map(({ value, isAvailable, to, isActive }) => (
              <Link key={value} to={to} prefetch="intent"
                style={{ fontWeight: isActive ? 'bold' : 'normal',
                         opacity: isAvailable ? 1 : 0.3 }}>
                {value}
              </Link>
            ))}
          </div>
        )}
      </VariantSelector>
      <AddToCartButton
        disabled={!selectedVariant.availableForSale}
        lines={[{ merchandiseId: selectedVariant.id, quantity: 1 }]}
      >
        {selectedVariant.availableForSale ? 'Add to cart' : 'Sold out'}
      </AddToCartButton>
    </div>
  );
}

// app/routes/api.cart.tsx
import { CartForm } from '@shopify/hydrogen';
import type { ActionFunctionArgs } from '@shopify/remix-oxygen';

export async function action({ request, context }: ActionFunctionArgs) {
  const { cart } = context;
  const formData = await request.formData();
  const { action, inputs } = CartForm.getFormInput(formData);

  let result;
  switch (action) {
    case CartForm.ACTIONS.LinesAdd:
      result = await cart.addLines(inputs.lines);
      break;
    case CartForm.ACTIONS.LinesUpdate:
      result = await cart.updateLines(inputs.lines);
      break;
    case CartForm.ACTIONS.LinesRemove:
      result = await cart.removeLines(inputs.lineIds);
      break;
    default:
      throw new Error(`Unexpected cart action: ${action}`);
  }

  const headers = cart.setCartId(result.cart.id);
  return new Response(JSON.stringify(result), {
    headers: { 'Content-Type': 'application/json', ...Object.fromEntries(headers) },
  });
}

# One-time manual deploy to initialize the Oxygen target
shopify hydrogen deploy

# Check the deployment URL printed in the CLI output
# e.g. https://my-storefront.myshopify.io

# After connecting GitHub, push to deploy:
git push origin main