SKNCRE

SKNCRE is an Astro-based cosmetics brand demo storefront that uses Hygraph as a headless CMS, designed to showcase federated content and composable commerce workflows.

What is SKNCRE?

SKNCRE is an Astro-based cosmetics brand demo storefront that uses Hygraph as a headless CMS. It takes a Hygraph GraphQL endpoint as configuration input and produces a publicly accessible e-commerce front end, with a live demo hosted on Vercel. The project is a reference implementation from Hygraph intended to demonstrate federated content and composable commerce patterns.

Key Features

• Astro framework — The front end is built with Astro, the static site generator that ships zero JavaScript by default and supports component islands. The development server runs at http://localhost:4321.
• Hygraph CMS integration — Content is managed in Hygraph, a headless CMS that serves data over GraphQL. The demo connects to a Hygraph project using a GQL_HOST environment variable pointing to the Hygraph CDN endpoint.
• GraphQL code generation — The repo includes a npm run codegen command that generates TypeScript types from the GraphQL schema, giving type-safe queries for product and page content.
• Environment-based configuration — Setup uses a .env file and a .env.example template; you must set your Hygraph API endpoint and configure content viewing permissions in the Hygraph API settings.
• Live demo on Vercel — A running instance is available at https://skncre-cosmetics-hygraph-astro.vercel.app/, letting you see the storefront before deploying your own.
• Federated content approach — The repo's repository metadata describes it as showcasing Hygraph CMS and federated content, meaning content is pulled from multiple sources into a single GraphQL endpoint.

Who is it for?

Astro developers who want a worked example of connecting Astro to a headless CMS will find this a concise reference. Hygraph users evaluating the platform can use the demo as a starting point for building a storefront. Developers new to composable commerce can study how a static front end combines with a CMS backend to serve product content.

What can you do with SKNCRE?

• Front-end developers: Use the repository as a scaffold to build a cosmetics or general e-commerce storefront on Astro, customizing the Hygraph schema and GraphQL queries to fit your product catalog.
• Hygraph users: See how to wire up a Hygraph project to an Astro site, including generating GraphQL types and connecting through the CDN endpoint.
• Technical evaluators: Spin up the demo locally with npm dev to inspect how federated content is fetched and rendered, then deploy the same code to Vercel or another platform.

How does SKNCRE work?

The project expects a .env file with GQL_HOST set to your Hygraph CDN endpoint. After adding the environment variable, run npm run codegen to generate GraphQL types, then start the development server with npm dev. The Astro site fetches content from Hygraph at build time and renders the cosmetics storefront pages.

FAQ

What is SKNCRE?

SKNCRE is a demo storefront for a cosmetics brand built with Astro and Hygraph CMS. It’s a reference project from Hygraph that shows how to build a static e-commerce site with content managed in Hygraph and served via GraphQL.

How do I set up the GraphQL connection?

Copy .env.example to .env, then set GQL_HOST to your Hygraph CDN endpoint (format is shown in the repository). You must also grant content viewing permissions in the Hygraph API settings so the Astro build can fetch the content.

How do I run the development server?

After configuring the environment, run npm run codegen to generate GraphQL types, then start the development server with npm dev. The site will be available at http://localhost:4321.

Is there a live demo?

Yes, the repository links to a running demo at https://skncre-cosmetics-hygraph-astro.vercel.app/ so you can see the result without setting anything up.

Does the project use TypeScript?

The repo uses GraphQL code generation to produce typed queries, and the setup instructions include npm run codegen for that purpose. While the full stack is Astro, the generated types are TypeScript.