rdutton Comments - Answer Overflow

rdutton

•Created by veeque on 1/29/2025 in #pages-help

What's the difference between Cloudflare Pages and Workers Frameworks?

I have a monolithic (Remix framework) app that is in production on Pages. Because Pages lacks certain things like queue consumption I've had to supplement my app with workers to fill in these gaps. This kind of ruins the goal of keeping everything in one deployment. It's now possible to run Remix on workers, most likely due to the addition of static assets support, so I'm looking to switch from pages to workers. IMO unless there is something you absolutely need that pages provides, use workers.

6 replies

CDCloudflare Developers

•Created by Rick on 1/24/2025 in #workers-help

unable to lazy load images

Did you manage to work out what was going on? To me it sounds like a front-end issue rather than a workers one, particularly since there is nothing in the network tab. Please note, when loading="lazy" is specified on an image element, the browser only loads the resource if the element is 'in view' and this includes if the element has no natural height or width. Given your example code it's indeterminate whether the images have any width/height allocated to them, so try setting the height and width on them and see what happens. e.g. <img src="/avatars/32606955_7942348.jpg" alt="logo" loading="lazy" height="100" width="100"/>

4 replies

CDCloudflare Developers

•Created by UfoX1 on 1/23/2025 in #workers-help

Images on CF

No probs at all. Been meaning to research the cache myself, looks to be quite useful.

16 replies

CDCloudflare Developers

•Created by UfoX1 on 1/23/2025 in #workers-help

Images on CF

Noting that you need to specify a cache-control header on the response stored using caches.default.put

16 replies

CDCloudflare Developers

•Created by UfoX1 on 1/23/2025 in #workers-help

Images on CF

const html_form = "<form method=post action='/' enctype='multipart/form-data'>Image Attachment<br/><input name='upload' type='file' accept='image/png'/><br/><button type=submit>Upload</button></form>";

export default {
    async fetch(request, env, ctx) {
        const url = new URL(request.url);
        
        if (url.pathname === '/test.png') {
            let cache = caches.default;
            const cache_response = await caches.default.match(request);
            if (cache_response) { return cache_response; }
            const response = new Response(await env.TESTKV.get("test.png", "arrayBuffer"), { headers: { 'content-type': 'image/png', 'Cache-Control': 's-maxage=10' }, });
            await caches.default.put(request, response.clone());
            console.log("Cache updated");
            return response;
        }
        
        let upload_detail = "";
        if (request.method === 'POST') {
            const form = await request.formData();
            const file = form.get('upload');
            let value = await env.TESTKV.put("test.png", await file.arrayBuffer());
            upload_detail = "File uploaded successfully<br/><img src='test.png'/>";
        }

        return new Response(upload_detail + html_form, { headers: { 'content-type': 'text/html' }, });
    }
};

16 replies

CDCloudflare Developers

•Created by UfoX1 on 1/23/2025 in #workers-help

Images on CF

https://developers.cloudflare.com/workers/runtime-apis/cache/

16 replies

CDCloudflare Developers

•Created by UfoX1 on 1/23/2025 in #workers-help

Images on CF

The 2nd example avoids base64, so that is better and more efficient, however every request is still going to read from KV and incur cost in high volumes. To avoid that you will need utilise the Cloudflare cache. I haven't used it, but from what I can tell the cache is effectively a CDN you can manipulate via a worker.

16 replies

CDCloudflare Developers

•Created by UfoX1 on 1/23/2025 in #workers-help

Images on CF

No probs 🙂

16 replies

CDCloudflare Developers

•Created by AI on 1/21/2025 in #workers-help

browser rendering api pricing

Agree the cost is high, so is the convenience. Building your own stable Puppeteer/Playwright service that also scales can be tricky.

3 replies

CDCloudflare Developers

•Created by UfoX1 on 1/23/2025 in #workers-help

Images on CF

Sorry, just saw your comment re base64 and reading the docs, KV supports arrayBuffer, so updated version:

const html_form = "<form method=post action='/' enctype='multipart/form-data'>Image Attachment<br/><input name='upload' type='file' accept='image/png'/><br/><button type=submit>Upload</button></form>";

export default {
    async fetch(request, env, ctx) {
        const url = new URL(request.url);
        
        if (url.pathname === '/test.png') {
            return new Response(await env.TESTKV.get("test.png", "arrayBuffer"), { headers: { 'content-type': 'image/png' }, });
        }
        
        let upload_detail = "";
        if (request.method === 'POST') {
            const form = await request.formData();
            const file = form.get('upload');
            let value = await env.TESTKV.put("test.png", await file.arrayBuffer());
            upload_detail = "File uploaded successfully<br/><img src='test.png'/>";
        }

        return new Response(upload_detail + html_form, { headers: { 'content-type': 'text/html' }, });
    }
};

16 replies

CDCloudflare Developers

•Created by UfoX1 on 1/23/2025 in #workers-help

Images on CF

Not sure about hono.js, but this is a standard worker demo using KV for one file to keep it simple. It assumes PNG. KV on free has 1GB storage with each value up to 25MB. With high reads you'd want a CDN of some kind.

const html_form = "<form method=post action='/' enctype='multipart/form-data'>Image Attachment<br/><input name='upload' type='file' accept='image/png'/><br/><button type=submit>Upload</button></form>";

function base64Encode (buf) {
    let string = '';
    (new Uint8Array(buf)).forEach((byte) => { string += String.fromCharCode(byte)});
    return btoa(string)
}
  
function base64Decode (string) {
    string = atob(string);
    const length = string.length;
    const buf = new ArrayBuffer(length);
    const bufView = new Uint8Array(buf);
    for (var i = 0; i < length; i++) { bufView[i] = string.charCodeAt(i) }
    return buf
}

export default {
    async fetch(request, env, ctx) {
        const url = new URL(request.url);
        
        if (url.pathname === '/test.png') {
            return new Response(base64Decode(await env.TESTKV.get("test.png")), { headers: { 'content-type': 'image/png' }, });
        }
        
        let upload_detail = "";
        if (request.method === 'POST') {
            const form = await request.formData();
            const file = form.get('upload');
            let value = await env.TESTKV.put("test.png", base64Encode(await file.arrayBuffer()));
            upload_detail = "File uploaded successfully<br/><img src='test.png'/>";
        }

        return new Response(upload_detail + html_form, { headers: { 'content-type': 'text/html' }, });
    }
};

16 replies

CDCloudflare Developers

•Created by kroks on 1/21/2025 in #workers-help

Workers design advice - running multiple curls and processing responses #coding-help

It's not actually the best implementation of parallel requests (fetch + r.text()) should be moved into an independant function for each request, but easy to read this way.

6 replies

CDCloudflare Developers

•Created by kroks on 1/21/2025 in #workers-help

Workers design advice - running multiple curls and processing responses #coding-help

6 replies

CDCloudflare Developers

•Created by kroks on 1/21/2025 in #workers-help

Workers design advice - running multiple curls and processing responses #coding-help

Having a bit of trouble formatted the code, so you'll need to add backticks around the html_form variable contents

6 replies

CDCloudflare Developers

•Created by kroks on 1/21/2025 in #workers-help

Workers design advice - running multiple curls and processing responses #coding-help

const html_form = 
    <form method=post action='/' >
        Key : <input type=text name=key value=''><br/>
        Email : <input type=text name=email value=''><br/>
        <button type=submit>Run</button>
    </form>
;

const jobs = [
    "/process?value=1",
    "/process?value=2",
    "/process?value=3",
];

export default {
    async fetch(request, env, ctx) {

        const url = new URL(request.url);

        // test route to test remote requests
        if (url.pathname === '/process') {
            const value = url.searchParams.get('value');
            return new Response(parseInt(value)*2, {
                status: 200,
                headers: { 'content-type': 'text/plain' },
            });
        }
        
        if (request.method === 'POST') {
            const data = await request.formData();
            
            // do what is required with these values
            const key = data.get('key');
            const email = data.get('email');
            
            const job_promises = [];
            for (const job of jobs) {
                job_promises.push(fetch(url.origin+job,));
            }
            const job_responses = await Promise.all(job_promises);
            const job_results = await Promise.all(job_responses.map(r => r.text()));
            return new Response(job_results.join("\n"), {
                status: 200,
                headers: { 'content-type': 'text/plain' },
            });
        }

        return new Response(html_form, {
            headers: { 'content-type': 'text/html' },
        });
        
    }
};

6 replies

CDCloudflare Developers

•Created by kroks on 1/21/2025 in #workers-help

Workers design advice - running multiple curls and processing responses #coding-help

Based on scope so far you could implement all this in one worker pretty easily. There is effectively 2 'routes', so far. (1) Renders the form with email, key and 'bulk run' button (2) Responds to the form submission, does the work and returns the results You could separate the code these 2 routes simply by checking for 'GET' and 'POST' in the request. If you plan to expand on this functionality, then I highly recommend using an actual router e.g. itty-router (easy, small, Cloudflare appropriate) Given that you plan to make multiple requests, assuming the responses are not co-dependant then this situation is ripe for a parallel requests, meaning you can get all the responses simultaneously, up to 50 I think on the free plan and join them back together. Here is some sample worker code that will do effectively what I have described:

6 replies

Gaming

Programming