> ## Documentation Index
> Fetch the complete documentation index at: https://docs.neynar.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Convert a Web App to a Farcaster Mini App
> Update any JavaScript web app to be a Farcaster mini app
If looking to create a new mini app from scratch, see [Create Farcaster Mini App in 60s](/docs/create-farcaster-miniapp-in-60s).
Converting an existing JavaScript-based web app to a Farcaster mini app involves the following steps:
* install the @neynar/react npm package and use the `` provider in your app
* alternatively, install the
Mini App SDK and call `sdk.actions.ready()`
* integrate with the SDK's ethereum provider exposed via `sdk.wallet.ethProvider`
* add a `farcaster.json` file with mini app metadata and a signature proving ownership
* add a custom HTML `` tag specifying how embeds should be rendered
## Installing the SDK
### Using @neynar/react
The recommended way to integrate your app with Farcaster is using the `@neynar/react` package, which includes the Mini App SDK along with custom Neynar components and built-in analytics:
```bash theme={"system"}
npm install @neynar/react
```
Then wrap your app with the `` provider:
```javascript theme={"system"}
import { MiniAppProvider } from '@neynar/react';
export default function App() {
return (
{/* Your app components */}
);
}
```
With the MiniAppProvider provider in place, you can access Mini App SDK functionality with the `useMiniApp()` react hook:
```javascript theme={"system"}
import { useMiniApp } from '@neynar/react';
export default function HomePage() {
const { isSDKLoaded, context } = useMiniApp();
return (<>
{isSDKLoaded && (
{context}
)}
)
}
```
### Using the Mini App SDK
Alternatively, you can use the Mini App SDK (formerly the Frame SDK):
```bash theme={"system"}
npm install @farcaster/miniapp-sdk
```
Then call the ready function when your interface is loaded and ready to be displayed:
```javascript theme={"system"}
import { sdk } from '@farcaster/miniapp-sdk';
await sdk.actions.ready();
```
You should call `ready()` as early as possible in the app, but after any pageload processes that might cause the UI to re-render or update significantly. In a React app, it's generally best to call `ready()` inside the page-level component at the root of your UI, e.g. in your homepage component.
Here's an example of how you might do this in a standard React app:
```javascript {9} theme={"system"}
import { useEffect, useState } from "react";
import { sdk } from '@farcaster/miniapp-sdk';
export default function Home() {
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
const load = async () => {
await sdk.actions.ready();
setIsLoaded(true);
};
if (sdk && !isLoaded) {
load();
}
}, [isLoaded]);
return (...)
}
```
## Connecting to the wallet provider
It's recommended to use `wagmi` for your wallet provider, as the Farcaster team provides the
@farcaster/miniapp-wagmi-connector package for easy configuration.
Run `npm i @farcaster/miniapp-wagmi-connector` to install, and then connecting is as simple as adding the connector to the wagmi config:
```javascript {11} theme={"system"}
import { http, createConfig } from 'wagmi';
import { base } from 'wagmi/chains';
import { farcasterMiniApp } from '@farcaster/miniapp-wagmi-connector';
export const wagmiConfig = createConfig({
chains: [base],
transports: {
[base.id]: http(),
},
connectors: [
farcasterMiniApp()
// add other wallet connectors like metamask or coinbase wallet if desired
]
});
```
With the above configuration, you can access the mini app user's connected wallet with normal wagmi hooks like `useAccount()`.
## Connecting to Solana
For Solana support, install the package and wrap your app with the Solana provider:
```bash Bash theme={"system"}
npm install @farcaster/mini-app-solana
```
```typescript App.tsx theme={"system"}
import { FarcasterSolanaProvider } from '@farcaster/mini-app-solana';
function App() {
const solanaEndpoint = 'https://solana-rpc.publicnode.com';
return (
{/* Your app components */}
);
}
```
Use Solana wallet hooks in your components:
```typescript SolanaExample.tsx theme={"system"}
import { useSolanaConnection, useSolanaWallet } from '@farcaster/mini-app-solana';
import { Transaction, SystemProgram, PublicKey } from '@solana/web3.js';
function SolanaExample() {
const { publicKey, signMessage, sendTransaction } = useSolanaWallet();
const { connection } = useSolanaConnection();
const handleSign = async () => {
if (!signMessage) return;
const message = new TextEncoder().encode("Hello Solana!");
const signature = await signMessage(message);
console.log('Signed:', btoa(String.fromCharCode(...signature)));
};
const handleSend = async () => {
if (!publicKey || !sendTransaction) return;
const { blockhash } = await connection.getLatestBlockhash();
const transaction = new Transaction();
transaction.add(
SystemProgram.transfer({
fromPubkey: publicKey,
toPubkey: new PublicKey('DESTINATION_ADDRESS'),
lamports: 1000000, // 0.001 SOL
})
);
transaction.recentBlockhash = blockhash;
transaction.feePayer = publicKey;
const signature = await sendTransaction(transaction, connection);
console.log('Transaction:', signature);
};
return (