Adding React to Apostrophe v3

[Miselrkba]

Hey guys, How do you add React into Apostrophe v3 through NPM packages please?

[boutell]

Hi Miselrkba, 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!

…

On Tue, Sep 7, 2021 at 2:27 AM Miselrkba ***@***.***> wrote: Hey guys, How do you add React into Apostrophe v3? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#3393>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAH27MC2BAPP3WGHTUHAGDUAWWGJANCNFSM5DRVBLNQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

-- THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

[Miselrkba]

Hello Tom,

I added the bundle from webpack to ui/public and it works like a charm.
Thank you very much.
I appreciate you taking the time explaing this.

Best of luck!