Build on Flow: Learn FCL - Introduction
Tags: javascript, flow, tutorial, fcl
Published: 2022-05-26 11:34:36

## 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 💪

> :bulb: 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](https://twitter.com/kimcodeashian)!

## Kimazing Content
{% youtube KScdsTmBkMw %}

## 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](https://flow.com/) and [https://docs.onflow.org/](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](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](https://docs.onflow.org/fcl/reference/api/#query))
- `config` ([https://docs.onflow.org/fcl/reference/api/#common-configuration-keys](https://docs.onflow.org/fcl/reference/api/#common-configuration-keys)) methods

```jsx
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:

```jsx
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:

```jsx
  const cadence = `
    pub fun main(): Int{
      return 42
    }
  `;
  const theAnswer = await query({ cadence });
  console.log({ theAnswer });

```

### Finally - Full Code

```jsx
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](https://codesandbox.io/s/dev-to-fcl-01-introduction-zbhz0v)

## Link and Sources

- **Flow Docs Site** - [https://docs.onflow.org/](https://docs.onflow.org/) - More detailed information about Flow blockchain and how to interact with it
- **Flow Portal** - [https://flow.com/](https://flow.com/) - your entry point to Flow
- **FCL JS** - [https://github.com/onflow/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/](https://docs.onflow.org/cadence/) - Introduction to Cadence
- **Codesandbox** - [https://codesandbox.io](https://codesandbox.io/) - An amazing in-browser IDE enabling quick prototyping