Uploading Images is Slow

When I want to add an image to this site, I have to:

• export the image from Apple Photos
• upload the image to Uploadcare
• copy the url, width and height from Uploadcare
• add the image to the markdown file

Let's make a serverless endpoint to make it easier

I want to build an endpoint that will:

• take an image
• upload the image to Uploadcare
• return the markdown text 
• I can then paste the markdown text into the markdown file

What options exist?

I'm going to use this project to explore backend options for this site.

Cloudflare Pages Functions → The Edge is Too Limited

While there is documentation to deploy Next.js Route Handlers via Cloudflare Pages, the runtime for the function is edge meaning I cant include the use of libraries I need to do the image uploading. (I did explore doing the image uploading with all native support but didnt want to get into the weeds using the Cloudflare crypto API to authenticate requests to Uploadcare.)

Supabase Edge Functions → You Gotta Use Deno

Supabase Edge Functions

Next.js Route Handlers and Vercel Deploy → You Gotta Deploy to Vercel

If I wanted to continue with Next.js Route Handlers and use them in a node.js runtime, then I would need to move deploying my site from Cloudflare Pages to Vercel.

Serverless and AWS Lambda → Yaml Infrastructure

Serverless and AWS Lambda

Option Choosen: Supabase Gives Room To Grow

What I choose for this project will set me up for building the next things. With a eye towards keeping things easy, Im learning towards using Supabase as the kinda batteries included option. I dont want to move off Cloudflare hosting to Vercel hosting just to get Next.js Route Handlers.

This allowed me to quickly add email magic link auth.

Building the Endpoint

• Setup VSCode muilti root workspace
• Setup import_map.json for deno imports in supabase/functions
• Setup npm run dev to spin up local supabase functions
• Figure out how I want to do auth with supabase functions
  • I want to only auth me. perhaps dont have "create user" on client. only create users by hand in supabase admin CLI. only support sign in on the client. can do this just with magic link too.
  • want to manage local-env auth different from prod auth
  • setup to handle magic link auth
• Turn on CORS, docs
• Give function access to Uploadcare secrets, docs
• Parse image from request body
• Upload image to Uploadcare and get id back
• Request image info from Uploadcare via id
• Return markdown text with image info
• Add a "copy text" button to the page
• [-] Setup functions to deploy on merge to main, docs on doing that with Github Actions → right now I just use this locally

Enchantments

• On /auth give a nice message on success/failure
• On /auth/verify give a nice message on failure, redirect to home on success

References

🌱 Projects

May 22, 2023

Current things that bring me joy to work on

Steps for Cocktail Photos

Jun 6, 2023

Build Image Uploader Endpoint the endpoint only runs locally for security the endpoint takes the image the endpoint returns the mardown text