Hello World Part 3 - Simple Frontend
Flow Client Library (FCL), is a JavaScript library developed to facilitate interactions with the Flow blockchain. It provides developers with tools to build, integrate, and interact with Flow directly from web applications. This web app quickstart will get you interacting with a contract already deployed to Flow.
For this tutorial, we're going to be making a React app with Create React App. We'll try and keep the code as simple as possible in case you're coming from another framework.
Objectives
After completing this guide, you'll be able to:
- Display data from a Cadence smart contract on a React frontend using the Flow Client Library
Creating the App
First, let's create our app and then navigate to it with the following terminal commands. From the root of where you keep your source code:
_10npx create-react-app fcl-app-quickstart_10cd fcl-app-quickstart
Open the new project in a new window in your editor.
It comes with a default layout, but let's remove it in src/App.js with something simple. Copy and paste this:
_13// src/App.js_13_13import './App.css';_13_13function App() {_13 return (_13 <div className="App">_13 <div>FCL App Quickstart</div>_13 </div>_13 );_13}_13_13export default App;
Now let's run our app with the following npm command:
_10npm start
You'll see a blank page with FCL App Quickstart at the top.
Setting Up FCL
In order to use FCL, we need to install it. Shut the server down then run the following to download the library and set it as a dependency in our project:
_10npm install @onflow/fcl --save
Next we'll want to add to our FCL configuration. There's a lot you can do here, but for this simple example, let's configure accessNode.api to talk to the Testnet Flow Access Node. An Access Node serves as the primary point of interaction for clients, such as wallets, dapps, and other services, to communicate with the Flow network. It provides a gateway for these clients to submit transactions, query data, and retrieve information without having to connect to the entire network or maintain a full copy of the blockchain.
For our example, we are going to point at a free Access Node provided by Flow. Add the following config code to your src/App.js:
_10// src/App.js_10_10import * as fcl from '@onflow/fcl';_10_10fcl.config({_10 'accessNode.api': 'https://rest-testnet.onflow.org'_10});
Querying the Chain
On Flow, you can interact with a contract by reading from the chain with a script or changing its state with a transaction. Reading is free and is done with FCL by passing a Cadence script to fcl.query.
For our example we are going to read from a HelloWorld contract deployed to the account 0xa1296b1e2e90ca5b on testnet (you can view the contract here to see what it looks like).
In the same src/App.js file, let's create app state to store our greeting and query the chain when the component renders in order to fetch the greeting state from the HelloWorld contract.
_20const [greeting, setGreeting] = useState("");_20_20useEffect(() => {_20 const queryChain = async () => {_20 const res = await fcl.query({_20 cadence: `_20 import HelloWorld from 0xa1296b1e2e90ca5b_20_20 access(all) fun main(): String {_20 return HelloWorld.greeting_20 }_20 `_20 });_20_20 console.log(res);_20 setGreeting(res);_20 }_20_20 queryChain();_20}, []);
At this point our entire src/App.js file should look like this:
_39import { useEffect, useState } from 'react';_39import './App.css';_39import * as fcl from '@onflow/fcl';_39_39fcl.config({_39 'accessNode.api': 'https://rest-testnet.onflow.org'_39});_39_39function App() {_39 const [greeting, setGreeting] = useState("");_39_39 useEffect(() => {_39 const queryChain = async () => {_39 const res = await fcl.query({_39 cadence: `_39 import HelloWorld from 0xa1296b1e2e90ca5b_39_39 access(all) fun main(): String {_39 return HelloWorld.greeting_39 }_39 `_39 });_39_39 console.log(res);_39 setGreeting(res);_39 };_39_39 queryChain();_39 }, []);_39_39 return (_39 <div className="App">_39 <div>FCL App Quickstart</div>_39 <div>{greeting}</div>_39 </div>_39 );_39}_39_39export default App;
You just built an app on Flow!
Run npm start again. After a moment, the greeting from HelloWorld will appear!
Mutating Chain State and More
For a deeper dive into writing an FCL app, such as how to change the chain state with FCL, check out the app quickstart guide or the FCL documentation.