DEV Community: Martin

Best practices on responding to AJAX calls in Wordpress Plugins

Martin — Fri, 20 Nov 2020 10:28:28 +0000

Preface (you can skip it, if you want): A customer came up to me with a request to build an application and combine it with an existing Wordpress installation. At the beginning I was hesitant, but I found, that using "Wordpress as a Backend" has quite a few advantages: It has baked-in user roles and capabilites and you can use already existing plugins to simplify your own development.

Task

As I mentioned in the preface, using Wordpress as a backend comes with a few benefits, I decided to program the new application as a plugin. But I neither wanted to use the (sometimes weird) combination of PHP and HTML nor send all the needed data via forms to the backend.

I wanted to stick with tools I was more familiar with:

I choose Vue.js as my frontend for the application.
And the backend would be a Wordpress plugin.

When developing with a frontend framework like Vue.js, you have to use AJAX calls for communication with your backend. And that's when I found out, that the existing documentation on AJAX with Wordpress feels quite old (https://codex.wordpress.org/AJAX_in_Plugins) and there are no complete code examples and no best practices on how to work with AJAX calls when using Wordpress.

Content

In this article I will not only cover "AJAX with Wordpress", but also a few related topics:

Wordpress AJAX basics
Responding to AJAX calls from your Wordpress plugin
Authorization
Frontend best-practices
Ship your frontend together with your plugin
Nonces

Wordpress AJAX basics

Please turn on debugging (https://wordpress.org/support/article/debugging-in-wordpress/) by using both WP_DEBUG and WP_DEBUG_LOG, it will make your life easier :)

This wordpress article explains the basics of responding to ajax calls.

Here is a Gist which also describes everything you should know:

One thing to remark: You always have to check for permissions in your AJAX calls

Responding to AJAX calls

Within your functions it is highly recommended to use wp_send_json_success or wp_send_json_error functions to send data back to the client (here is a informative stackexchange post on that)

On default settings, the client has to send all data as x-www-form-url, otherwise you cannot access it with $_POST['something']. I did not like that and found a way to send parse the data when using application/json Content-Type:

$data = json_decode(file_get_contents('php://input'));

Now your $data variable contains all the request data. You could now use object destructuring to access the data more easily (but it depends on your PHP version). Skip to the Frontend Best practices section when you are curious on how to send data from the frontend to the AJAX handler

Authorization

As explained in the first section, you have to do the authorization for your AJAX functions/routes yourself. It really depends on the application and use case of your plugin. You can try to use Wordpress built-in current_user_can function, or build your own permissions/role system, which I had to do. In the end, I ended up with following code:

$data = json_decode(file_get_contents('php://input'));
$id = $data->locationId;
// I check whether the current user is allowed to access the given location
// If not the function returns wp_send_json_error(null, 401)
checkUserAccessToLocation($id);

Frontend Best Practices

You should have a single component in your frontend project which handles the calls to the backend: It is easier to maintain and reduces the probability of errors. I am using Vue.js and have a simple class for handling the communication with the backend (I am using axios)

export class BackendCommunicationService {

    private static async buildCall(data: {[k: string]: any}) {
        const params = new URLSearchParams()
        params.append('action',data['action'])
        delete data['action']
        const res = await Vue.axios.post('/wp-admin/admin-ajax.php', data, {params})
        return res.data
    }
// ..... other functions
}

Using the buildCall function within the class is easy: this.buildCall({action: 'insert_name', name: 'Foobar'}). This will call your (hopefully previously) defined wp_ajax_insert_name ajax action.

Shipping your plugin

I wanted to ship the plugin with the full application code. So I build the frontend project and copy the generated dist folder into an assets folder of the plugin. Here is my bash script:

cd frontend && npm run build
cp -r dist/* ../plugin/assets/

In order to have predictable file names, I have to add filenameHashing: false to my vue.config.js.

Now I have my frontend code in the assets folder. How do I include the plugin with the whole application into wordpress? The easiest way I found is by using a shortcode. This is my PHP code to ship my application through a shortcode:

<?php
add_shortcode('get_ll_include_tags','get_ll_include_tags_func');

function get_ll_include_tags_func() {
    // Load JS files
    wp_register_script( 'vue-app.js', plugin_dir_url( __FILE__ ) . 'assets/js/app.js');
    wp_enqueue_script( 'vue-app.js' );
    wp_register_script( 'vue-vendors.js', plugin_dir_url( __FILE__ ) . 'assets/js/chunk-vendors.js');
    wp_enqueue_script( 'vue-vendors.js' );

    // Load CSS files of application
    wp_register_style( 'vue-app.css', plugin_dir_url( __FILE__ ) . 'assets/css/app.css');
    wp_enqueue_style( 'vue-app.css' );
    wp_register_style( 'vue-vendors.css', plugin_dir_url( __FILE__ ) . 'assets/css/chunk-vendors.css');
    wp_enqueue_style( 'vue-vendors.css' );


    ob_start();
    ?>
        <div id="app">
            <div class="app__loading-spinner"></div>Application is loading...
        </div>
    <?php
    return ob_get_clean();
}
?>

Now I can use [get_ll_include_tags] in any wordpress page and my application will be loaded.

Nonces

To be honest, this is a topic I am still indecisive about. Nonces are there for a good reason, but as all AJAX calls are POST requests and I am checking the authorization for every call, I am not sure whether nonces are needed? But please correct me, if I am wrong! If nonces are needed, I already have a few ideas on how to implement them.

The End

I hope this helps some people, I wish I had had such a post when starting with PHP Wordpress plugin development.

Disclaimer: I am new to Wordpress plugin development and PHP, so please comment if you find an error or have a remark on something:)

Deploy a Vue app with a Nodejs backend to Heroku

Martin — Mon, 14 Sep 2020 09:08:40 +0000

Many tutorials about deploying a Vue app to Heroku are using a very simple setup with no server (or a really simple one only using express as a server dependency).

But what about deploying an app with more complex server which has a lot of dependencies? I couldn’t find a good and working tutorial, so I wrote this one.

Setup

My Vue App is not only a frontend, but also needs a backend. Of course I could deploy the frontend and backend to different services and maybe utilize CDNs for the frontend, but I wanted to have everything in the same repository and server.

All the Node.js server code is in the root folder and I have a seperate frontend folder for my Vue.js app.

Developing the project locally was no problem. That’s why I thought pushing to Heroku would as well be a piece of cake.

My server code needs a simple npm install && npm start and the Vue.js app has to be build with npm run build. On the server side I am using fastify and with the help of fastify-static I am serving the frontend/dist folder to the users.

So, in order to build everything upon deployment, the command for the build step in my root package.json would be: cd frontend && npm run build? Wrong!

Analysis and Solution

First of all, all the Vue.js dependencies are not installed, so we are missing a npm install in the frontend folder. But Heroku apparently sets NODE_ENV=prod and NPM_CONFIG_PRODUCTION=true so when running an npm install no devDependencies get installed. I tried different approaches to get Heroku to install and build everything correctly (e.g. https://stackoverflow.com/questions/22954782/install-devdependencies-on-heroku , https://dev.to/jmbejar/how-to-quickly-deploy-a-vuejs-app-to-heroku-5b0f) but in the end I resorted to a simple build script:

#/bin/bash
npm install —only=dev # installs only dev dependencies
npm install            # installs prod dependencies
npm run build          # builds the Vue.js app

This script resides in the frontend folder. And I call this script from the root package.json by using

“heroku-postbuild”: “cd frontend && ./build.sh”,

Now upon deployment all my server dependencies get installed as well as my Vue.js frontend being build.

There are surely other ways to accomplish this, but my approach works for me and is easy to understand.

Adding SSL when using Heroku and Namecheap

Martin — Thu, 04 Jun 2020 09:57:44 +0000

I have fought a few hours to try to get SSL working when using a Heroku Dyno together with a domain bought on Namecheap. I didn’t want to use any Namecheap paid SSL solution, because Heroku offers SSL for free.

My goal is simple: Every user should end up on https://example.com regardless whether they visit the website with https/http or www/non-www.

To make it more clear:

In the beginning I wanted to achieve everything using the Namecheap DNS settings. And even though Namecheap introduced ALIAS records last July and me reading a lot of articles on that topic I could not get it to work. Sometimes the redirects from www to non-www did not work, sometimes the https website did not respond. The issue is, that Namecheap does the DNS resolution, but it does not have the SSL certificates (Heroku has them).

The (in my eyes not most elegant solution, but it works flawlessly) is to use application-level redirects. That means in your application you issue an redirect to the https URL when an incoming request was using http.

Heroku (and most other platforms) deal with the whole SSL problem (they do the SSL termination), so your application only receives http requests. In order for you to know whether a request was originally using http or https you have to look into the x-forwarded-proto header (Heroku documenation on that).

Using the header value to redirect to https when you have encountered an http request (I am using fastify and Node.js here):

import fast from 'fastify'
const fastify = fast({ logger: true })

fastify.addHook('onRequest', async (request, reply) => {
    if (request.headers['x-forwarded-proto']) {
        if (request.headers['x-forwarded-proto'] === 'http') {
            return reply.redirect(`https://${request.headers.host}${request.raw.url}`)
        }
    }
})

fastify.listen(port, '0.0.0.0')

In addition to the implementation at the application level, you have to setup your two Heroku domains: One for the root domain and one for the www subdomain:

And now for the last part, the Namecheap DNS settings! These are the only two settings I have for that domain:

I hope this helps some of you out there! Stay safe :)