Ipfs Deployment

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,  // CRITICAL: IPFS serves directories, needs index.html in each
  images: {
    unoptimized: true,   // No image optimization server on IPFS
  },
  assetPrefix: './',     // Relative paths for IPFS gateway compatibility
};

module.exports = nextConfig;

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  base: './',  // Relative paths
  build: {
    outDir: 'dist',
  },
});

{
  "homepage": "."
}

# ALWAYS clean before building for IPFS
rm -rf out/ dist/ .next/

# Build
npm run build

# Verify the output
ls -la out/  # or dist/
# Should contain index.html and all static assets

# Install Pinata CLI
npm install -g @pinata/cli

# Pin a directory
pinata upload ./out

# Or via API
curl -X POST "https://api.pinata.cloud/pinning/pinFileToIPFS" \
  -H "Authorization: Bearer $PINATA_JWT" \
  -F "file=@./out"

// Programmatic pinning
import PinataSDK from '@pinata/sdk';

const pinata = new PinataSDK({ pinataJWTKey: process.env.PINATA_JWT });

const result = await pinata.pinFromFS('./out', {
  pinataMetadata: { name: 'my-dapp-v1.2.0' },
  pinataOptions: { cidVersion: 1 },
});

console.log('IPFS Hash:', result.IpfsHash);
// e.g., bafybeie5gq4jxvzmsym6hjlwxej4rwdoxt7wadqvmmwbqqblsm54ceyaiq

# Install Fleek CLI
npm install -g @fleek-platform/cli

# Login
fleek login

# Deploy
fleek sites deploy --dir ./out

# Add to local IPFS node
ipfs add -r ./out --cid-version 1
# Returns CID: bafybeie5gq4jxvzmsym6hjlwxej4...

# Pin to remote pinning service
ipfs pin remote add --service=pinata bafybeie5gq4jxvzmsym6hjlwxej4...

import { createWalletClient, http, namehash } from 'viem';
import { mainnet } from 'viem/chains';

const ENS_RESOLVER = '0x231b0Ee14048e9dCcD1d247744d114a4EB5E8E63';

// Set content hash to IPFS CID
const contentHash = encodeContentHash('ipfs://bafybeie5gq4jxvzmsym6hjlwxej4...');

await walletClient.writeContract({
  address: ENS_RESOLVER,
  abi: resolverAbi,
  functionName: 'setContenthash',
  args: [namehash('myprotocol.eth'), contentHash],
});

import { ethers } from 'ethers';

const resolver = await provider.getResolver('myprotocol.eth');
const tx = await resolver.setContentHash('ipfs://bafybeie5gq4jxvzmsym6hjlwxej4...');
await tx.wait();

# Pinata dedicated gateway
https://your-gateway.mypinata.cloud/ipfs/{cid}

# .github/workflows/deploy-ipfs.yml
name: Deploy to IPFS
on:
  push:
    tags: ['v*']

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - run: npm ci
      - run: npm run build

      - name: Pin to Pinata
        env:
          PINATA_JWT: ${{ secrets.PINATA_JWT }}
        run: |
          CID=$(npx @pinata/cli upload ./out --json | jq -r '.IpfsHash')
          echo "Deployed to IPFS: $CID"
          echo "Gateway: https://gateway.pinata.cloud/ipfs/$CID"
          echo "CID=$CID" >> $GITHUB_ENV

      - name: Update ENS (optional)
        if: github.ref_type == 'tag'
        env:
          DEPLOYER_KEY: ${{ secrets.ENS_DEPLOYER_KEY }}
        run: |
          # Update ENS content hash via script
          node scripts/update-ens.js ${{ env.CID }}