Flow Journey: The FCL Dev Wallet

blockchain flow dev environment

Alright, so as we were working on our first Smart Contracts on Flow and building some Hello, World type stuff, there was an issue that came to mind. If I deploy a Smart Contract to an account on the Flow Emulator, and let's say only that account has privilege to perform certain actions, how do I sign in as that account on my web app.

Let's take an example. Let's say I coded a Smart Contract that allowed the contract owner to Mint some NFTs. How do I sign in to a web app as that owner?

The answer: The FCL Dev Wallet!

What is the FCL Dev Wallet

As far as I can tell, the FCL Dev Wallet is basically a dev stand-in for real wallets like Blocto. Rather than logging in using a real wallet like Blocto, you end up signing in using the FCL Dev Wallet. What's more, is you can easily manage the accounts on the Dev Wallet so you can do a lot of testing signing in as different accounts.

How do you get it up and running

Ok, so on the current FCL Dev Wallet repo, the readme shows you how to run everything using Docker. However, this didn't really work for me. After talking to someone on the Flow team, I got a lot of information, and some instructions on how to run this from scratch. So here's what you need to do if you want to run it NOT using Docker.

1. Clone the Repo

First step is the Clone the git repo: https://github.com/onflow/fcl-dev-wallet.

2. Prepare the Emulator Environment

Open up the flow.json that's in your cloned repo of the FCL Dev Wallet, and edit any values you need to edit. If this is your first time using this, you shouldn't need to touch anything and you can just use the emulator accounts provided.

3. Prepare the Dev Wallet Environment

From your cloned repo, copy .env.example file to a .env file. Open up that file, and ensure that your account information, including private and public keys of the service account, line up with your flow.json emulator accounts. This part is important, so double-check that it matches up.

4. Fire up the flow emulator

Fire up the flow emulator flow emulator

(Note: This requires you have the Flow CLI installed).

5. Run the Flow Dev Wallet

Install your dependencies:

npm i

(Note, ensure that npm i actually succeeds. We ran into issues where we were using an older version of Node that wasn't compatible with all the libraries that the FCL Dev Wallet uses).

Then fire up the dev wallet:

npm run dev

6. Modify your Web Application to use Dev Wallet

Ok, so now your dev wallet is running, but what we need to do is point your Web App to use the Flow Dev Wallet rather than real wallets. To do this, we change where your Web App discovers what wallets are available. Normally, you would have something like this:

config({
  ...
  "discovery.wallet": process.env.REACT_APP_DISCOVERY_WALLET,
  ...
})

combined with a .env file that has something like this

...
REACT_APP_DISCOVERY_WALLET=https://fcl-discovery.onflow.org/testnet/authn
...

With that setup, you're pointing to Flow's testnet wallet discovery service. So rather than do that, we want to point to the discovery service that the FCL Dev Wallet provides. So just change it to this:

...
REACT_APP_DISCOVERY_WALLET=http://localhost:8701/fcl/authn
...

If using a .env file, be sure you restart your React server.

7. Test it out

At this point, you should be able to try out fcl.authenticate(), and you should get a pop-up that looks like this:

And you're done! You can now login as any account you want or create some new accounts.

Hope this helps out some peeps!

Casey Li
CEO & Founder, BiteSite

Flow Journey: Understanding Blockchain App Development as a Web Developer

nft ft blockchain flow

So, if you've been following my Flow Journey, you know that I've been learning how to build a Decentralized App (dApp) or sometimes called a Blockchain App or Web3 app. I've spent years as a web developer, and sometimes making the leap to a new technology like this is quite hard. You start formulating how you think it works, but you're not quite sure you have it right until you get confirmation from a seasoned developer.

So I thought I would write an article based on my current understanding (which is still in its infancy) of how blockchain app development works. Remember, I'm explaining this from the perspective of a web developer.

Web Development today

So when we look at web development today, there are a lot of options in terms of how your architect your applications, but ultimately, it comes down to 2 main parts: client and server. In web development, the client side is the browser and any code that runs in the browser. We're talking HTML, CSS, and JS (along with any HTML, CSS, and JS frameworks). On the server side, we're talking about server side code that runs to do things like persist data, serve up the client side code, and run processes. When we choose our architecture, there are two popular ways to structure our code:

  • Single full-stack application
  • Front-End Web App connection to a Server API App

When we talk about a single full stack application, we're talking about a single code base with all our our server side code, database code, HTML, CSS, and JS. An example of this is a full-stack Ruby on Rails application.

When we talk about the second option, we're talking about 2 or more code bases. You have one code base to house all your client side code and another code base to house all your server side code. The client side code only contains HTML, CSS, and JS and maybe some code to actually serve that code up to the user's browser. That client side code then talks to the server code base through a provided API. In this situation, your server code and client code are completely separated.

In this latter case, it's so separate in fact that an entire other company might house your server code and provide fancy services to make it easier to deal with. Firebase is a good example of this. Essentially, Firebase replaces your backend - and gives you fancy ways to control the behaviour of the backend. Need some really custom code to run on Firebase? No problem, they provide Cloud Functions - which is basically code that you provide that will run on the server.

This web app architecture is a good analogy to how blockchain development works.

Blockchain Development

With Blockchain development, picture that your entire Backend is replaced by a Blockchain. Now there are many blockchain's outthere, but this abstraction generally works for all of them.

As a web developer, you can think of the Blockchain as a backend to a web application. So when you think about storing data in a database in a web application, think about storing that on the Blockchain in a blockchain application. In fact, you can kind of make this analogy for most things in web development:

Traditional Web Application Blockchain Web Application
Client Side code in HTML, CSS, JS Client Side code in HTML, CSS, JS
Store Persistent Data in Database Store Persistent Data on the Blockchain
Run Backend Code through Server Code/Serverless Functions Run Backend Code through Smart Contracts

So, I think the best way to think about blockchain development (if you're a web developer), is that the Blockchain effectively replaces your backend. If you want to store anything in the backend, you're storing it on the blockchain. If you want to interact with any of that data, you need to write Smart Contracts - which is really nothing more than code that runs on the blockchain.

Nuances

Now, as with everything web related, there are so many other ways to structure this. You can have hybrid apps where your client code makes calls to the blockchain, but that also makes calls to a traditional web app backend. In this case, you're storing some data on the blockchain and some in your own database. But this is true for traditional web apps - you can technically have a front end that connects to many different backends. Either way, blockchain can act as ONE backend if you have many. It's not an all or nothing game.

Another thing to be careful of here, is when I say "Blockchain Development", I'm talking about developing apps that use the blockchain. There is a whole other set of developers who develop the blockchain itself. That is not what I'm talking about.

Conclusion

When I was first navigating Blockchain development, so many concepts alluded me. However, now it's starting to get more concrete and as a web developer, it's comforting to know that your front end skills translate completely. Learning Blockchain App Development is basically like learning a new server side/back end language framework. I would almost liken it to going from a Ruby on Rails Web App with a SQL Backend to developing a React App with a AWS Lambda and NoSQL backend. In that case, all your HTML, CSS, JS knowledge still apply, you just need to learn a new storage and backend code framework.

Hope that clears thing up for some peeps!

Casey Li
CEO & Founder, BiteSite

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

emulator nft ft blockchain 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.

nft ft blockchain 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 keys generate

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