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!
Related
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
I am building a react native app with firebase auth and cloud storage, and I was just wondering if it is possible to make a dashboard for desktops to administrate the users/app? And if it does, how do I do this? Is it in the same build, or do I have to build a new "app" for adminpanel/dashboard?
This is my first time building the adminpanel/backend xD
While it's possible to build web apps with React Native, I wouldn't recommend it. The Layout of a desktop is just way too different from phones to build React Native Apps including web without constantly using Platform.OS. In your question, you even mention that you wan't the dashboard to just be available on the desktop but not on the Phone (which makes sense in my opinion). Since you seem to know a bit about React Native, it should be an easy thing for you to build the Dashboard as a different Application with React for the web only.
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.
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
So I'm trying to deploy my first React application live. It is my portfolio webiste. Anyways, everything is working fine except for my routes. Locally, Everything works fine. However, now that I've deployed the website my routes do not work. When you click on any of the links it says the url cannot be found on the server, and it throws a 404 error.
The application is hosted by namecheap, and they said they cannot see anything wrong from their end. I just have no idea what could be wrong then as it all works find locally.
My website can be found at andrewschubert.website and the github repo for this can be found at https://github.com/theschubinator/my-portfolio If anyone has any ideas what I'm doing wrong I would greatly appreciate it!
By the way, it is a React Application. There is no database or API, just strictly front-end. The only links that are actually working are the ones that redirect you to an area outside of my application...like my blog on medium.
I can see that you've been using react-router lib for your routing. It is based on HTML5 history API, which is not supported by every host out there. If you are talking about your portfolio website and it's not so much of and issue where do you deploy it, try out some different hosts (e.g. surge is great for deploying static sites: https://surge.sh/).
React applications are single page. Routing in React means changing the components displayed when user requests a different url. You will need an api.
On every client request you return the same "index.html" which will display only one component. By creating a controller in your server you can map "/contact" to "index.html#contact" and your hashrouter can return the ContactUs component.