Integrating Wordpress with the existing react application - reactjs

I have a Wordpress blog and hosted in the domain blog.domain.com now I want to move this my main domain which is domain.com/blog , the main domain run the web app which is built with react js and we use nginx as our web server to run both the application.
How can I integrate the Wordpress with the existing react application do let me know if you have done something on similar work.
We want to integrate the blogs which is in wordpress as SEO friendly but we couldn't achieve it with react js and WordPress.

You should be able to host the React app in WordPress using the ReactPress plugin which provides everything you need for it to work without custom build configurations. This will let you sort out your SEO whilst still hosting the functional React app.
ReactPress Plugin Site

Related

Strategy for deploying finished React app in Wordpress

I'm developing a web application using React and WordPress as a headless CMS, since WordPress as a backend is easy for my client to access and change. The React app is effectively finished. It taps the REST API on WordPress, gets all of my custom post types, and displays them nicely in the app. But I am unsure of how to get WordPress on the server to serve the React app in the root directory instead of the default theme template it does now. I have my React app on my local machine, and WordPress is installed server-side.
I've seen the plugin ReactPress, but I'm not sure that applies to me here. I don't need a local installation of WordPress (as best as I can tell) - the app already taps the API and is fully functional. Also, I do not want a slug to serve the React App as ReactPress seems to want. All I need to do is make it so that WordPress will serve the React app when the root directory of the site is accessed.
If anyone has any pointers on how to accomplish this, I would be very grateful!

how to make google bots crawl my react website with dynamic urls and display them in google

I have this website were we can create new questions. Whenever a new question is created a new url is generated I want google to crawl my website everytime a new question is added and display it in google.
I have my front end in react js and backend in express js.
My front end is hosted in firebase and backend in heroku.
Since I am using javascript and my urls are all dynamicly generated google does not crawl or index them.
Currently I am writing all dymaicly created urls into a file in my root folder in backend called sitemap.txt.
What should i do to achive this?
my sitmap link
https://ask-over.herokuapp.com/sitemap.txt
my react apps link
https://wixten.com
my express.js link
https://ask-over.herokuapp.com
i want to add
https://ask-over.herokuapp.com/sitemap.txt to google search console
In fact create-react-app is the wrong tool when SEO matters. Because:
there is only one HTML file
there is no content inside the single HTML file
heavy first load
etc, [search about reasons of using nextjs a good article
SPAs are the best for PWAs, admin panels, and stuffs like this.
But take a look at https://nextjs.org/docs/migrating/from-create-react-app. And my suggestion is to make some plans to fully migrate to Next.js.
Also, search about react SEO best practies and use the helpers and utilities like React Helmet.
create-react-app is not the way to go if you are going for a seo friendly website.
if it's behind a login screen you can go with create-react-app.
if the site is a blog or documentation site , I would suggest you migrate to nextjs or gatsby js or if it's a very small webpage go with raw html, css , js
It's not possible for Google or any other web crawler to crawl your SPA Websites. The best way to fix this is either to use Server Side Frameworks like Next.js or use pre-rendering and redirect crawlers to pre rendering server instead of main website.
You can checkout prerender.io, it has the open source version as well, you can run it on a seperate server and use one of the snippets/plugins for your web server (apache/nginx/others) to redirect requests to different upstream server.
I've been using it for one of my projects (e-commerce store) built on VueJs and it works like a charm.
To understand the basics, what it does is it'll load your website in a browser, and cache the rendered code in it's database/cache, and when any crawler visits your website they'll be redirected to cache which is the generated html page of your website, and crawlers will be able to read everything smoothly.

Highly customizable CMS for existing NextJS app

I have an existing Nextjs and React Application with MongoDB Backend...Client wants to edit website, no code. How do i integrate a CMS?It's a corporate site...client wants to be able to manipulate everything,,,Navbar, content etc
You can use Sanity and I've worked with it.
How to configure sanity with next js

Need to Deploy Laravel + Reactjs (SEO friendly ) application

I have to create an application where users will have their unique usernames and profiles like "website.com/JohnDoe". for that the client asked me to develop it in any good PHP framework and client also need an android/ios app (which he disclosed after 2nd meeting) . so I was(before 2nd meeting) going to use Laravel totally. but since he said he wanted a mobile app too, so I decided to use Laravel as backend API, for Web frontend I will use Reactjs and for Mobile I would use ReactNative ( I've done same before). since Laravel provides react support so my I was planning to use React within the laravel.
Then client said he is more concern about SEO of his website. so I had two options
Use laravel as API provider only. and create ReactJS app totally separate from Laravel.
In this case I will need Nodejs server. Then I thought If I have a nodejs server than why would I go for laravel, I could use Express.
Use ReactJS within laravel and use any SSR package to cope with ssr.
If I am going for second option, can anyone point me to already live website which uses React Helmet SSR or Laravel-react-ssr?
Laravel react-ssr: https://github.com/spatie/laravel-server-side-rendering
React Helmet-ssr: https://github.com/nfl/react-helmet#server-usage
I have read both, and I am too confused. I am beginner in both Laravel and React(node) so I am unable to understand what both are proposing.
i deployed your 2 option mentioned let me give you the site https://v3.topviewnyc.com/, i created a microservice which would take care of SSR besides my hooks and components are build on react so am totally able of enjoy the SPA frontend side with react using components and get data via laravels API

Create Lumen 5.5 - React Project from scratch

I need to create a new project using reactJS and lumen 5.5 and i was installed lumen 5.5 and reactJS. but then i was stuck, so i have some questions:
where is the position of the reactJS folders should be?
how i can add a react component in the home page with data-source from lumen api?
how we can integrate between them?
what the content of package.json should be?
i will appreciate any clear answer, because i was spent alot of time to make an integration between them without any results.
Lumen isn't intended to have views, it's primarily intended to be a lightweight API framework. If you want views and a front end, you should use Laravel. Which also comes with a react preset to get you started right away. Laravel also has API routes built in that you can use for your API. The good news is that your code from Lumen should be fairly easy to transfer over to a Laravel project.

Resources