# Creating a Hydrogen front end

https://www.sanity.io/learn/course/sanity-and-shopify-with-hydrogen/creating-a-hydrogen-front-end.md

Hydrogen is a front-end framework based on Remix and preconfigured to query from Shopify stores. 

1. If you get stuck, [consult the Hydrogen documentation](https://hydrogen.shopify.dev/) for installation instructions

1. Initiate a new Hydrogen project from the command line in a **separate directory** from your Sanity Studio.

```sh
pnpm create @shopify/hydrogen@latest --install-deps --mock-shop --path web --language ts --shortcut h2 --styling tailwind
```

The command above sets a number of defaults such as TypeScript, Tailwind and the directory of the project.

Follow the prompts:

* When prompted, choose "**Set up later"** for any additional routing options

### Check your project structure

You should now have two **separate** directories, one for your Sanity Studio, the other for your Hydrogen app. 

```text
./
├── /studio # Sanity Studio
└── /web    # Hydrogen front-end
```

This will be important later when we begin generating Types from the Studio for Hydrogen.

### Connecting Hydrogen to Shopify

For your development store you'll need to install the Headless Shopify app to connect your front end to Shopify.

1. If you're **not** working on a development store you can connect by choosing a shop with the Hydrogen / Oxygen sales channel using `h2 link` – but development stores don't currently support this. We highly recommend switching to a paid plan to test Oxygen deployments if that's the final destination of the experience, as it's easier to troubleshoot deploy issues as you build!

## Install Headless

The `web/.env` file in your project will need to be updated with your Shopify URL and access tokens from the Headless sales channel. 

1. Install the [Headless sales channel](https://apps.shopify.com/headless) onto your dev store

![Shopify "headless" app install page](https://cdn.sanity.io/images/3do82whm/next/035e8a5fef43b766ceff5e5deb52fa62b0311836-2144x1388.png)

Once installed, click the "Manage" button next to **Storefront API**, copy your access tokens and insert them into the `.env` file your project.

![Shopify admin showing access tokens](https://cdn.sanity.io/images/3do82whm/next/7b91a0e873072696fa81308c51db6e2eb72747e6-2240x1488.png)

1. **Update** your `.env` file to look something like the below

```text:web/.env
# Found in Storefront API section of the Headless App in Shopify Admin
PUBLIC_STOREFRONT_API_TOKEN="..."
PRIVATE_STOREFRONT_API_TOKEN="shpat_..."
# Found in your Shopify dashboard
PUBLIC_STORE_DOMAIN="<your-domain>.myshopify.com"
PUBLIC_CHECKOUT_DOMAIN="<your-domain>.myshopify.com"
# Any random string, but it must be kept secret
SESSION_SECRET="..."
```

## Run it!

Now, enter the `web` folder, run the application in development and open [http://localhost:3000](http://localhost:3000) in your browser.

```sh
# in /web
pnpm run dev
```

1. If you see a message about connecting your storefront, it must not be reading the contents of your `.env` file correctly.

You should see a page like the one below with instructions on setting up a route.

![Hello page of a new Hydrogen application](https://cdn.sanity.io/images/3do82whm/next/b07833833f8693b1d6dfd73a2c9fb4f609cf8fcf-2240x1488.png)

Hydrogen is now connected to Shopify and data-ready!