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
Related
as the title suggests I was wondering if it's possible to integrate a component built in React with an existing Wordpress website. The component is only about 80 lines long, consisting of a with an image. The component itself was built as part of a create-react-app project. Any insights greatly appreciated!
What is the react component your using if its available in html5 like bootstrap components for example its unnecessary to use react app and craco together due to multiple issues in polyfills and webpack so its harder to maintain if your looking for something simpler it still works and has around 85kgithub users in 2022 .
https://github.com/dilanx/craco
examples of recent issues in stackoverflow
[craco-does-not-work-properly-with-react-scripts5-0-0][1]
[1]: https://stackoverflow.com/questions/71234041/craco-does-not-work-properly-with-react-scripts5-0-0
Yes, React can be used with WordPress, where the content on the front-end built with React is managed by WordPress CMS using the WP Rest API.
Just use the WP Rest API. Hope it helps.
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!
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.
I'm unable to figure out how to use #adobe/react-webcomponent in an AEM Maven multi-module project.
I have tried a similar tool which has a sample project, and it works, but I would much rather use Adobe's instead.
Currently I can not find much documentation on this tool other than the github page and cannot find any sample project at all that demonstrates how it is used.
An ideal resolution would be a working sample AEM Maven multi-module project that shows how to properly use #adobe/react-webcomponent to have React components available in AEM site editor. Thanks in advance for any help!
I don't have exactly what you're looking for, but I did some work with that in this branch of another Adobe project. It's about using a web-component to render a search box and a search results component written in React.
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.