This project is based on this Quicknode guide: https://www.quicknode.com/guides/social/how-to-build-a-farcaster-frame
Before you start, make sure you have the following installed and set up:
- Ethereum Mainnet Node Endpoint: An endpoint is required for interacting with the Ethereum mainnet. Sign up for an endpoint here.
- Optimism Mainnet Node Endpoint: Only necessary if you're running a Hubble node.
- Node.js: installed v18.14>
- Neynar API (optional): Alternatively, you can gain access to read/write operations with the Farcaster network through an API provider such as Neynar.
- Farcaster Account: An account on Farcaster is necessary if you want to post (cast) your Frame
- Start by cloning this repository to your local machine.
git clone git@github.com:quiknode-labs/qn-guide-examples.git
- Navigate to the appropriate directory and install the required dependencies.
cd ethereum/farcaster-frames
npm install
-
Rename .env.example to .env and update the values accordingly
-
If you're running a Hubble node, make sure to expose your port via a remote url (e.g., ngrok). Otherwise, if you're using Neynar, ensure you commented out the Hubble logic in
src/ethers.tsand uncomment the Neynar API logic. -
Once everything is set up, you can start the project by running:
npm run dev
This will start a local server at PORT 8080
-
Next, start a ngrok server with the command
ngrok http 8080and update the value in .env (NGROK_URL) accordingly. You may need to restart the local server. -
Test the frame via the Warpcast Frame validator tool. You will need to add
/frameto the end of your ngrok URL (e.g.https://0289-2601-589-4984-73d0-6432-9ee7-71c6-90bd.ngrok-free.app/frame)
We welcome contributions! If you're interested in helping improve this project, please open a PR.
For any questions or support, please open an issue, and we'll get back to you as soon as possible.