Headless WordPress may very well be the future – so you absolutely need to know what it’s all about. If you’ve never built a headless WordPress site before, this is a super neat way to get it set up (with free tools) so you can get familiar with how the whole things works.
Time needed: 1 hour.
This quick start guide will show you how to connect a headless React.js site to your WordPress site using Frontity and deploying it to Zeit’s service. This guide assumes you already have Node installed on your system (If you don’t, here is an installation guide for Mac | Windows).
npx frontity create frontitywpe && cd frontitywpe
npx frontity dev
By default, the project will use the
frontity/mars-theme. In a new terminal window (or text editor) open up
frontity.settings.json and update the menu links (under “Menu”:) following the example JSON structure as well as the api endpoint for your existing WordPress domain (“api”: “https://yourdomain.com”).
With each file modification, you’ll notice the dev environment recompiles (｢wdm｣: Compiled successfully.)
npx frontity build
npm i -g now
now.jsonfile with your preferred text editor, change the url and save it in the root of your Frontity project (don’t forget to change the domain to the one you want to serve the headless frontend over):
npx now login
npx now --target production
Once added, you’ll need to point your DNS record for the domain to the CNAME that Zeit provides. Once the DNS record has propagated, click on the newly-deployed project, then the
Domains tab and add the same domain to that project so Zeit knows what to serve up when your visitors hit it.
The above method is a completely decoupled method (where your front and backend are served from completely different systems).
You may be also interested in checking out our guide on deploying a coupled headless site with WordPress on WP Engine with Devkit, where the frontend still lives in the WordPress theme directory here.