Go Headless with WordPress and Express.js
1. Making WordPress Headless with WPGraphQL
1.1. Installing the Necessary Headless WordPress Plugins
- WPGraphQL
- Yoast SEO
- WPGraphQl Yoast SEO Addon
- Advanced Custom Fields
- WPGraphQL for Advanced Custom Fields
If you have installed these plugins, you should be able to visit the GraphiQL IDE in your WordPress admin panel. Now we can get started on building a server to connect with it.
1.2. Setting Up Our Headless WordPress GraphQL Endpoint
In our WordPress admin console, navigating to WPGraphQL settings allows us to set the slug for our endpoint, which defaults to ‘graphql,’ and provides us with the endpoint we will query to access our WP data:
Since we’ll be passing this endpoint to our queries on the server, I’m setting it up in my .env file as a variable: WP_GRAPHQL_ENDPOINT. If I wanted to protect my WP data, I could set up authentication in the WPGraphQL settings, but since everything on my WordPress is publicly available anyways, I am not worried about that at this point.
2. Building our Express website
2.1. Structuring Our Project
You can initialize your Express project just as you like. If like me, you like working with Typescript, Eslint & Prettier, then you can use this boilerplate by Teric Cabrel.
Create server for node and client folder for browser javascript.
2.2. Installing Dependencies
To be able to query data from our Headless WordPress, we need to install:
- A Template Engine for dynamically inject JavaScript into our HTML templates.
- Packages to send GraphQL queries from our server
