A tiny and frankly quite weird bridge. Just like that stuff we’re going to build. Source: https://commons.wikimedia.org/wiki/File:Gaoliang_Bridge.JPG

Building a tiny bridge between React and MailChimp in PHP

Access the MailChimp API and build your own newsletter archive with a bit of PHP code.

So you want to load your MailChimp campaigns or other data from their API in your React app but can’t get it to work? Stuck at a strange network error you can’t reproduce in Postman?

The reason is simple: MailChimp doesn’t want you to access their API from a browser, and will do everything it can to block you from trying. And they have a good reason: The security of your MailChimp account.

When you access the MailChimp API, you have to send your API key along. That key is practically your username and password in one piece, literally the key to your account. Whoever has access to your key has also full access to your account, your lists, your campaigns, your subscribers. And if you want to access the API with your React app (or any other browser-based client for that matter), you will have to store that key in your client app, where it can be found pretty easily. Therefore, MailChimp makes sure you cannot access their API through a browser, to avoid giving people some bad ideas.

But I really want to access my sent campaigns and stuff

I know, me too. So what can we do? The answer is pretty simple: You have to serve your React app from somewhere, so I assume you have some webspace on a server. Chances are that that server is configured to run PHP. So instead of making everything more complicated than needed, why not simply use that server to act as a bridge between the React app and the MailChimp API?

The server will hold the API key, keeping it secure, and the client will communicate with our own little API. With this setup, we can also finetune what information we want to send to the client (because MailChimp is quite chatty about our lists).

So, here’s a little spaghetti PHP script that takes your clients request, sends it over to the MailChimp API, waits for the response, and puts it back into JSON before sending it back to the client:

This little script implements three methods, but you can of course add all you need.

And if you want to be all fancy, you can also include this .htaccess file to the subdirectory you’re hosting index.php in so you don’t have to use index.php?path=/campaigns, but rather simply /campaigns:

And finally, here’s the code for your react app to read all campaigns with the help of Axios:

And that’s it.

The PHP code is simple, but more than enough if you just want to load your campaigns in your client app. If you need to do anything else, probably don’t use that script and build something more robust. Especially add some sort of authentication if you allow any write operations. Also, without further security, this PHP script exposes all your campaign data to the outside world. You need to be cool with that.

But apart from these concerns, that’s it. You now can access your complete campaign archive, access a single campaign including its body, and get the ID of the latest campaign. If you want to include pagination or other functions of the MailChimp API, this script can act as a building block for a more sophisticated solution.

Like what you read? Give Peter Riegersperger a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.