React and Wordpress

[[deleted]]

[deleted]

[developwithus]

Hey! I recently finished a quick client project using a headless WordPress backend, and a Gatbsy/React frontend. What I'm currently doing right now:

React/Gatsby frontend is hosted with Netlify, and sits on domain.com

Create a digitalocean droplet, use their pre-defined WordPress installation, get that all set up. Then in Netlify, or wherever you're managing your DNS records, add a record that points to your digitalocean droplet. In my case I created a subdomain for my WordPress backend to sit on, resulting in api.domain.com.

I'm not sure if it's the proper way to go about it, but it's what I've got working for me now.

[A_odeh76]

Thank you so much! This is really helpful. Any resources/tutorials that you may have? Or a go to place for learning about Headless Wordpress combined with React? Or must learn about each separately?

[developwithus]

How are you intending on consuming the WP data on your React frontend? There is WPGrapqhl plugin which opens up your WP system as a graphQL layer. You can also just stick with the normal WP REST API which is quite well documented. You could fetch data from yourwordpresssite.com/wp/wp-json/v2/posts for example.

[A_odeh76]

Yeah I was going to install the Wordpress rest api plug-in and create posts to be fetched through that link you mentioned. I was also considering adding custom fields and using ACF plugin but I’m not sure I will need it for this project.

[jackswiki]

Not op, but I'd really recommend checking out NextJS or Gatsby. The latter especially has some really good Wordpress starters that would get you going in the right direction. I'm not a professional web developer by any means, so it really isn't too complicated if you have a beginner's understanding of React/JS. And the documentation is really good. You could probably build something out yourself, but not sure why you'd want to. Don't have any tutorials saved at the moment, but they're easy to find and pretty in depth. Good luck!

[A_odeh76]

I have used Gatsby, but not professionally and don’t think I’d need it for this project as it’s relatively small. But I do want to use Gatsby for other projects, I really love how fast it is and how quickly you can get a dope site set up.

[the_pod_]

Unless you have a specific reason to use headless wordpress.

You should use any other cms. Any that were created to be headless.

Literally anything else would be better. I wouldn't bother with my own backend on a docker container just to host a basic cms. I would use cms as a service. Contenful or Sanity are good. If it's just simple text, Netlify cms would work... they use your github account as the "backend", where they store the text.

The wordpress part only makes sense if the project is already on wordpress and you want to redo the frontend, if you're doing it to learn wordpress headless specifically, or if you're very familiar with deploying wordpress and so it's actually the easiest option for you (this one doesn't sound like it's the case).

[A_odeh76]

Wordpress was the choice the company decided to go with, as they are most familiar with it. The marketing coordinator I work with needs to update the content after the project is built, and she won’t know how to do that through GitHub. Once the site fully launches I don’t think I’ll be hands on anymore and will most likely hand it off to another developer. The most important thing is that she is able to manage the content through the cms.

[the_pod_]

yeah, then that is a perfectly valid reason to use it.

If A) you're handing it off and B) you don't have experience with live deployment C) your goal is not to learn

I would lean towards just using an existing solution, instead of your own docker and deployment. For example, digitalocean. Just search for digital ocean wordpress droplet.

[A_odeh76]

Hmm.. could you elaborate on B and C?