In this lesson, you will configure Content API access in Hygraph and add two environment variables to the starter. By the end, the storefront is running locally and displaying published content.

#Two access modes

Before configuring anything, it helps to understand why there are two separate configurations.

Hygraph exposes a single Content API endpoint. The starter uses two different ways to access content through that endpoint:

• The Content API serves the storefront for public visitors. It only returns content in the PUBLISHED stage. No authentication is required.
• A Permanent Auth Token (PAT) grants the frontend access to DRAFT content. It is used only for the preview URL configured in lesson 8.3.

#Configure Content API permissions

The Public Content API needs read permissions initialized before unauthenticated requests can return content.

1. Navigate to Project settings > Access > Content API.

2. In the Content Permissions box, click Initialize defaults.

   The content permissions box now looks like this:

   Content permissions initialized

3. Navigate to Project settings > Access > Endpoints. Copy the High Performance Content API endpoint URL from this screen. You will need it while adding environment variables.

#Create a PAT for draft content

1. Navigate to Project settings > Access > Permanent Auth Tokens.
2. Click + Add token.
3. Enter a name and optional description, select DRAFT as the default stage for content delivery, and click Add & configure permissions.
4. On the token details screen, copy the token value. You will need it while adding environment variables.

#Add environment variables

Copy the .env.sample file and rename it to .env.local:

cp .env.sample .env.local

Open .env.local and add the two values collected above:

HYGRAPH_ENDPOINT=YOUR_CONTENT_API_ENDPOINT_HERE
HYGRAPH_DEV_AUTH_TOKEN=YOUR_DRAFT_TOKEN_HERE
HYGRAPH_PREVIEW_SECRET=

Leave HYGRAPH_PREVIEW_SECRET empty for now. You will configure it in the next lesson.

#Run the storefront

Start the local development server:

npm run dev

Open http://localhost:3000 in your browser. The storefront should display your published content.

Starter homepage

Product page

#What's next

Or, go to the Tutorial overview for the full lesson list.