Git Product home page Git Product logo

Comments (7)

lukeed avatar lukeed commented on August 28, 2024 1

All good! It happens :)

PS I would suggest using router.mount so that you can omit the /api/ prefix inside all your API route definitions.

Also, I'm personally not a fan of service bindings. They're just an extra abstraction that makes you think about separation but is never actually separate. SO if I were you, I'd add a pre-build script inside the Pages project that produces the _worker.js file... I'm not familiar with Pages latest build rules/automations, so if they pick up a _worker.ts automatically, then great

from worktop.

lukeed avatar lukeed commented on August 28, 2024 1

My suggestion is to bundle the API code directly within your pages/_worker.js -- you get all the same performance benefits (but more, actually) since it's literally the same Worker/isolate w/o any fake/feigned separation between them

But ya, you might have other repo/Pages challenges to deal with first. Manual deployments will help you out a lot... relying on Pages build pipeline to react to new commits gets old fast (and really is what limits monorepos)

from worktop.

lukeed avatar lukeed commented on August 28, 2024 1

Come on in, water's warm

Image

from worktop.

vladinator1000 avatar vladinator1000 commented on August 28, 2024

Hi @lukeed, after some digging, it looks like the issue looks related service bindings. I've updated the issue description to include a full reproduction.

from worktop.

vladinator1000 avatar vladinator1000 commented on August 28, 2024

Oh crap I realized the URL hostname must match exactly for this to work...

In Pages I'm doing

    if (url.pathname.startsWith('/api')) {
      return env.API.fetch(request)
    }

But in the API I was doing

let router = new Router();

router.add('GET', '/', (_request, context) => {
	return new Response('Hello from Worktop!');
});

It didn't find an /api route so it returned "Not Found"...
Fixed it by changing the route like this

router.add('GET', '/api', handler)

I feel so stupid 😂

from worktop.

vladinator1000 avatar vladinator1000 commented on August 28, 2024

I agree... The only reason I'm using service bindings is because it runs faster because the bound worker runs on the same thread and bypasses the network.

The Pages advanced mode expects a "_worker.js" in the build directory, which I build in CI with this script:

import { $ } from 'zx'

let branch = process.env.CF_PAGES_BRANCH

let mode = branch === 'main' ? 'production' : 'staging'
await $`yarn vite build --mode ${mode} --ssr src/_worker.ts --emptyOutDir false`.pipe(
  process.stdout,
)

The _worker.ts ended up looking like this

// This is the entry point of the server
// https://developers.cloudflare.com/pages/functions/advanced-mode/
interface Env {
  ASSETS: Fetcher
  API: Fetcher
}

let handler: ExportedHandler<Env> = {
  async fetch(request, env): Promise<Response> {
    const url = new URL(request.url)

    if (url.pathname.startsWith('/api')) {
      url.pathname = url.pathname.replace('/api', '') // avoid adding the "/api" path on the other API worker

      let apiRequest = new Request(url, request)

      return env.API.fetch(apiRequest)
    }

    return env.ASSETS.fetch(request)
  },
}

export default handler

Honestly I want to have a monorepo where the API is part of the pages worker, but my project is multi-repo, started before Pages was a thing.

from worktop.

vladinator1000 avatar vladinator1000 commented on August 28, 2024

@lukeed don't tempt me... I'm afraid of getting lost in a monorepo tooling binge 😅

from worktop.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.