How to I proxy and modify a site

Is there an example of how I can deploy a new Next.js app, proxy a site, use the header and footer of that site, and then replace the main content with new react components?

Here is a crude and basic example.

In routes.js

  .match('/example-react-progressive-web-apps-ecommerce/', ({ proxy }) => {
    proxy('origin', { 
      path: '/',
      transformResponse: (res, req) => {
        const $ = cheerio.load(res.body)
        $('.section').remove()
        $('.hero').remove()

        $('.cta').before('<div style="height: 300px;">hi</div>')
        res.body = $.html()
      }
    })
  })

In xdn.config.js

// This file was automatically added by xdn deploy.
// You should commit this file to source control.
module.exports = {
    backends: {
      origin: {
        domainOrIp: 'www.moovweb.com',
        hostHeader: 'www.moovweb.com',
      },
    },
  }

Is there anyone else at Moovweb who can show how the inserted div can come from a react component.

1 Like

Moovweb team, it’d be helpful to add an example here: https://developer.moovweb.com/docs/api/core/interfaces/router_responsewriter.proxyoptions.html#transformresponse

We’ve logged XDN-7707 internally to create an example. Roughly the suggested process would be to, create a static page with the header and footer and then use that as the source of the SSR header and footer that stitch into the original (proxied) page. You would then need to add a call to hydrate the react header and footer.