Create a new directory, initialize a new npm project and install express;
Now, create an index.js in a directory called source. Here is a very basic, one route app:
We have added one route, it works with GET requests — we used the method get(), not post() — and it responses to routes with that match the path “/”. Inside the route handler, we get a request and a response object. The first request that will come in handy shortly and the other we use to create a response.
Two important things to know about the response. First, you can set the HTTP status code for the response with the status() method:
Second, you can send a JSON response by returning the json() object.
Serving JSON From Files
That’s cool, but let’s show some WordPress content with this app.
Dynamic Routes With Express
One more Express concept to learn — dynamic routes. Let’s say we wanted our server to respond to a request to /posts/hello-world with the json for the post with the slug hello-world, we would need to know, in our route handler callback that post slug — “hello-world”. Also, we’d need that route to exist — for any post slug. That’s a dynamic route.
Inside of our route callback the request object will have the property “params” that has all of the matched parameters from the request.
That shows us that we can get the post slug from the URL. For now, I’m going to assume that your project has a directory called content/wp-json/posts with JSON files name for WordPress posts, by slug. If that seems like an oddly specific thing to have on hand or are curious how to do that besides cutting pasting responses from your browser, take a look at my post on how to do that every time a post is saved.
This updated handler uses that dynamic route parameter to build that file path and then returns the JSON.
That is if it exists, we do not have any handling for that, which is sub-optimal. Let’s check first if the file exists, and if not, return a 404:
Proxying Remote Content
That’s basically all we need if you are OK supplying all of your content via JSON files built using some other process. But what if this could also create the files via a REST API request to a real WordPress site and then cache the results for next time? Sounds cool. Let’s do it, first we’ll need an API client:
This is the Node client for WordPress REST API. We will use it to get the post from a remote site. The client uses API discovery to auto-configure all of its routes:
Now, we can use this client to query for the post and write the response to the file system to prevent another request from being made later:
What Else Would You Do With This Server?
That’s enough to show how to create routes and proxy the WordPress REST API. And that’s enough to make you dangerous — I mean useful. For example, what about using this server server-side rendering of React components that you may also be using on the front-end:
I’m not going to get into server-side rendering for React in this post. I recommend reading this post to learn more.
You can take a look at the Github repo of the project this is based on to follow along with what I am doing. Feel free to copy or fork that repo. Leave a link to what you create in the comments or come at me on Twitter – @josh412 – with the link.
Start the conversation