Suggestion to using vite instead of svelte-kit. This will be deprecated in the future, and things work quite nicely with vite.

sveltejs/kit#5332

Otherwise folks running the example might run into:

svelte-kit dev is no longer available - use vite dev instead

1. Install vite as a devDependency with npm/pnpm/etc
2. Create a vite. config. js with the @sveltejs/kit/vite plugin (see below)
3. Update your package.json scripts to reference 'vite dev' instead of `svelte-kit dev'

// vite. config.js
import { sveltekit } from '@sveltejs/kit/vite';

/** @type fimport('vite').UserConfig} */
  const config = {
  plugins: [sveltekit()]
};

export default config;

If I add the following code to the index page in the Nextjs example:

  const [sentHello, setSentHello] = useState<boolean>(false);
  if (!sentHello) {
    send("hello");
    setSentHello(true);
  }

I get the following error:

- error unhandledRejection: Error [ConnectError]: [unknown] Failed to parse URL from /api/buf.connect.demo.eliza.v1.ElizaService/Introduce
    at Function.from (file:///C:/Users/x/Desktop/connect-es-integration/nextjs/node_modules/@bufbuild/connect/dist/esm/connect-error.js:70:20)
    at abort (file:///C:/Users/x/Desktop/connect-es-integration/nextjs/node_modules/@bufbuild/connect/dist/esm/protocol/run-call.js:86:36)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.stream (file:///C:/Users/x/Desktop/connect-es-integration/nextjs/node_modules/@bufbuild/connect-web/dist/esm/connect-transport.js:129:20) {
  digest: undefined

I get a similiar error on the actual project that I'm working on. It seems it might be related to the edge runtime of Nextjs:

- error unhandledRejection: Error [TypeError]: Cannot read properties of undefined (reading 'flags')
    at setRemoved (C:\Users\x\node_modules\next\dist\compiled\@edge-runtime\primitives\events.js:488:3)
    at removeListenerAt (C:\Users\x\node_modules\next\dist\compiled\@edge-runtime\primitives\events.js:554:3)
    at EventTarget.dispatchEvent (C:\Users\x\node_modules\next\dist\compiled\@edge-runtime\primitives\events.js:627:33)
    at abortSignalAbort (C:\Users\x\node_modules\next\dist\compiled\@edge-runtime\primitives\abort-controller.js:63:10)
    at AbortController.abort (C:\Users\x\node_modules\next\dist\compiled\@edge-runtime\primitives\abort-controller.js:74:5)
    at abort (file:///C:/Users/x/node_modules/@bufbuild/connect/dist/esm/protocol/run-call.js:87:24)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.unary (file:///C:/Users/x/node_modules/@bufbuild/connect-web/dist/esm/connect-transport.js:45:20)
    at async Object.getProduct (file:///C:/Users/x/node_modules/@bufbuild/connect/dist/esm/promise-client.js:66:26) {
  digest: undefined

Does this mean I cannot use Connect on the server side? Or is this an issue with either Connect or Nextjs?

EDIT: I think these are 2 separate issues that I'm seeing. In the actual project I'm not using @bufbuild/connect-next but I'm using @bufbuild/connect and @bufbuild/connect-web. When I downgrade these to 0.8.6 the error goes away. I will try to reproduce it in a simpler version.

The Next.js example currently only contains examples for the Pagers Router, and none for the newer App Router.

We should provide a basic example for using a client in a server-rendered page, and for crossing the serialization boundary between server and client components.

This repository hosts examples for many different frameworks. Currently, CI is running the following command for an example if any related file was changed:

Which runs the npm scripts buf:generate, build, and test after installing dependencies:

This certainly gives us decent coverage, but looking at the example for Vue.js, we're missing some important scripts:

E2E tests and the linter never run in CI. Same with the Svelte example, where we also don't run the check script, which is important in Svelte because the build script does not type-check.

Since the examples do not follow a common pattern with their npm scripts (and they should not), I propose that we add a ci script to every example, and run it after installing dependencies. For the Vue.js example, that would be:

"ci": "npm run buf:generate && npm run lint && npm run build && npm run test && npm run test:e2e:ci"

The lint script for Vue.js runs eslint with --fix. Other examples have a format script. To make sure that all files are up to date, I suggest that we add a diff check via git after running the ci script (reference).

I've installed and ran the example project and installed Expo-Go. The following is logged to the terminal in my code editor after entering text in the mobile UI: ConnectError: [internal] FileReader.readAsArrayBuffer is not implemented

I appear to have followed the README step by step, so I'm not too sure how to resolve this.

Is it possible to use connect-web with just javascript without any framework? If yes, I would appreciate an example been added to this repo.

Thanks.

Hello, I would like to request an example with next.js framework.

I am struggling to get a node client to work with external gRPC server (Salesforce Pub/Sub) for BiDiStreaming.
Unary requests are working fine.
I can create the initial stream but it is closed as soon as I attempt to read it.

My code is very similar to this example
https://www.supaglue.com/blog/how-to-build-a-real-time-cdc-event-integration-with-your-customers-salesforce.

I've gone through all the examples and have yet to find one where the client consumes BiDiStreaming.
I would appreciate it if the node client example could consume the stream.

Hi there, I meet a interesting question. I usually work with browser and don't know much about RPC. So I come here for some help.

As the title says, I use connect-web in browser to replace axios simply. I used to use axios to send HTTP request to the server. The server support both simple HTTP request(for browser) and one kind of private protocol called xRPC(for other server) in same route. I want to figure out why the connect-web and the server can just works well. I guess there are two situation: the first is the connect protocol and xRPC protocol just happen to work well, and the second is they work by pure http, because the request header shows contentType: application/json.

Thank you for your time~

In some npm scripts, we use npx to execute npm package "binaries", for example:

    "buf:generate": "npx buf generate buf.build/connectrpc/eliza",

The buf binary is already on the $PATH when running npm scripts, so npx just spawns an unnecessary process.

We should remove npx from npm scripts to provide good examples.