Highly customizable CMS for existing NextJS app - reactjs

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

Related

Integrating Wordpress with the existing react application

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

How to add existing react js app to saleforce?

I have a react js app built long time ago that uses 3rd party libraries and APIs, now I want to add this app to saleforce. Is there a way to add the existing react js app or do I have to build a new app using the saleforce development tools? Any advise and help is appreciated.
Can you live in an iframe? There's lightning:container tag that could help you. Search questions or blogs that mention it, on SO and on dedicated https://salesforce.stackexchange.com/. Iframe sounds meh but there are ways for it to communicate with parent ("canvas apps" in documentation - and it has nothing to do with <canvas> tag), silently log in to SF, use REST API...
You could try to rewrite your app to native Aura/LWC but you won't be able to call APIs directly from JS. You'll have to pass through SF server-side language called Apex. Which is doable but more for you to learn. There are some more restrictions, although light DOM and LWS help with these, many things Locker service blocks are OK in LWS.
There's also hybrid approach with loading your app as a library?

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.

How do you add React as NPM package to Apostrophe v3?

we're working with Apostrophe CMS v3 and we're trying to add some custom apps to the pages with React. I was able to add components inside using the React CND scripts and loading components as script files in views/layout.html. But it probably isn't best practice. I was wondering if theres a way to add React apps into Apostrophe using npm packages and imports. Thank you very much!
It looks like this question was cross-posted to the Github Discussions forum: https://github.com/apostrophecms/apostrophe/discussions/3393
The response there from the lead software architect:
You can do it in two ways. Which is best depends on your needs.
If you are building a single-page React app but you need some dynamically edited CMS content, you should most likely keep building your React app just as you have been, and use Apostrophe's REST APIs to access piece and
page CMS content where you need it. See the documentation on our REST APIs.
On the other hand, if you are building a pretty normal CMS-driven website
but you have a few experiences inside your pages that would benefit from
embedding a React application, you should carry on with your Nunjucks
templates for Apostrophe as you normally would to build a website with
Apostrophe, and in addition set up a webpack build of your own to build
your React apps, and push the output to a ui/public/build.js file nested
in any module of your Apostrophe project. Any .js file found in a
ui/public subdirectory of a module is automatically included in the
frontend bundle generated by Apostrophe.
In that situation, you can still use the REST APIs to access data from the
React app, or you can pass data via data attributes in your markup. If you
do the latter, the | jsonAttribute Nunjucks filter is helpful to turn it
into a string that is safe for incorporation into a quoted attribute in
your markup.
Hope that helps!

How to integrate zoho crm webforms(Ex:Contact us) in Reactjs PWA application

I have a generated Zoho CRM webform for Contact us. I need to integrate that form into my react application and submit user inputs. I can get the iframe version, javascript version, and HTML/CSS version of the generated code. I want to know which one is best for the Reactjs PWA application and can we use this directly with react. Can someone help me with this?
I would suggest avoiding iframe altogether. You might find a lot of issues when dealing with cross-domain artifacts and policies. If you want to customize the look and feel of the form, better go ahead with the HTML & CSS version. JavaScript file will be an external dependency. It also would be a hacky / non-react way.

Resources