Shopify's Hydrogen Starter with Contentful
To get started, you’ll need the following:
A Contentful Space with content.
NodeJS installed locally.
Contentful CLI (optional).
Open the Terminal and perform the following steps:
1. Create your Hydrogen app:
Then enter YOUR_APP_NAME
2. Choose the “Demo App” template
3. Navigate to your app directory and install dependencies:
Alternatively, you could use npm:
4. Create an .env file at the root of your project and define your Contentful environment variables:
Note: You can find your Contentful environment variables in the web app by clicking Settings => API Keys.
Now, create a React hook useContentfulQuery that talks to the Contentful GraphQL API and fetches your content:
1. Create a new file in src/api/useContentfulQuery.jsx:
2. Make your first query in Contentful.
Note: Shopify uses handle as a key to query and fetch a specific product, so you might have a field in your content model that matches that, for example: the-full-stack in http://localhost:3000/products/the-full-stack
Note: View an example of using Contentful query in a React component here.
After you’re done with your first query to Contentful, you can dig into your content using our Contentful GraphQL Playground app and hack away!
Note: Now you can view your app with Contentful data locally on http://localhost:3000/products/the-full-stack
3. Optional: Pre-fill your Contentful space with content.
To fill your space with content, you can use one of the following options:
Create new content - Start creating your content from scratch.
Import example content - You can import some example content to get started quickly. Use the Contentful export, which includes predefined content models and content.
To import content into your space, you must be logged in and have the Contentful CLI installed. Once those requirements are met, run the following command in your terminal:
To deploy your Hydrogen app, follow the instructions set out in Hydrogen’s recommended steps for deployment.
To view the final project code, visit GitHub.
