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).
- Create the project locally:
npx frontity create frontitywp && cd frontitywp
- Create the development environment and launch in browser:
npx frontity dev
- Connecting the project to your Worpdress site:
By default, the project will use the
frontity/mars-theme. In a new terminal window (or text editor) open up
frontity.settings.jsand update the menu links (under “Menu”:) following the example as well as the api endpoint for your existing WordPress domain (“api”: “https://yourdomain.com”).
- (Optional) Makes some tweaks to the files in /packages/mars-theme/ to tweak the appearance of the site:
With each file modification, you’ll notice the dev environment recompiles (Compiled successfully.)
- When you’re ready to deploy, run:
npx frontity build
- To deploy to Zeit you’ll need to install Now CLI:
npm i -g now
- Create this
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):
- Create a free Zeit account:
- Login through your terminal:
npx now login
- Then you need make the Now CLI build the project in Zeit.co (this will take a few minutes):
npx now --target production
- Add the live domain you want to serve the deployed Frontity code from here:
- Pair that domain to the deployed project
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
Domainstab 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).