Setup Worker

Since we need SSR support, all of our traffic must go through a Cloudflare worker. Follow the instructions below to set it up.

  • Log in to your Cloudflare account.
  • Navigate to Compute (Workers) and select Workers & Pages.
  • Click the Hello World button, set the worker name to example-new, and click Deploy.

Configuration

Once the deployment is complete, follow these steps to set up the runtime configuration and routes:

  • Go to the Settings tab, and under Runtime, set Placements to Smart.
  • In the Domains & Routes section, click + Add and add two entries.
  • For the first entry, set the Zone to example.com and the Route to https://example.com/*.
  • For the second entry, set the Zone to example.com and the Route to https://www.example.com/*.

Setup Worker Code

To set up the worker code, click the Edit Code button and replace the existing code with the following:

addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const originalURL = new URL(request.url)
  const path = originalURL.pathname
  const newURL = originalURL.href
  const modifiedRequest = new Request(newURL, request)
  const response = await fetch(modifiedRequest)

  if (path.includes('/assets/') == false && path.includes('/ads.txt') == false && path.includes('/robots.txt') == false && path.includes('/sitemap.xml') == false) {
    if (response.headers.get('content-type').includes('text/html')) {
      const modifiedHTML = await modifyHTML(response, originalURL)
      return new Response(modifiedHTML, {
        status: response.status,
        statusText: response.statusText,
        headers: response.headers
      })
    }
  }
  return response
}

async function modifyHTML(response, originalURL) {
  const originalHTML = await response.text()

  let slug = originalURL.pathname.split('?')[0].replace(/^\/+|\/+$/g, '')

  let slide = originalURL.searchParams.get('slide');
  slide = (slide == null || slide == '') ? '' : slide

  let noads = originalURL.searchParams.get('noads');
  noads = (noads == null || noads == '') ? '' : noads

  const formdata = new FormData()
  formdata.append('slug', slug)
  formdata.append('slide', slide)
  formdata.append('noads', noads)
  formdata.append('link', originalURL.href)

  let requestOptions = {
    method: 'POST',
    body: formdata
  }

  const data = await fetch(originalURL.origin + '/model/h3/call', requestOptions)
    .then((response) => {
      return response.json()
    })

  let modifiedHTML = originalHTML.replace('</script>', '</script>' + data.meta + data.header)
  modifiedHTML = modifiedHTML.replace('</body>', data.footer + '</body>')

  let html = '<style>\n' + data.css + '\n</style>\n';
  html += '<script>\n' + data.ads + '\n</script>\n'

  delete data.meta
  delete data.header
  delete data.footer
  delete data.css
  delete data.ads

  html += '<script>\nconst XD = ' + JSON.stringify(data) + ';\nwindow.XD = XD;\n</script>\n'
  modifiedHTML = modifiedHTML.replace('</head>', html + '</head>')

  return modifiedHTML
}
✨ Configuration! The frontend worker is now ready.
Table of Contents