Random Memes

Table of content

• Code
  • I just wrote a simple JS code to run on serverless which handles the fetch request.

First I started with memes I archived from various sources and uploaded them on a storage bucket.

Instead of using servers, I choose to go serverless now it was the hard part of choosing which one to use as many offer function as a service such as AWS Lambda, Azure Functions, Google Cloud Functions etc

So I choose Cloudflare Worker which is a serverless platform to run my run code because it has 0ms and runs on all Cloudflare DataCenters across the globe so that I won't be having any latency issues.

Now it was time to write code, first I checked the numbers of memes using ls | wc -l and put it in env variable along with the bucket endpoint.

Code

I just wrote a simple JS code to run on serverless which handles the fetch request.

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

async function handleRequest(request) {

    const response = await fetch(`${BASE_URL}${Math.floor(Math.random() * FILECOUNT)}.jpg`)
    const newResponse = new Response(response.body, response)

    // Custom headers for CORS
    newResponse.headers.append('Access-Control-Allow-Origin', 'https://random-memes.ml')
    newResponse.headers.append('Access-Control-Allow-Methods', 'GET')
    newResponse.headers.append('Content-Disposition', 'inline; filename="meme.jpg"')

    // Delete headers
    newResponse.headers.delete('x-bz-file-name');
    
    // Response
    return newResponse
}

The reset all was client side, so that's it was done api.random-memes.ml.

Then the rest was to implement on a client side, you can view that here random-memes.ml.