Creating a Hydrogen front end

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

npm create @shopify/hydrogen@latest -- --install-deps --mock-shop --path sanity-and-hydrogen --language ts --shortcut h2

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

Follow the prompts:

• When prompted, choose "No, set up later" for the route scaffolding option

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

./
├── /sanity-and-shopify
└── /sanity-and-hydrogen

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

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

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

Open to enlarge image

Once installed, click Storefront API to copy your access tokens and insert them into the .env file your project.

Open to enlarge image

# 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"
# Any random string, but it must be kept secret
SESSION_SECRET="..."

Now, enter the sanity-and-hydrogen folder, run the application in development and open http://localhost:3000 in your browser.

npm run dev

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

Open to enlarge image

Hydrogen is now connected to Shopify and data-ready! Before fetching data though there's one more step.

Inside your Hydrogen project, install Tailwind, the Tailwind Typography plugin and required dependencies:

npm install -D tailwindcss postcss autoprefixer @tailwindcss/typography

Initialise the Tailwind config file from the command line:

npx tailwindcss init --ts -p

Update your tailwind.config.ts file to point at the app directory, as well as including the Typography plugin.

import type {Config} from 'tailwindcss';

export default {
  content: ['./app/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
} satisfies Config;

Create a new tailwind.css with Tailwind utilities

@tailwind base;
@tailwind components;
@tailwind utilities;

Update the root file to import and load Tailwind's CSS.

// Import your CSS file
import tailwindCss from './styles/tailwind.css?url';

// Include it in the links() export
export function links() {
  return [
    {rel: 'stylesheet', href: tailwindCss},
    // ...all other links
  ]
}

All done! Now let's fetch some data.