How to Set Up a Headless WordPress Blog Using Faust.js and Node.js

Introduction

Headless WordPress with Faust.js provides a powerful way to build modern web applications using React and GraphQL while keeping WordPress as the CMS. This guide will walk you through setting up a headless WordPress blog using Faust.js with a Node.js-based frontend.

Step 1: Setting Up WordPress with WPGraphQL

1. Install WordPress

You can install WordPress locally using XAMPP, MAMP, or Docker or use a hosting provider.

2. Install Required Plugins

In the WordPress Admin Dashboard, go to Plugins → Add New, then install and activate:

• WPGraphQL – Provides a GraphQL API for WordPress.
• Faust.js – Enables headless WordPress integration.
• Advanced Custom Fields (ACF) (Optional) – For handling custom fields.

3. Enable Headless Mode

1. In Settings → Reading, uncheck “Discourage search engines from indexing this site.”
2. Go to Settings → Faust and enable “Headless Mode.”
3. Copy your GraphQL API URL, typically:

   http://yourwordpresssite.com/graphql
   

4. (Optional) Enable JWT authentication for secure API access.

Step 2: Setting Up Faust.js with Node.js

1. Install Node.js

Ensure Node.js (LTS version) is installed:

node -v
npm -v

2. Create a Faust.js Project

Run the following command to create a Next.js project:

npx create-next-app@latest my-faust-app

Move into the directory:

cd my-faust-app

3. Install Faust.js Dependencies

npm install @faustwp/core @faustwp/next

Step 3: Configuring Faust.js

1. Setup Faust.js Configuration

Modify faust.config.js:

import { config } from '@faustwp/core';

export default config({
  wpUrl: 'http://yourwordpresssite.com',
  apiBasePath: '/api/faust',
});

2. Configure Next.js API Route

Create pages/api/faust.js:

import { apiRouter } from '@faustwp/next';

export default apiRouter;

Step 4: Fetching and Displaying Blog Posts

1. Fetch and Display Posts

Modify pages/index.js:

import { gql, useQuery } from '@apollo/client';
import { getClient } from '@faustwp/core';

const GET_POSTS = gql`
  query GetPosts {
    posts {
      nodes {
        id
        title
        excerpt
        slug
      }
    }
  }
`;

export default function Home() {
  const { data, loading, error } = useQuery(GET_POSTS, { client: getClient() });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>My Headless WordPress Blog</h1>
      {data?.posts?.nodes.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <div dangerouslySetInnerHTML={{ __html: post.excerpt }} />
          <a href={`/post/${post.slug}`}>Read More</a>
        </div>
      ))}
    </div>
  );
}

2. Create a Dynamic Blog Post Page

Create pages/post/[slug].js:

import { gql } from '@apollo/client';
import { getClient } from '@faustwp/core';
import { useRouter } from 'next/router';

const GET_POST = gql`
  query GetPost($slug: String!) {
    postBy(slug: $slug) {
      title
      content
    }
  }
}`;

export default function Post() {
  const router = useRouter();
  const { slug } = router.query;
  const { data, loading, error } = getClient().query({ query: GET_POST, variables: { slug } });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data.postBy.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: data.postBy.content }} />
    </div>
  );
}

Step 5: Running the Faust.js App

1. Start the Development Server

npm run dev

Your Faust.js app should be available at http://localhost:3000.

2. Test the Blog

• Visit http://localhost:3000/ to see blog posts.
• Click “Read More” to view an individual post.

Step 6: Deploying the App

1. Deploy WordPress

Host WordPress on a live server with SSL enabled.

2. Deploy Faust.js on Vercel

Push your Faust.js project to GitHub, then deploy on Vercel:

npm i -g vercel
vercel

Configure environment variables in Vercel for WP_URL.

Conclusion

You have successfully built a headless WordPress blog using Faust.js and Node.js. Now, you can:

• Add authentication
• Optimize for SEO
• Customize styles with Tailwind CSS

Happy coding! 🚀