I work on a large project built on Magnolia CMS and FreeMarker templates and I want to add React to it. Is it possible to integrate React components and grow gradually until the whole project is React based? I looked for this information but the resources are quite limited in this area.
Have you had a look at this one? https://docs.magnolia-cms.com/product-docs/6.2/Developing/SPA-development-and-Magnolia/Mapping-between-Magnolia-and-SPA-components.html#_mapping_between_magnolia_and_reactjs
Basically, you can do the mapping between Reach and Magnolia components as described above.
Related
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!
To briefly describe my goals --
I have an external React component library of ~70 React components, which feeds a web frontend (Websphere Commerce site, which pulls in Experience Fragments via AJAX calls to get the fragment HTML), and also a React Native app. So for the web, AEM is basically the content engine which feeds our headless frontend.
I'd like to use those same React components to feed the AEM Experience Fragment authoring experience, instead of having to rebuild each React component as an HTL template within AEM -- it's too much overhead to maintain a completely separate component library of HTL templates
By following the official Adobe tutorial here, I see how it is possible to map React components to the Content Fragment authoring experience. By which I mean, if I go to AEM Home > Sites > (my site) > create a new fragment, the component I drag in is fed by a React template. I can tell, because the markup matches what is in my BasicComponent.js React template in ui.frontend, and not the basic-component.html template in ui.apps.
But, if I go to AEM Home > Experience Fragments > create a new fragment, that same BasicComponent component will pull from the basic-component.html file in the component folder (next to .content.xml), instead of from BasicComponent.js
I'm new to AEM, so hopefully the above makes sense. I know I am missing something pretty fundamental re: how Experience Fragments differ from Content Fragments (if that is the right term). I've spent a lot of time Googling around for information, but I'm finding that my own ignorance is making it difficult for me to determine if what I'm reading is or is not a clue to solving my issue.
This is the repo that I pulled down to experiment with: https://github.com/drginm/aem-react-simple-example
Any help much appreciated! I'm sure I'm not the only AEM newbie looking for an approachable model for handling this situation.
Experience Fragments is not recommended used with ajax html in headless architecture, it should be exposed via sling model exporter in json format for the react consumption.
To edit and modify the experience fragments AEM doesn't provide any APIs, AEM developer should give custom REST APIs to do the changes.
I would recommend to go with the content fragments where the CRUD operation is possible via Assets api in AEM.
References
Difference between experience fragments and content fragments
ASSETS API for the Content Fragments
I am working on a React-Python/Flask app which takes input bpmn diagram image from user & through python scripts convert it into bpmn file which then can be downloaded through flask api on user's device. I am working on react UI. Now i have to edit the diagrams & apply some visualization to them. So how can i integrate yFiles for html BPMN editor in my app. I have already downloaded its evaluation package from yworks.com & integrated the pack in React following the demos. But now i am stuck because there are not much tutorials available specifically for yFiles with react. When i searched for it, i found lots of tutorials of bpmn.js with react. Please help me with how can i go about it. I am new to yFiles I have looked into yFiles evaluation pack tutorials and i still dont know how to go about it in react. Also i have to use yFiles only due to client's requirement. Thank you for any help.
yFiles for HTML is not a React component - in fact it's a plain JavaScript component, that is not based on any third party framework or even software.
This doesn't mean that you cannot integrate it into React or Angular or Vue.js or any other well-behaved JavaScript client framework. In fact yFiles has been built to support the integration into all of these frameworks and if it doesn't work with a specific framework, this usually indicates a short-coming or more likely a bug in the third party framework, rather than in yFiles! After all yFiles is just this: plain JavaScript that manages a part of your HTML5 DOM (one div element and all it children, to be precise), a few lines of CSS and the rest is just JavaScript. If your UI library can provide these basic requirements (and React does, of course), yFiles can be made to run with that framework.
As you said, there are these various integration samples available that show how to integrate third party frameworks and yFiles (both with yFiles being a "client" as well as yFiles hosting DOM snippets created and maintained by these third party frameworks: https://github.com/yWorks/yfiles-for-html-demos/tree/master/demos/toolkit
For React, there is actually an additional repo on GitHub (which is not part of the evaluation package): https://github.com/yWorks/yfiles-react-integration-basic
React is very opinionated about the way an application or component should work. yFiles does not follow the React approach (and I honestly believe it would be a bad idea if it did), but the component you build can. The idea is to create a custom React component that internally uses yFiles for HTML for the visualization, the editing, and the handling of the BPMN editor. Just like you would encapsulate a native HTML5 textarea and two buttons into a React component, you encapsulate the "div" that is used by yFiles to manage the BPMN visualization and editor.
The BPMN demo does not use React. In fact it uses plain old HTML and does not use any real framework for the UI. This means you need to (and can) take that code and wrap it into a custom React component.
With the node module version of yFiles for HTML and the es6 style sample code, this should not be too difficult. After all it's just JavaScript without any further dependencies.
There are no additional tutorials for yFiles in the context of React. However that should not be much of a problem as any tutorial that shows how to wrap a generic JavaScript component or how to create a new one from scratch should be applicable.
If you run into a specific issue, post your question here (if it's about React) or contact the support team at yWorks if you are sure this is a problem specific to yFiles and not a generic JavaScript problem. Of course StackOverflow might work, too, in the yFiles case, however there aren't that many yFiles developers that hang around at StackOverflow, I think. Most of the time it's me or someone from the yWorks team, anyway.
I am trying to create a complex CRUD React Application using Gatsby JS. The ability for the user to Create Posts, Edit Posts, Delete Posts will also need to be available. This app will have many users. We are not using a third-party CMS. Everything will be done within the Gatsby App. There will also need to be several different pages that will need to handle state, display, and sort the different posts based upon options. My question is, is this sort of project overload for Gatsby JS since it breaks the page model? Gatsby doesn't have a native way to generate dynamic routes or views, only pages. Its sort of a social networking app, is Gatsby JS the wrong tool for the job?
You can create pages "dynamically" using the createPages API.
https://www.gatsbyjs.org/docs/node-apis/#createPages
There's also a great series of videos from Scott Tolinski that demonstrate the use of this API.
However, GatsbyJS is a static static site generator, it's designed for performance and more content-based sites. The only way you're going to get CRUD functionality is through API calls from the front-end which could have some security implications that you need to consider.
As an alternative, you might want to take a look at Next.js. Same kind of idea but the pages are served by Express.js rather than just served off the file system so you have a lot more options for more dynamic sites.
In my case I am trying to create SEO ready content from Contentful pulled into Gatsby. I've tried to integrate the community i18n plugin with the Contentful example here: https://github.com/mccrodp/gatsby-contentful-i18n/pull/1
I've seen the more general questions relating to i18n in Gatsby and the blog post Building i18n with Gatsby which does not use the community plugin, nor provide a linked repository example. However, I cannot understand how to integrate the community plugin gatsby-starter-default-i18n with dynamic content via a CMS, such as the Using Contentful Example.
I guess it boils down to how to manage layouts dynamically together with templates and the gatsby.node.js file, rather than the static example we have at the moment that does not use templates. An issue was raised here previously, on i18n plugin repo working with gatsby-source-contentful, but it seems inactive at the moment.
Any help greatly appreciated. I don't need to use the community plugin, just a SEO ready solution for indexed, dynamic i18n content paths. Thanks!
This involves using node_locale in createPages fn in gatsby.node.js to set the locale based paths. Then you can use this in combination with dynamic sources. For example, I have created starter repos for markdownRemark and Contentful:
https://github.com/mccrodp/gatsby-starter-contentful-i18n
https://github.com/mccrodp/gatsby-transformer-remark-i18n