Build on Flow: Learn FCL - Introduction
Max Daunarovich
Posted on May 26, 2022
Overview
After going through example in this post you will know
- what FCL is and why you need it
- how configure FCL JS to interact with Flow Testnet blockchain
- execute basic Cadence script 💪
💡 Learn better with video? Lucky for you there is a video you can follow along w/ this guide. Narrated by one and only Flow Developer Advocate Kimcodeashian!
Kimazing Content
What is FCL?
The Flow Client Library (FCL) is a standardized set of communication patterns between wallets, applications and users that is used to perform a wide variety of actions of your dapp. Different languages have their own implementations of FCL concept and standard.
On the Javascript side, it's an NPM package used to interact with user wallets and the Flow blockchain in both browser and server environments.
Wait, what is Flow blockchain?
It's a good thing you asked! Flow is a blockchain built for the next generation of apps, games, and the digital assets that power them.
There are many different features which make Flow unique. Here are some of them:
- Cadence - The new easy-to-learn resource oriented programming language designed for dApps and digital assets
- Upgradable Smart Contracts - Securely and transparently patch bugs and upgrade pre-specified parts of a smart contract
- Fast and Deterministic Finality - Flow is built to be fast and responsive – achieving global finality within seconds
More information about Flow Blockchain can be found at https://flow.com and https://docs.onflow.org/
Simple Example
In later posts we will showcase more complex and meaningful examples, but for now let's try to make Flow Testnet return a specific number for us (please bear with us, it will be much more interesting later 😄)
We will use Codesandbox (https://codesandbox.io) platform so it will be easier to share final solution, while enabling you to fork the sandbox and try your own ideas.
Step 1 - Installation
Add "@onflow/fcl": "1.0.0"
 as your dependency
Step 2 - Import
FCL JS exposes multiple methods from package - to "build" interactions, to configure FCL, interact with chain, etc. We will import:
-
query
 (https://docs.onflow.org/fcl/reference/api/#query) -
config
 (https://docs.onflow.org/fcl/reference/api/#common-configuration-keys) methods
import { query, config } from "@onflow/fcl";
Step 3 - Configure FCL
FCL needs to know where to send that script for execution. The following line will set Access Node endpoint using config
 method:
const api = "https://rest-testnet.onflow.org"
config().put("accessNode.api", api);
Step 4 - Execute a script on Testnet
In order to execute Cadence script on Flow blockchain, we can submit it with query
 method. Our basic case is not using any arguments, so we will only pass single field in that argument:
const cadence = `
pub fun main(): Int{
return 42
}
`;
const theAnswer = await query({ cadence });
console.log({ theAnswer });
Finally - Full Code
import { query, config } from "@onflow/fcl";
const api = "https://rest-testnet.onflow.org"
config().put("accessNode.api", api);
// We will use IIFE to execute our code right away
(async () => {
console.clear();
const cadence = `
pub fun main(): Int{
return 42
}
`;
const theAnswer = await query({ cadence });
console.log({ theAnswer });
})();
In next post we will highlight how to pass arguments to your scripts. Stay tuned! 👋
Full sandbox is available here: Codesandbox | Learn FCL - 01. Introduction
Link and Sources
- Flow Docs Site - https://docs.onflow.org/ - More detailed information about Flow blockchain and how to interact with it
- Flow Portal - https://flow.com/ - your entry point to Flow
- FCL JS - https://github.com/onflow/fcl-js - Source code and ability to contribute to the FCL JS library
- Cadence - https://docs.onflow.org/cadence/ - Introduction to Cadence
- Codesandbox - https://codesandbox.io - An amazing in-browser IDE enabling quick prototyping
Posted on May 26, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.