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?
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.
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
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.
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.
Related
Does anyone know how to take an existing Wordpress build and install it in a subdirectory of a Nuxt project?
I had this previously on my just html based site so that the WP blog would show up at /blog, and I want to do the same.
I have a folder "blog" that contains the Wordpress files.
For Wordpress
Being the bain of my existence - as far as I remember, you can move the default installation (normally in root), into a folder. All files, etc, and it should still work.
For Nuxt
You can technically deploy your Nuxt project to the root, and have a wordpress site live in that sub-folder.
Configuration
Lastly, you would need to ensure the Nuxt routing allows passthrough to that folder.
Possible Caveat
The main issue I can think of may be with the deploy for the Nuxt project, and ensuring that any custom folders on the "server" stays intact for deploy.
I've set up Gatsby with Wordpress, but now I'm trying to figure out how the workflow of adding new content to the site via WP and having it show up as static markup on the server would work. Is there's a recommended way to automate the process building new WP content?
I'm guessing something like this would happen but not sure what hooks or tools already exist.
Publish a new piece of content via Wordpress on the server.
A Gatsby build kicks off. This would pull in [all] WP content and rebuild the [entire] website.
Push [move] the built static files to the web root on server
I'm also not clear on if Gatsby monitors the WP API for changes in real time or does it only do one request initially on startup?
Gatsby does not monitor WordPress. You need to set up a webhook on the WordPress side to notify your build process whenever content has changed.
For our project we decided for a Symfony app and a WordPress blog. It basically runs an entire installation of WordPress as a subdirectory called /blog inside the /web folder of Symfony.
We setup a quick coming soon page on www.example.com/ (Symfony Route: /) and kept running WordPress blog on www.example.com/blog/
Details about that setup on my question about WordPress as a Symfony subdirectory:
WordPress As A Symfony (Symfony3) Subdirectory
Over the course of development we let Symfony power the REST API and developed the application frontend with ReactJS. I am very unsure about the deployment. How will this work?
Note: I can't display WordPress as a React frontend and WordPress REST API because over 200 posts are now designed using a page builder provided by the theme (Lesson learned).
What options do I have?
You have to create a minified version of the React app and load it from a twig template. If you are using any react router, you will have to deal with the base url of your panel to make the urls be valid.
For instance, if you develop with a local server:
localhost:3000/my/fancy/panel
in production can happen that this url becomes
www.yourdomain.com/users/panel/my/fancy/panel
You you have to configure your router and routes to prefix /users/panel in production environment.
In my case I inject that base url in the tpl or twig and the app doesn't need to care about the environment.
Your app needs to display the Wordpress posts?
I have created an application on Openshift adding a Wordpress cartridge which I have also installed my plugins and themes.
That is all right, but now I would like to add some custom application to my domain. I have already uploaded my custom application with "git push" to my Openshift application.
Now I realised that my default Wordpress cartridge is located in app-root/repo/php/ and my custom application is in app-deployments/current/repo/php/.
When I access my website through my browser I access my Wordpress website which is located in app-root/repo/php/ but I would to know how to also access my custom application which is in app-deployments/current/repo/php.
So when user access http://app-name-domain.rhcloud.com/ the server brings the wordpress website and when user access http://app-name-domain.rhcloud.com/my-custom-application, the server should bring him my custom application.
If you want to add another application to the same gear as your wordpress blog, then you should do a custom wordpress installation instead of using the wordpress openshift quickstart. That quickstart does some trickery in the background to download wordpress, install it, and do some symlinks to run it. You would be best off setting everything up custom in your php directory in your git repo and running it yourself the way you are describing how you want it to run.
I had my static site with which WordPress blogs were integrated. Now I have made a Grails application with which I want to integrate those WordPress blogs.
I had put the WordPress folder copied from my previous site to the web-app folder of my Grails application. But I am not able to access the WordPress folder, as when I hit URL - http://localhost:8080/myApplicaiton/wordpress/, it shows this error:
Error 500: java.net.SocketTimeoutException: Read timed out
Also, in my urlMappings.groovy one of the mappings I need is
"/$generalPageURL"(controller:'myConroller', action:'myAction')
And if I put in the above mapping, all requests for WordPress goes to myAction of myController. Is there any way out to still reach the WordPress folder defined inside web-app folder with the above mapping?
This may sound silly, but your WordPress blog need PHP in order to run. You maybe better off using an HTTP server like Apache with PHP on the front and use either a mod_proxy or mod_jk type of configuration to connect the two applications (Grails and WordPress) together. That way your users can see http://www.yoursite.com/wordpress and http://www.yoursite.com/grailssite, with the HTTP requests being handled by Apache and then have it pass the Grails part off to Jetty/GlassFish or whatever you are using.
I think you would need to do this in reverse order config apache to redirect to php site not the grails to redirect to apache server.