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

Flow Journey: Using Flow Network Token on the Flow Emulator

blockchain nft ft emulator flow

So in a previous post, I talked about using someone else's Fungible Token for your Non-Fungible Tokens (NFTs).

For example, it's very common to use the FLOW Network Token or FUSD for your NFT marketplace. You create the Smart Contract for the NFT and the Marketplace, but you use FLOW or FUSD as your Fungible Token.

That seems all well and good because those Smart Contracts are deployed to the production (MainNet) and test (TestNet) Flow blockchains. But when you're starting to build your own Smart Contracts, most likely you're going to start with the Flow Emulator. So how do you get those Smart Contracts on the Flow Emulator?

Well as it turns out, the Flow Emulator comes built in with the FLOW Network token already built in. You can see it when you run flow emulator. When you run it, you should see something like this

Flow contracts                             FlowFees=0x########### FlowServiceAccount=0x########### FlowStorageFees=0x########### FlowToken=0x########### FungibleToken=0x###########

Notice that the address of the FlowToken is right there ready for you to use. In fact there are a whole bunch of Smart Contracts pre-deployed like the FungibleToken standard interface.

While I'm still super beginner and I haven't gotten that far yet, I assume using these is as easy as referencing their address that's listed when you start up the emulator.

Hope that helps out some peeps!

Until the next one!

Casey Li
CEO & Founder, BiteSite

Flow Journey: Where to go after the Flow Playground? The Flow Emulator.

blockchain nft ft flow

One thing about learning development for the Flow Blockchain is you have a lot great resources. To start off, our team ran through the CryptoDappies Tutorials. This tutorial showed how you could take a traditional React App and get it to talk to the Flow Blockchain and Smart Contracts deployed on it. It's a great way to start if you're a seasoned web developer. The tutorial is great, but it's all about connecting to existing Smart Contracts. While you do learn some Cadence and how to execute transactions and scripts, you don't build your own Smart contracts.

So where do you go after that?

Easy. You go to the Flow Cadence Tutorials. These tutorials are great and walk you through writing your own Smart Contracts to build your own Fungible and Non-Fungible Tokens along with a NFT marketplace. After going through these tutorials, I had a super good sense of who I would now build a "full-stack" dApp on flow.

There was just one problem.

See, the Flow Cadence Tutorials have you build everything within the Flow Playground. This is perfect for learning, but it begs the question, where do I go next? How do I go from the Flow Playground to the "real" Flow blockchain?

After the playground, where do you go? Emulator

So where do you go after those first two tutorials? My answer was the Flow Emulator and the Flow CLI. The Flow Emulator is like running a copy of the Flow Blockchain on your local machine. It behaves like the TestNet and MainNet (the "real" Flow blockchains) but runs locally on your computer in memory.

If you're coming from the web world, you're probably used to running a dev database, or dev server on your machine. That's kind of what the Flow Emulator is like - it's the back-end to your App that runs on your machine.

So this was the answer.

After you install the Flow CLI, you can simply run flow emulator, and you'll have a blockchain running on your machine that you can play around with.

Some basics about the Flow Emulator

So the cool thing is, the Flow Emulator actually comes pre-built with some Smart Contracts that automatically get deployed when you fire it up. This includes things like the FLOW Network Token contract. That way you can build apps that use the FLOW Network Token right out of the box.

The Flow Emulator also comes with a whole bunch of configuration options and commands that allow you to easily create accounts on the Flow Emulator Blockchain and automatically deploy your Smart Contracts to it. The full details are outside the scope of this post, but I'll run over a couple of things that I did to just play around and get started.

Set up your Configuration

Before you do anything, you should set up your configuration file flow.json which gets created by simply running

flow init

Now you're ready to play around.

Create an account

So the default configuration of the Flow Emulator within the flow.json comes pre-built with an account that gets created when you launch the emulator, but in case you wanted to play around with creating your own you can! First start up the emulator...

flow emulator

Then in a separate Terminal tab, you could run something like this

flow generate keys

That will give you some keys you can use, then simply run (replacing 3b9cd... with the key that you generated in the last step)

flow accounts create --key 3b9cd...

Deploy Contract

Want to try deploying a really simple contract? Easy. Create a file in your project like the following...

/*  
  Description: Test NFT for BiteSite.
*/

pub contract TestBiteSiteNFT {

  pub resource NFT {
    pub let id: UInt64

    pub var metadata: {String: String}

    init(initID: UInt64) {
      self.id = initID
      self.metadata = {}
    }
  }

  init() {
    self.account.save<@NFT>(<-create NFT(initID: 1), to: /storage/TestBiteSiteNFT)
  }
}

Then

flow accounts add-contract TestBiteSiteNFT ./contracts/TestBiteSiteNFT.cdc

Note, by default, this smart contract will be deployed to the Test Emulator Account that's set up in flow.json. This is an important point, you should definitely read the full documentation on the Flow CLI as it contains important things like "default" values when running commands like add-contract.

Conclusion

So there you go, now you know how to write Smart Contracts and play around with your own blockchain running as the Flow Emulator. In future posts, I'll show you how to have a React App talk to the emulator.

Casey Li
CEO & Founder, BiteSite

Flow Journey: TIL I learned about some NFT Marketplace business models

blockchain nft ft flow

Introduction

Next up in my Flow Journey was more a business related question. After going through the Cadence tutorials and starting to understand concretely how I might buy a NFT marketplace, or blockchain based dApp (distributed App) in general, I had a big question in mind.

Let's say you build an NFT marketplace. People purchase your NFTs and then they start trading them. From the examples I saw, it seemed like people could buy and sell between each other and then would just transfer FTs or Fungible tokens between each other. So with that in mind, how do the people who build the platform our marketplace make money.

I was browsing the NBA Top Shot Smart Contracts, and I couldn't find a place during the transaction that would lead to the platform making money. The closest thing I found was a 'beneficiary' cut.

So this led me to my question, how to these NFT marketplaces make money?

Thanks again in huge part to the Flow Community, the Flow Discord server, and the Flow office hours, I learned of 2 common business models for NFT Marketplaces

  • First party sales
  • Transaction based

First Party Sales

I apologize for not remembering the handle of specific person who answered (big thanks to that person!), but what they said was, the first common way for NFT marketplaces to make money is on "First Party Sales".

What this basically means is, the platform has minting permissions. So they are the ones who create the NFTs in the first place and when they are first minted, they belong to the organization. The way they make money is by selling these NFTs for the first time. Afterwards, when people buy and sell them, they don't make any more money.

This is analogous to say trading cards in the real world. When they are first sold, the company that produced them makes money. However, afterwards, when people buy and sell them, it's not like the original company gets a cut. They only make money on the first sale.

Transaction Based

The other way is through transaction fees. So if you build an NFT marketplace, you could take a cut during the purchasing and selling. If you write your Smart Contract to deposit some of the funds into the seller's account, but hold some back and deposit that into your account - then you make money off the transactions. So that's another way to do it.

Not to mention, you could combine the two.

Conclusion

These business models are probably pretty obvious to most people. However, the thing is, when you start learning Blockchain development, seemingly simple questions seem to feel daunting.

Business models was definitely a question of mine, and the Flow team answered it perfectly.

Til the next one.

Casey Li
CEO & Founder, BiteSite

Flow Journey: TIL that you can use established FTs for your NFT Marketplace

blockchain nft ft flow

Flow Journey Introduction

Welcome to the first post in our series called "Flow Journey". While we're confident in our Web and Mobile app development skills, we are brand new to blockchain development and specifically Flow.

For those who don't know, Flow is a new blockchain that was built by DapperLabs. They built it after their experience with building their dApp CrytoKitties on a different blockchain (Ethereum).

Anyway, our team is exploring Flow and learning a lot and as such, we thought we would start blogging about it to share our journey and knowledge that we've learned along the way.

As articles come out, we'll keep a running list here:

Fungible Tokens for your NFT Marketplace

Today, we're talking about FTs or Fungible Tokens.

For those that are new to blockchain development, Fungible Tokens are basically digital assets whose value is equivalent. For example, FUSD is a fungible token and 1 FUSD in 1 person's account is equivalent to 1 FUSD in someone else's account. Think of it as currency.

When you go through the the Cadence tutorials on the Flow website, they show you how to actually build your own Fungible Token to be used in a NFT marketplace. In other words, a way to create your own currency to use in your Marketplace.

Great tutorials, no question. But I had a big question afterwards.

If you're creating your own FT or currency, how would a marketplace work in terms of people buying your NFTs? More specifically, how would people use traditional money (or even established currency like FLOW or FUSD) to pay for your NFTs if you created your own FT?

Well there are 2 things I learned today while on the Flow Discord server. Big thanks to bjartek.find and Dene from Geniace: bjartek.find for answering my questions and to Dene from Geniace for presenting on their project which included a 'native FT' during the Flow Dev Office Hours which clarified my suspicions.

Answer number 1: You don't always create your own 'native FT'.

Thanks to bjartek.find, I learned that it is very common to create an NFT marketplace and use an already established FT (like FLOW or FUSD). The tutorials highlight how you would create your own FT, but that's not necessarily a common thing to do. Instead, you build your NFT marketplace and use FLOW or FUSD as your FT. This way, you don't have to worry about converting traditional currency or any currency for that matter. People will already have some FLOW and FUSD balance that they could use without any conversion.

Answer number 2: Convert to your Native FT

I'm definitely not an expert on this, but hearing Dene from Geniace talk - he talked about their native token and some of the implementation around it. Again, not an expert, but what I got from it, is indeed they would have to do a conversion or exchange to their native token. That I can only assume is way outside my knowledge base.

Long story short, if you're getting started, it looks like you can use a well established FT in your NFT marketplace.

Big thanks to the Flow team and the Flow community. Joining their discord server was one of the best things I've done so far in this journey.

Until the next one.

Casey Li
CEO & Founder, BiteSite