WordPress is the world’s most popular content management system in the world. Like me, you may end up working on WordPress websites at some point in your career! Today, I will show you how to use WordPress as a headless CMS with React as the frontend.
Step 1 — Prepping Your WordPress Site
If you’re reading this chances are you have a WordPress website already, if not you will need to sign up and create one at wordpress.com. Once you have a site ready, the first thing you will need to do is install and activate a new plugin called WPGraphQL.
Link: https://www.wpgraphql.com/
Step 2 — Grab Your GraphQL Endpoint
Once the plugin is activated, from your WordPress Dashboard menu you will scroll all the way down until you see the GraphQL option. Highlight this, and click on settings. Your GraphQL Endpoint can be found on the first row as shown in the image below. Keep this URL handy as we will need it later!
i.e. — https://yourdomain.com/graphql
Step 3 — Clone the Starter Template
In this step, we are going to clone a starting template that’s already been created with the GraphQL Endpoints for WordPress posts applied.
A couple of benefits for using a template:
- Quick to get started and test your endpoint
- Ability to focus more on designing your blog
Enter the code below in your terminal where you want your project files to be located. This will get us started quickly with a starter blog template using Next.js, created by Lee Robinson.
npx create-next-app --example cms-wordpress cms-wordpress-app
Once it’s finished running, open your project folder using VSCode or whichever editor you are working with.
Step 4 — Set Up Your Environment Variable
As shown above, you want to create a new file in your root directory called ‘.env.local’, and inside this file, you will place the code below, along with your GraphQL Endpoint URL saved earlier in Step 2.
For some, this should be enough to get started simply by running ‘npm run start’ in your terminal at the root of the project. However, you might run into problems as I did due to how some of the images are processed by WordPress! If that’s you, keep reading!
Step 5 — Fixing Error: Invalid Src Prop
The above ‘Error: Invalid src prop’ caused me lots of pain and headache, but luckily for you, I’m going to save you the trouble of trying to figure it out for yourself!
The error states that we must configure the hostname, which in my case was ‘hostname: i0.wp.com’, and we will do this by creating a new file at the root of the project called ‘next.config.js’.
Inside this file, we will put the following code, save, and ‘npm run dev’ again. Your posts should now be loaded into the starter template!
Note: My particular site had these hostnames, yours may have more or less, and you can add them to the ‘domains’ array above separated by commas.
Conclusion
Today, I showed you how to use WordPress as a headless CMS with React as the frontend by:
- Prepping your WordPress site by installing the WPGraphQL plugin
- Grabbing your GraphQL Endpoint from your WordPress dashboard
- Cloning a starter Next.js blog template
- Setting up your environment variable with your endpoint URL
- Fixing errors related to invalid src props
I hope you enjoyed today's content and check back regularly for more articles just like this!
