Comments (7)
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.
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.
Come on in, water's warm
from worktop.
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.
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.
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.
@lukeed don't tempt me... I'm afraid of getting lost in a monorepo tooling binge 😅
from worktop.
Related Issues (20)
- How to set multiple cookies? HOT 2
- Worktop Middlewares Example HOT 4
- Durable Objects example HOT 2
- The example of timing requests might be misleading HOT 1
- Using official Cloudflare types HOT 4
- Can I use Worktop with Fastly Compute@Edge? HOT 1
- Is it going to be official by cloudflare?
- Cache API and KV: Concerns/Questions/Usage HOT 1
- How to access `.env` with Wrangler 2 HOT 2
- Provide a "test" module HOT 4
- Serving HTML files HOT 6
- How to use with cron / scheduled event ? HOT 2
- Is `worktop@next` safe to use in production? HOT 2
- Add generic typing for Router.add handler
- The uploaded script has no registered event handlers. [API code: 10068] HOT 1
- Add sub-routers HOT 2
- Node 16+ ESM TypeScript error HOT 1
- `isCacheable` allowed cache by default if the `cache-control` header is empty may leading to a security flaw in ssg content HOT 2
- Cache `save(...)` does not correctly handle `no-cache` directive
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from worktop.