Serverless wordpress with react and gatsby

By /

A combination of booya’s approach and Tim Smith’s. Before beginning, you will want to set up a wordpress site and extend out the restful api with some helpful plugins that are listed here test. A menu extender, such as WP-REST-API V2 Menus may also be helpful.

Initial Setup

yarn global add gatsby-cli

Starting a blog from scratch

Navigate to the directory where you keep all your projects and use the command below to set up a new folder and build it with starter code:

gatsby new blog [optional: URL to git repository of starter template]

Let’s break that down: gatsby new tells gatsby to initialize a new site in the folder blog and using a specific starter (or template with dependencies and hooks). You can choose any starter you want, and the Gatsby site has a listing of a few popular starters that already have pre-built wordpress hooks. Netlify has a shorter, but more reliable listing. Warning: getting the starter to work with your blog may take some trouble-shooting, so for this first go round you may want to leave this last part blank, since if you do not specify a starter, it’ll work just fine.

Now navigate to that directory and see your blog

cd blog
gatsby develop

After a few seconds of Gatsby building your site locally, navigate in your browser to http://localhost:8000 and check out your new blog!

Hooking it up to wordpress

Now we need to go back to terminal and exit out of the process (ctrl-c) so we can install dependencies:

yarn add gatsby-source-wordpress gatsby-plugin-sitemap

Now, from your favorite text editor (I use sublime), navigate to your blog directory and open up gatsby-config.js. From there, you’ll need to connect to and configure the wordpress plugin by adding this code to the plugin section (just before the closing ] bracket):

{
      resolve: `gatsby-source-wordpress`,
      options: {
        baseUrl: process.env.WORDPRESS_BASE_URL,
        protocol: process.env.WORDPRESS_PROTOCOL,
        hostingWPCOM: (process.env.WORDPRESS_HOSTING_WPCOM === 'true'),
        useACF: (process.env.WORDPRESS_USE_ACF === 'true'),
        verboseOutput: (process.env.WORDPRESS_VERBOSE_OUTPUT === 'true'),
        auth: {
          wpcom_app_clientSecret: process.env.WORDPRESS_CLIENT_SECRET,
          wpcom_app_clientId: process.env.WORDPRESS_CLIENT_ID,
          wpcom_user: process.env.WORDPRESS_USER,
          wpcom_pass: process.env.WORDPRESS_PASSWORD,
        },
        includedRoutes: [
          "**/posts",
          "**/pages",
          "**/tags",
          "**/categories",
          "**/media",
          "**/taxonomies",
          "**/users",
        ],
      },
    },

and you’ll also have to tell gatsby-config.js to use your .env file (which we’re about to create) by adding the following to the very top of the file:

require('dotenv').config();

Now create a new file within your blog directory called .env and save it with the following code:

WORDPRESS_BASE_URL=yoursite.com/path
WORDPRESS_PROTOCOL=https
WORDPRESS_HOSTING_WPCOM=false
WORDPRESS_USE_ACF=false
WORDPRESS_VERBOSE_OUTPUT=true
WORDPRESS_CLIENT_SECRET=xxx
WORDPRESS_CLIENT_ID=xxx
WORDPRESS_USER=xxx
WORDPRESS_PASSWORD=xxx

Those bottom two lines should just be the username and password you use when logging into wp-admin. The client_secret and client_id can be found by going to https://developer.wordpress.com/apps/ (You will need to create an app for your hosted site if you haven’t already.)

(You will need to create an app for your hosted site if you haven’t already.)

Now you should see that your gatsby blog frontend is connected to your wordpress backend by once again typing gatsby-develop into terminal and navigating to the graphql section of your localhost: http://localhost:8000/___graphql

Now that you’ve hooked up your blog with the wordpress API, create components to represent your pages, posts and index. Booya also covers this, but Tim Smith’s approach seems less complicated.

Deploy

Now we’re going to publish the site on the web. All the hip kids are using netlify, so go ahead and set up an account there. Once you’ve done that, go into your blog’s gatsby folder and install gatsby-cli there as well:

cd blog
yarn global add gatsby-cli

Next we’ll get our version number and pop that into our .nvmrc file to let netlify know which version we’re using:

node -v
nano .nvmrc

Add the version number (without the v) and save the file (ctrl-x). If the output of node -v was v10.15.3, your .nvmrc file should look something like this:

Before deploying, we need to save this project in git. And before we do that, we need to make sure we don’t publish the keys to our blog to the world. This isn’t an issue if you’re using a private repository, but otherwise, make sure to add .env to your .gitignore file.

Now Add a new project to gitlab (don’t tick the readme button) and then follow the initialize instructions on the next screen under Push an existing folder.

Login to netlify and click the New site from git button. Follow the instructions to link it to the repository you just created. Then change the Build command to gatsby build and hit the New variable button 9 times to add the variables in your .env file. Be careful to get the whole line when you’re copying variables, particularly WORDPRESS_CLIENT_SECRET, which is long. Before you hit deploy, make sure your screen looks something like this:

Now you may click deploy and see your site live. Huzzah!

(If the deploy doesn’t work your first go round, go to sites -> deploys and click the Trigger deploy button. This will give you a handy output that you can follow to read the error.)

Webhook to netlify

Similar to the booyah’s approach, but hosted wordpress admins should go to the writing options section in wp-admin and then add the webhook url in the update services box.

Troubleshooting

In case you get the error Something is already running at port 8000 it’s because you need to kill whatever process is currently at that port. Here’s a good way to do that:

kill -9 $(lsof -i TCP:8000 | grep LISTEN | awk '{print $2}')
Scroll to Top