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).

  1. Create the project locally:

    npx frontity create frontitywpe && cd frontitywpe

  2. Create the development environment and launch in browser:

    npx frontity dev

  3. 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.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”).

  4. (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 (「wdm」: Compiled successfully.)

  5. When you’re ready to deploy, run:

    npx frontity build

  6. To deploy to Zeit you’ll need to install Now CLI:

    npm i -g now

  7. Create this now.json file 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):

    {
    "alias": "www.your-site.com",
    "version": 2,
    "builds": [
    {
    "src": "package.json",
    "use": "@frontity/now"
    }
    ]
    }

  8. Create a free Zeit account:

    https://zeit.co/onboarding

  9. Login through your terminal:

    npx now login

  10. Then you need make the Now CLI build the project in Zeit.co (this will take a few minutes):

    npx now --target production

  11. Add the live domain you want to serve the deployed Frontity code from here:

    https://zeit.co/dashboard/domains

  12. 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 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.

Elementor Page Builder

Related Articles

Copyright © 2019 Nodeflame

HOW TO: Deploy a headless site for WordPress to the Cloud for FREE with Frontity and Zeit Now

by nodeflame time to read: 2 min