PWA Studio - How to Customise the pagebuilder component in storefront?

Question

Used https://developer.adobe.com/commerce/pwa-studio/tutorials/ for creating the PWA STUDIO Store Front. I need to customise the pagebuilder react components. Can anyone help me in this, since am new to pwa studio and magento ?

Answer 1

in the local intercept add targets of the page builder like this

module.exports = targets => {
targets.of('@magento/pwa-buildpack').transformUpward.tap(def => {
    def.staticFromRoot.inline.body.file.template.inline =
        './static/{{ filename }}';
});
targets
    .of('@magento/venia-ui')
    .richContentRenderers.tap(richContentRenderers => {
        richContentRenderers.add({
            componentName: 'PageBuilder',
            importPath: 'src/pagebuilder'
        });
    });
};

where import path refer to the pagbeuilder source which can be diretly copied from the node_modules to our src folder.

Hence we can customize the padebuilder content types and also can add custom content types as per requirements.