• Services
    • Headless Ecommerce Development
    • Ecommerce UI/UX Design
    • Agency Support Services
    • Platforms
    • Shopify Plus
    • BigCommerce
    • Craft CMS
    • Shogun Frontend
    • ButterCMS
  • Case Studies
  • Blog
  • About
  • Contact
  • Development
  • Craft CMS
How to build a Headless website with Craft CMS and Gatsby.js  |  Read time 3 Minutes

How to build a Headless website with Craft CMS and Gatsby.js

September 14, 2021 |  Read time 3 Minutes

Sam Hannan profile photo
By Sam Hannan
Connect on LinkedIn
How to make a headless website with Craft CMS

How to build a headless craft website

Since the release of Craft 3.3, which introduced ‘headless mode’ and GraphQL integration, building a headless craft website is now much more feasible. Going headless is becoming more desired for the flexibility, speed, and the security it adds to a website over a traditional CMS. GraphQL, which was developed by Facebook, is a query language for API’s and responds with all the requested content that can be manipulated and rendered in your Front-End Library of choice.

The first step in building a headless Craft CMS website is to create a GraphQL schema and generate a private token. In order to do this, navigate to GraphQL within Craft, and then into schemas where you name the schema, set its privacy, and can copy the generated token. Then create a .env file to hold these secrets:

GRAPHQL_TOKEN=[token];
GRAPHQL_URL=http://example.com/api;

Then the next step is to decide which Front-End Static Site Generator to use. A few examples of Static Site Generators which are all open-source are Nuxt.js (used with Vue), Next.js, and Gatsby.js This headless Craft tutorial will be going over how to integrate Gatsby.js, which is React-based, to our headless Craft CMS site. Gatsby.js is high-preformative and connects well with GraphQL.

Install Gatsby.js with:

npm install -g gatsby-cli;

Then create a new project: gatsby new project-name

Next, cd into that project and install the Gatsby’s GraphQL plugin:

npm install --save gatsby-source-craft;

Require the ‘dotenv’ package at the top of gatsby-config.js and add the source:

plugins: [ { resolve: 'gatsby-source-craft', options: { craftGqlToken: '${process.env.GRAPHQL_TOKEN}', craftGqlUrl: '${process.env.GRAPHQL_URL}' } ]

That’s all that is required for configuring a headless CMS website with Craft, GraphQL, and Gatsby.js! The next step is to create a query to pull data from your newly created API. A very general query that would just return the title of the site would be:

const data = useStaticQuery(graphql' query TitleQuery { site { siteMetadata { title } } } ')

useStaticQuery is the React-Hook form of <StaticQuery /> which we import from Gatsby. Static Queries can be used on data that won’t be dynamic, like the metadata of a site. Now that we have our query created, we can use it to fetch the title of our site. In our Index component (/src/components/index.js), we can display the title of our site like so:

import React from "react"; import { useStaticQuery, graphql } from "gatsby"; export default function Header() { const data = useStaticQuery(graphql' query TitleQuery { site { siteMetadata { title } } } ‘) return ( <header> <h1>{data.site.siteMetadata.title}</h1> </header> )}

Running `gatsby-develop` will start running the app on your local server at http://localhost:8000

And provide you with a second link http://localhost:8000/___graphql which can be used to test your queries on a local GraphQL server.

The initial site will look like this:

Craft CMS Gatsby JS Headless Starter
Craft CMS Gatsby JS Headless Starter




But with the ability to pull in all of your content from Craft, this default starter page can turn into anything! It was just that straightforward to create a headless Craft CMS website using React.js, GraphQL, and Gatsby.js. For how easy and painless setting up was, and all the other advantages going headless provides, there is not much reason not to!

How to build a Headless website with Craft CMS and Gatsby.js
Electric Enjin

More on headless ecommerce

Shopify Headless Commerce

What is a headless commerce website?

5 Minutes

Shopify Unite 2021 new features

Shopify Unite 2021 aims to tackle performance and a more robust API

5 Minutes

  • Craft CMS Partner
  • Shogun
  • ButterCMS
  • Shopify Partners
  • Zendesk Partner
  • bigcommerce partner

Electric
Enjin

  • Home
  • Work
  • Company
  • Careers
  • Blog
  • Contact
  • Rss
  • Blog Archive
  • Work Archive
  • Sitemap

Our
Services

  • Headless Ecommerce Development
  • Ecommerce UI/UX Design
  • Shopify Plus
  • BigCommerce
  • Craft CMS
  • Shogun Frontend
  • ButterCMS
  • Agency Support Services

CMS
Guides

  • Shopify vs Magento: The best ecommerce platform for your business
  • Shopify vs Shopify Plus: Is the price tag worth it for your ecommerce business?
  • Craft CMS vs WordPress: Which is the best CMS? 2022 Edition
  • Craft Commerce vs Woocommerce
  • Craft CMS vs WordPress: SEO Matchup
  • Craft Commerce, Shopify & BigCommerce Platform Comparison

Let's
connect

  • 203-939-9344
  • [email protected]
  • Electric Enjin
    20 N Main St
    4th Floor
    Norwalk, CT 06854

Ecommerce tips & insights
straight to your inbox.

© Electric Enjin LLC 2023.
Electric Enjin is a certified Minority Business Enterprise.

Privacy Policy

×

Let's Talk

To get started, we just need a little information.

Noel Lopez, Client Success Manager

Chris Ching, Founder


What to expect

  1. Chris will reach out to schedule a free 30 minute consultation.
  2. We'll discuss your goals, requirements, timing, and other details.
  3. Afterwards, you'll receive a tailored proposal.
  4. We get to work.
×

Give us your email (so we know you’re not a bot) to access the case study.