Cloudflare Developers•2y ago

Testing workers created by @cloudflare/next-on-pages

Hi! Workers have a really nice API (unstable_dev()) which allows me to start them locally and run e2e tests on the worker. https://developers.cloudflare.com/workers/wrangler/api/ I was wondering if it's possible to create a Next.js application (using @cloudflare/next-on-pages) which internally generates a _worker.js file combined from all the backend functionalty and test that worker with the same API as I do for regular CF workers? Has anyone done this?

API · Cloudflare Workers docs

Wrangler offers an experimental API to programmatically manage your Cloudflare Workers.

13 Replies

James•2y ago

Hey there, you should be able to, however, it might not be the smoothest. We use the relatively new _worker.js directory in @cloudflare/next-on-pages, and AFAIK, you need to do some extra work with unstable_dev to get it to work properly. Here is an example from a test project I just made: https://gist.github.com/james-elicx/e1bc0c44f3668a343e5bf6697a9fb6e6

Gist

Example of tests for @cloudflare/next-on-pages apps with Wrangler...

Example of tests for @cloudflare/next-on-pages apps with Wrangler's unstable_dev. - nop.spec.ts

vassbenceOP•2y ago

awesome! thank you very much What do you think about this use case moving forward? Is this something that the team will work on / improve? Or this is not supposed to be a supported use case of these apis?

James•2y ago

I mean, it should be fine in reality. It could be made a little smoother by automatically handling the _worker.js directory so that you don't have to add all the additional modules yourself. Whether that is something that is going to be improved on, well, I have no idea.

vassbenceOP•2y ago

Also, do you happen to know if it's possible to run D1, R2, etc locally with wrangler while using a next.js app?

vassbenceOP•2y ago

As per the docs we can use Worker bindings in the api routes in next.js https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application

Deploy a Next.js site · Cloudflare Pages docs

Next.js is an open-source React framework for creating websites and apps. In this guide, you will create a new Next.js application and deploy it using …

vassbenceOP•2y ago

But is it also possible to start and access these services locally? Also for the code snippet that you have linked, aren't we supposed to call worker.fetch() and not just fetch?

James•2y ago

You can use bindings locally when running the app with wrangler. next-on-pages has a watch mode where it rebuilds on changes, however this can be rather slow depending on how many routes you have. You will not be able to access bindings in next dev - if that is something you were hoping to get, I would ask that you share more information about your use case, pain points, and thoughts in https://github.com/cloudflare/next-on-pages/issues/271 For more information on using bindings locally with wrangler, check out https://developers.cloudflare.com/pages/platform/functions/bindings/ - it will tell you the syntax to pass to the wrangler command for them If you want

vassbenceOP•2y ago

Sadly could not get the above code snippet working getting all sorts of error when running vitest

James•2y ago

Are you able to share them?

vassbenceOP•2y ago

bence@bence-m1-mbp test-nextjs-with-workers-api-and-tests % npm run test

> [email protected] test
> vitest run


 RUN  v0.32.2 /Users/bence/projects/test-nextjs-with-workers-api-and-tests

stderr | unknown test
▲ [WARNING] unstable_dev() is experimental

  unstable_dev()'s behaviour will likely change in future releases



stderr | unknown test
<empty line>
stdout | unknown test
 ⛅️ wrangler 3.1.1
------------------

bence@bence-m1-mbp test-nextjs-with-workers-api-and-tests % npm run test

> [email protected] test
> vitest run


 RUN  v0.32.2 /Users/bence/projects/test-nextjs-with-workers-api-and-tests

stderr | unknown test
▲ [WARNING] unstable_dev() is experimental

  unstable_dev()'s behaviour will likely change in future releases



stderr | unknown test
<empty line>
stdout | unknown test
 ⛅️ wrangler 3.1.1
------------------

stderr | unknown test
<empty line>
stdout | unknown test
Metrics dispatcher: Dispatching disabled - would have sent {"type":"event","name":"run dev (api)","properties":{"local":true}}.
Failed to load .env file "/Users/bence/projects/test-nextjs-with-workers-api-and-tests/.dev.vars": Error: ENOENT: no such file or directory, open '/Users/bence/projects/test-nextjs-with-workers-api-and-tests/.dev.vars'
    at Object.openSync (node:fs:592:3)
    at Object.readFileSync (node:fs:460:35)
    at tryLoadDotEnv (/Users/bence/projects/test-nextjs-with-workers-api-and-tests/node_modules/wrangler/wrangler-dist/cli.js:123917:72)
    at loadDotEnv (/Users/bence/projects/test-nextjs-with-workers-api-and-tests/node_modules/wrangler/wrangler-dist/cli.js:123926:12)
    at getVarsForDev (/Users/bence/projects/test-nextjs-with-workers-api-and-tests/node_modules/wrangler/wrangler-dist/cli.js:148837:18)
    at getBindings (/Users/bence/projects/test-nextjs-with-workers-api-and-tests/node_modules/wrangler/wrangler-dist/cli.js:149743:10)
    at getBindingsAndAssetPaths (/Users/bence/projects/test-nextjs-with-workers-api-and-tests/node_modules/wrangler/wrangler-dist/cli.js:149702:20)
    at getDevServer (/Users/bence/projects/test-nextjs-with-workers-api-and-tests/node_modules/wrangler/wrangler-dist/cli.js:149499:38)
    at startApiDev (/Users/bence/projects/test-nextjs-with-workers-api-and-tests/node_modules/wrangler/wrangler-dist/cli.js:149560:27)
    at processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/bence/projects/test-nextjs-with-workers-api-and-tests/.dev.vars'
}
disableDevRegistry:  false

stdout | unknown test
⎔ Starting local server...

stderr | unknown test
▲ [WARNING] Parsed 1 valid header rule.

stderr | unknown test
<empty line>
stdout | unknown test
Metrics dispatcher: Dispatching disabled - would have sent {"type":"event","name":"run dev (api)","properties":{"local":true}}.
Failed to load .env file "/Users/bence/projects/test-nextjs-with-workers-api-and-tests/.dev.vars": Error: ENOENT: no such file or directory, open '/Users/bence/projects/test-nextjs-with-workers-api-and-tests/.dev.vars'
    at Object.openSync (node:fs:592:3)
    at Object.readFileSync (node:fs:460:35)
    at tryLoadDotEnv (/Users/bence/projects/test-nextjs-with-workers-api-and-tests/node_modules/wrangler/wrangler-dist/cli.js:123917:72)
    at loadDotEnv (/Users/bence/projects/test-nextjs-with-workers-api-and-tests/node_modules/wrangler/wrangler-dist/cli.js:123926:12)
    at getVarsForDev (/Users/bence/projects/test-nextjs-with-workers-api-and-tests/node_modules/wrangler/wrangler-dist/cli.js:148837:18)
    at getBindings (/Users/bence/projects/test-nextjs-with-workers-api-and-tests/node_modules/wrangler/wrangler-dist/cli.js:149743:10)
    at getBindingsAndAssetPaths (/Users/bence/projects/test-nextjs-with-workers-api-and-tests/node_modules/wrangler/wrangler-dist/cli.js:149702:20)
    at getDevServer (/Users/bence/projects/test-nextjs-with-workers-api-and-tests/node_modules/wrangler/wrangler-dist/cli.js:149499:38)
    at startApiDev (/Users/bence/projects/test-nextjs-with-workers-api-and-tests/node_modules/wrangler/wrangler-dist/cli.js:149560:27)
    at processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/bence/projects/test-nextjs-with-workers-api-and-tests/.dev.vars'
}
disableDevRegistry:  false

stdout | unknown test
⎔ Starting local server...

stderr | unknown test
▲ [WARNING] Parsed 1 valid header rule.

stderr | unknown test
<empty line>
stdout | unknown test
[mf:wrn] The latest compatibility date supported by the installed Cloudflare Workers Runtime is "2023-05-18",
but you've requested "2023-06-22". Falling back to "2023-05-18"...

stderr | unknown test
<empty line>
stdout | unknown test
[mf:inf] Ready on http://127.0.0.1:54857/

stderr | unknown test
<empty line>
stdout | unknown test
⎔ Shutting down local server...

zsh: abort      npm run test
bence@bence-m1-mbp test-nextjs-with-workers-api-and-tests %

stderr | unknown test
<empty line>
stdout | unknown test
[mf:wrn] The latest compatibility date supported by the installed Cloudflare Workers Runtime is "2023-05-18",
but you've requested "2023-06-22". Falling back to "2023-05-18"...

stderr | unknown test
<empty line>
stdout | unknown test
[mf:inf] Ready on http://127.0.0.1:54857/

stderr | unknown test
<empty line>
stdout | unknown test
⎔ Shutting down local server...

zsh: abort      npm run test
bence@bence-m1-mbp test-nextjs-with-workers-api-and-tests %

in my package json i have

    "build:test": "npx @cloudflare/next-on-pages@1",
    "test": "vitest run",

    "build:test": "npx @cloudflare/next-on-pages@1",
    "test": "vitest run",

and commenting out the beforeAll and afterAll blocks fix the problem.. well at least my zsh doesnt abort so yeah its something to do with those

James•2y ago

Those logs are just because of the logLevel I had set in that example so I could view all the logs while writing it. I don't actually see anything wrong there

vassbenceOP•2y ago

bence@bence-m1-mbp test-nextjs-with-workers-api-and-tests % npm run test

> [email protected] test
> vitest run


 RUN  v0.32.2 /Users/bence/projects/test-nextjs-with-workers-api-and-tests

stderr | unknown test
▲ [WARNING] unstable_dev() is experimental

  unstable_dev()'s behaviour will likely change in future releases



 ❯ __tests__/hello.ts (1)
   ❯ next-on-pages works (1)
     ⠧ [ beforeAll ]
     · asd
zsh: abort      npm run test
bence@bence-m1-mbp test-nextjs-with-workers-api-and-tests %

bence@bence-m1-mbp test-nextjs-with-workers-api-and-tests % npm run test

> [email protected] test
> vitest run


 RUN  v0.32.2 /Users/bence/projects/test-nextjs-with-workers-api-and-tests

stderr | unknown test
▲ [WARNING] unstable_dev() is experimental

  unstable_dev()'s behaviour will likely change in future releases



 ❯ __tests__/hello.ts (1)
   ❯ next-on-pages works (1)
     ⠧ [ beforeAll ]
     · asd
zsh: abort      npm run test
bence@bence-m1-mbp test-nextjs-with-workers-api-and-tests %

basically it just quits without anything Welp, anyways, without next dev working with bindigs locally it's not really somehing I will use. A monorepo with a worker based api and a separate frontend works okay-ish, its just a hassle to deploy

James•2y ago

If that is the case, would it be possible for you to share that on issue I linked above by any chance 🙏🏻 That sounds more like an unstable_dev being unstable problem to me, but I don't really have that much experience with unstable_dev so I'm not really sure what's going on there

Gaming

Programming

Testing workers created by @cloudflare/next-on-pages