25$ Bounty | Local Development: Cloudflare Worker (HonoJS) Accessing R2 Files

aadeshkulkarni commented 1 month ago

Scenario:

Our backend is a cloudflare worker. It's a serverless architecture. Cloudflare also provides R2, an object store, like AWS S3, to manage file uploads.

When we upload a file from production instance, the file gets uploaded to the R2 bucket successfully, and a key is generated. To access this uploaded file, we can setup subdomains that facilitate a base-url that can be used for the file downloads.

file-path = subDomainUrl + key

wrangler.toml file > R2_SUBDOMAIN_URL

Here is the catch:

When we upload a file from dev mode (locally), the file gets uploaded to the local cache (within .wrangler/state/../R2/blob) instead of the R2 bucket. Now, To access this uploaded file, we need a url. Without the url, we cannot generate a file path.
And without the filepath, we cannot access the file on the frontend.

I'd like to find a solution that allows me (developer) to test my Worker's upload & download file functionality with Cloudflare R2 during local development.

For example, from local dev instance, A user should be able to successfully upload their profile picture and should be able to access the profile picture as a url.

Use CloudFlare R2 only

Points to consider:

frontend/src/config.ts > FF_IMAGE_UPLOADS = false - will disable the upload feature.
wrangler.toml > The configuration file for Cloudfare wrangler
backend/.wrangler > will contain uploaded file blobs when app is running using npm run dev

aliraza556 commented 1 month ago

Hi @aadeshkulkarni, Could you please assign me?

aliraza556 commented 1 month ago

@aadeshkulkarni, I have already set up the project. Could you please assign me the next task?

darshanmodi13 commented 1 month ago

@aadeshkulkarni Can you please describe in detail the reproduction steps again?

aadeshkulkarni commented 1 month ago

@aliraza556 - Assigning it to you. As this is time-critical issue with a bounty, You will have 48 hours to come up with a solution. If you're unable to solve it by then, you will be unassigned automatically, so that someone else can pick it up.

aadeshkulkarni commented 1 month ago

@aadeshkulkarni Can you please describe in detail the reproduction steps again?

Step 1: Run the backend & frontend server locally. Step 2: Ensure that you comment Production link for BACKEND_URL and uncomment the local link for BACKEND_URL in frontend/src/config.ts file Step 3: Spin up the frontend & backend using npm run dev in both frontend and backend folders. Step 4: Open the app on localhost:5173 and Signup, signin. Step 5: Go to Profile (from top right) > About > Update profile picture > Save

After saving, IDEALLY, you should be able to see the updated profile picture everywhere in the app. But, that won't happen on Dev mode.

The challenge is to make this Step 5 work locally using cloudflare R2.

aliraza556 commented 1 month ago

@aliraza556 - Assigning it to you. As this is time-critical issue with a bounty, You will have 48 hours to come up with a solution. If you're unable to solve it by then, you will be unassigned automatically, so that someone else can pick it up.

@aadeshkulkarni, Ok

aliraza556 commented 1 month ago

Hi @aadeshkulkarni, I tried to set up the project locally, but I am facing an issue connecting to the database. Could you please help me with this?

.env file: