Let’s make our static frontend a little bit more appealing by providing a page for the collection of articles and a page for the details of an article.

In my previous article “Static content serving with Nginx” I was able to configure Nginx to serve up my static HTML page showing a list of article titles. In this article I will add another page to display the contents of the article, also static with plain HTML and some JavaScript.

A listing with linked elements

First I can now create a link to each article using simple AJAX. In the existing index.html page I add the following logic.

        <script type="application/javascript">
        $(function () {
            var backendUri = "http://localhost:8001/api";
            $.getJSON(backendUri, function (data) {
                $("title").html(data.name);
                $("h1").html(data.name);
                $("h2").html(data.description);
            });
            $.getJSON(backendUri + "/wp/v2/posts", function (posts) {
                var postElement = $("#latest-posts");
                var postList = $("<ul/>");
                $.each(posts, function (i) {
                    var postItem = $("<li/>");
                    var postBold = $("<b/>").appendTo(postItem);
                    var postText = $("<a/>")
                      .text(posts[i].title.rendered)
                      .attr("href", "/page?" + btoa(posts[i].id))
                      .appendTo(postBold);
                    $(postItem).appendTo(postList);
                });
                $(postList).show();
                $(postList).appendTo(postElement);
            });
        });
        </script>

This will create a link to page.html that will display the full article.

A page with details

In page.html I want keep things compact as it is just pulling in the data straight from WordPress API.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
        <meta charset=UTF-8">
        <title></title>
    </head>
    <body>
        <h1></h1>

        <div id="article"></div>
        <script type="application/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script type="application/javascript">
        $(function () {
            var backendUri = "http://localhost:8001/api";
            var postId = document.location.search;
            postId = postId.substr(1);
            post = atob(postId);
            $.getJSON(backendUri + "/wp/v2/posts/" + post, function (data) {
              $("title").html(data.title.rendered);
              $("h1").html(data.title.rendered);
              $("#article").html(data.content.rendered);
              console.log(data);
            });
        });
        </script>
    </body>
</html>

The result is superb. WordPress provides HTML styling like headers, images and links as raw JSON data, so the page looks already awesome without any styling.

Retrieving details of a WordPress article in a static HTML page.
The unstyled details of this article.

Now that I have a static frontend server, an application gateway, a wordpress backend service and a separate database all running locally in containers, I believe it is time to move this concept to the cloud. Join me in my next article where I will be doing the same thing on cloud infrastructure.


Michelangelo van Dam

Michelangelo van Dam is a senior PHP architect, PHP community leader and international conference speaker with many contributions to PHP projects and community events.