CD
Cloudflare Developers•15mo ago
S0le (art commission open)

Integrating Static HTML Frontend with Worker Backend on Cloudflare Pages

Hey all, I'm currently working on a something that hosts a static HTML frontend on Cloudflare Pages, which will integrate with a backend service set up as a Cloudflare Worker. The ultimate goal is to embed the HTML in a webpage either as an element or iframe (due to CMS limits), users can click on it to activate the frontend and do some calculations. I've already written the backend in JavaScript and deployed it using Wrangler, and I have written the frontend which is just a custom HTML page that calls the backend to perform specific calculations based on user inputs. The frontend correctly sends data to the backend, and the backend successfully returns calculated results. However, I'm stuck on deploying the static HTML frontend to Cloudflare Pages. I've never worked with Cloudflare Pages before, and I'm a bit lost on how to integrate it with my existing Worker backend, all I've done is uploaded the static HTML, but the domain created from it cannot seem to resolve. Is there any information or past successes on this specific How do I deploy my static HTML to Cloudflare Pages and calling a worker from it? What's the best way to link this frontend with my existing backend worker? Thanks in advance!
2 Replies
JustinNoel
JustinNoel•15mo ago
For your backend, have you considered not deploying it separately using a worker but instead integrating it into the functions directory of your pages project? So basically your frontend could be hosted together with your backend. I would suggest a structure like this: 
|---- public
      |___ index.html
|---- functions
      |___ api
            |___ index.js
            |___ helloworld.js
            |___ howdyworld.js
            |___ fruits
                  |___ index.js
                  |___ apple.js
                  |___ banana.js
|---- public
      |___ index.html
|---- functions
      |___ api
            |___ index.js
            |___ helloworld.js
            |___ howdyworld.js
            |___ fruits
                  |___ index.js
                  |___ apple.js
                  |___ banana.js
If your frontend needs to call the API, it would do it like: https://myapp.com/api/index.js See: https://developers.cloudflare.com/pages/platform/functions/routing/ I added api to the path to make it easy distinguish between routes for the frontend and routes for the backend.
Routing · Cloudflare Pages docs
Functions utilize file-based routing. Your /functions directory structure determines the designated routes that your Functions will run on. You can …
JustinNoel
JustinNoel•15mo ago
but the domain created from it cannot seem to resolve.
Have you looked at adding custom domains to a cloudflare pages project? What does your DNS look like for this domain?
No description

Did you find this page helpful?