Deploying React w/ WordPress as Backend using WP Rest API

Question

How would you go about hosting / deploying a React application with WordPress on the backend? I've been using the WP Rest API plugin and that API seems to need to be hosted. Would I also have to host my front-end React application on a separate server? Or would I somehow be able to put everything onto a shared hosting service like GoDaddy or GreenGeeks?

Chez

Answer 1

You have a handful of options. You have the power to host React and Wordpress separately, but I prefer to host mine on the same server using docker.

If your curious, check out this starter template: https://github.com/postlight/headless-wp-starter

It's one of my favorites, and it has react pre-wrapped in a docker container with straight forward instructions.

Stapes

Answer 2

You probably has access to CPanel or similar tools to deploy your files onto server.

Reminder is to put your build files into a sub-folder rather than deploy onto server directly,

then public_html/your_project_sub_folder_name,

then you will be able to use that domain/your_project_sub_folder_name to access the reactjs (You cannot have 2 apps deployed at the same time if they are not sub_folder separated)

At the same time, you gain original access to WP_REST to get post data in json format already, you can create your own custom end points if needed.

Here is the anwser on how to create your own custom endpoint:

Creating custom endpoints Wordpress

Skimmia

So I would use a clean empty server and use CPanel to upload files with WordPress & React onto it? Or is this with WordPress already installed? – Chez

Both are fine, they are just differ by step, you should first install WordPress on an empty server anyway – Skimmia

Awesome, I'll play around with it! Thanks a lot! – Chez

Please ask again if you got any further problem though, and also tick it as answer once you tested it – Skimmia

haha thanks for teaching me how the checking tick answer function should be used (no sarcasm here) – Chez

you're welcome, welcome aboard though haha, every single upvote and accepted answer is our passion to stay here – Skimmia

Answer 3

Yes you can host your React App and WP separately or Host it together in one. I tried this creating React Build Files inside WP Theme. Not yet perfect but working.

This simple WP Theme with React Build files:(React Build Folder inside WP Theme).

https://github.com/jun20/Simple-WP-ReactJS-Theme-Demo

And this is the reactjs dev files:

https://github.com/jun20/wp-theme-reactjs-dev/tree/master/Final/end

although this is not production ready and not tested.

Or

You can use the Generated React JS Build Files only with the custom Routes and Endpoints from your WP Rest API.

Like in this example: (this the build files in repo Simple-WP-ReactJS-Theme-Demo) This React JS Build folder -> https://github.com/jun20/wp-theme-reactjs-dev/tree/Final-Build/build it has a routes and endpoints of posts, primary navigation, at pages from live wp site site.

Moorefield

Answer 4

You can put your build files (index.html, main.js, etc) into your htdocs folder or an appropriate sub-folder. You may need to change your Apache .htaccess configuration to redirect appropriate routes.

Glucoside

This can be done over a shared hosting server as well? Sorry, I'm not too familiar with this stuff yet. – Chez

I am no expert either, but I have done it once. Shared hosting. I put the index.html in the public_html folder (which was my root folder) – Glucoside

@Glucoside correct, it will automatically deploy and apache will be able to pick up and run – Skimmia

Good to know that it does work with shared hosting! Thank you! – Chez

where you put the files the files depends on how you want it. I put the index.html in www.example.com/ so my clients can access and the api (not WP, but my own) in www.example.com/api – Glucoside

@Glucoside if you put the build files directly on public_html, the sub_folder app will not function normally (the routing will be a mess), in other words, you can only deploy one app on one server which is not a desired pattern, should always put in a folder and deploy, then you will be able to access with <www.example.com/folder_name/api> – Skimmia

Which I why I said, it depends on what you want. Thanks anyway, good you brought it to attention explicitly – Glucoside