Flow Journey: Connect JS-SDK to Flow Emulator “Response Closed without Headers”

blockchain development flow

So I mentioned in a previous post, that after you go through tutorials like the CryptoDappy and Flow Cadence Tutorials, you might want to graduate to using the Flow Emulator.

After you get comfortable with the Flow Emulator, though, how would you go about connecting Flow's JS library, FCL, to the emulator?

Here's how to do it within a React App (or general JS to be honest).

Setup

In your client side JS App, the main thing you need to do is point your Flow configuration to the emulator:

import { config } from "@onflow/fcl";

config({
  ...
  "accessNode.api": "http://127.0.0.1:8080",
  ...
})

Once you do that, the FCL will use your emulator as it's blockchain. However, it's usually better to relegate this to environment variables, so you'll have something like this:

import { config } from "@onflow/fcl";

config({
  ...
  "accessNode.api": process.env.REACT_APP_ACCESS_NODE_API,
  ...
})

Then, from there, you'll need to set up your Environment variables. I use create-react-app, which automatically loads environment variables from a .env file, so I have this:

REACT_APP_DISCOVERY_WALLET=https://fcl-discovery.onflow.org/testnet/authn
REACT_APP_ACCESS_NODE_API=http://127.0.0.1:8080
...

and I do NOT check this file into source code.

'Response Closed without Headers' Error

While setting up this connection, one issue I ran into while trying to execute a Script or Transaction from my Javascript app using FCL was I would get this error saying "Response Closed without Headers". Thanks to this post, I realized my issue was that I was specifying the gRPC port rather than the access node port. Again, I’m a beginner so my explanation is way off - but my suspicion is that your client side code connects to your Flow Emulator using the Access Node, and then uses that to then establish a gRPC connection (again, probably wrong :P)). Either way, the important thing is, when specifying your Access Node, you want to specify the access node port, which by default is 8080. The default gRPC port is 3659 which is NOT what you want to use.

So DON'T use http://127.0.0.1:3569 as your access node. Use http://127.0.0.1:8080.

Hopefully now, your JS app is successfully using FCL to talk to the Flow Emulator.

Until the next one.

Casey Li
CEO & Founder, BiteSite