Creating a React Front-End for a WordPress Site

WordPress 4.7+ comes with a built-in REST API for developers to access a powerful, well-documented content management system with non-Wordpress view engines. This means you can separate your front end from your back end on WordPress, and write out your views any way you choose using JSON.

For comparison’s sake, the old paradigm was to write out templates in PHP using WordPress’ well-documented but rather arcane view system. This made WordPress development itself a specialized skillset, and making custom themes like this one (if you’re reading this on the WordPress version of my portfolio) was not for the faint of heart.

How to do it

First, shake off the residual frustration you might have had developing traditional WordPress templates. We’re out of PHP land. All we’re doing is tapping your WordPress as an API:

fetch('https://www.nephewapps.com/wp-json/wp/v2/tags')

The /wp-json/wp/v2/ endpoint gives you access to all the information you’d ordinarily query through PHP, returned as a JSON object:

<br />{
        "id": 15,
        "count": 2,
        "description": "",
        "link": "https://nephewapps.com/tag/css/",
        "name": "CSS",
        "slug": "css",
        "taxonomy": "post_tag",
        "meta": [],
        "_links": {
            "self": [
                {
                    "href": "https://nephewapps.com/wp-json/wp/v2/tags/15"
                }
            ],
            "collection": [
                {
                    "href": "https://nephewapps.com/wp-json/wp/v2/tags"
                }
            ],
            "about": [
                {
                    "href": "https://nephewapps.com/wp-json/wp/v2/taxonomies/post_tag"
                }
            ],
            "wp:post_type": [
                {
                    "href": "https://nephewapps.com/wp-json/wp/v2/posts?tags=15"
                }
            ],
            "curies": [
                {
                    "name": "wp",
                    "href": "https://api.w.org/{rel}",
                    "templated": true
                }
            ]
        }
    }

For a full reference to the endpoints available, check out the WP REST API V2 docs.

Limitations and Caveats

The setup for simple views is relatively straightforward, and with some very basic familiarity with WordPress you can deploy a site with Javascript views and a familiar CMS. Functionality for posting/editing/auth will get a bit hairier, and I’d suggest looking into the NodeJS API wrapper if you want to get more fancy.

I deployed my WordPress site using Softaculous on cPanel hosting, with a standard install- nothing special. For the React side of things, I found Heroku the most straightforward.

The caveat for separately hosting the WordPress install and the React front-end is, you need to serve your WordPress data over HTTPS. Otherwise Heroku will give you a mixed content error.

For me this meant migrating my site away from InMotion Hosting into a GoDaddy VPS that allows you to use AutoSSL on your sites. As of this writing, the options on InMotion are to pay $100 for an SSL (plus $25 for installation), or purchase and manually install a 3rd Party SSL. I prefer free.

Once you’re serving from behind an SSL, install the SSL Content Fixer plugin on your WordPress site so your React front-end can access images, etc. from your WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Mark Bello

Mark Bello