Farcaster is a protocol for building sufficiently decentralized social networks.
Farcaster recently introduced the concept of "frames" which allow you to turn any post or "cast" into an interactive application.
This tutorial outlines how to create and host the Farcaster framework entirely on-chain, which is also an example of how to create a decentralized server.
By hosting your framework on-chain, you unlock the following use cases:
The framework can be managed by a decentralized autonomous organization (DAO);
Framework creators gain full ownership without the constraints of a centralized server.
Tutorial
This tutorial creates a REST API using the ExpressJS framework and deploys it on Internet Computer Protocol (ICP).
Step 1: Download DFX
dfx is a command line interface for the IC SDK, an SDK built by DFINITY for managing ICP container smart contracts.
Run the following command to download DFX:
Step 2: Download Azle
Azle is a library for building ICP container smart contracts using Typescript and Javascript.
More specifically, it is an adapter used by the Container Development Kit (CDK) or IC SDK to provide Typescript and Javascript with all the functionality needed to create and manage container smart contracts.
Run the following command to download Azle:
Please note that depending on your device you may need to download additional dependencies, see the following resources for all dependency requirements:
demergent-labs.github.io/azle/get_started.html
For example, if you are using a Mac, run the following command:
Step 3: Create a new Azle project
Run the following command to create a new project using Azle:
Step 4: Create the frame
The framework was created using the Farcaster specific OpenGraph tags referenced in this document.
Here's an example of a frame that contains an image, four buttons, and a URL link:
Save it in a text file for later use in this tutorial.
Step 5: Set up the Express server in src/index.ts
Azle provides a Server method that allows you to pass in a callback function that must return a node httpServer instance.
Returns a node httpServer instance using ExpressJS. This is an example of an httpServer built with ExpressJS.
Combining these two results, the results are as follows:
Step 6: Return the Farcaster framework for the REST API call
Return to the Farcaster frame for the REST API call. The frame in step 4 has an image, four buttons, and a URL.
This example passes in the image link, button text, and the content of the URL link, passes in the frame, and sends the entire constructed frame as an API response:
Step 7: Update src/index.ts with the complete code from steps 5 and 6
Update src/index.ts with the following code:
Step 8: Deploy the application
local
Deploy it locally to test the application, execute the following command to deploy locally:
After running this command, a success message similar to this will appear in the shell.
Note that the container ID and the ID provided in the backend container Candid interface link during deployment will be different from the example shown here.
If the example repository has been forked, delete canister_ids.json before deploying.
The listed backend container Candid interface links are UIs for testing backend functionality and are provided in the following format:
API endpoints are a derivative of this format and should follow the following structure:
So if the deployment provides a backend container Candid interface link, for example:
Access your API through this basic endpoint:
Mainnet (production)
Deploy on mainnet or production to get a functional application. To get Cycles or Gas deployed on mainnet, check out this guide or cast jennifertran on Farcaster.
Run the following command to deploy the application to the Internet Computer mainnet.
After running this command, a success message similar to the following will appear in the shell:
Note that the container ID and ID provided in the backend container Candid interface link during deployment will be different from the example shown here.
If the sample repository has been forked, delete canister_ids.json before deploying.
The listed backend container Candid interface link is a UI for testing backend functionality and is provided in the following format:
API endpoints are a derivative of this format and should follow the following structure:
So if the deployment provides a backend container Candid interface link, for example:
Access your API through this basic endpoint:
Step 9: Preview the Farcaster framework using the framework validator
You can preview Farcaster Frame using its Frame Validator tool.
Please note that only mainnet production endpoints are supported, local endpoints cannot be used.
Enter the endpoint you received in step 8 and click Load, for example if your endpoint is https://swua7-kqaaa-aaaao-a3fna-cai.raw.icp0.io/ the preview should look like this :
resource
Complete sample code:
github.com/Gekctek/farcaster-frame-azle
Example of how to build an on-chain ExpressJS server using Azle:
github.com/demergent-labs/azle/tree/main/examples/express
Build container smart contracts on ICP with Azle using Typescript:
demergent-labs.github.io/azle/the_azle_book.html
Big thanks to Gekctek for his contributions to this example and Jordan Last for his contributions to Azle.
IC content you care about
Technology Progress | Project Information | Global Activities
Collect and follow IC Binance Channel
Stay up to date with the latest information
