skills.rest
mashharuki
mashharukiCOMMUNITY
Explore all skills by this author →
Website𝕏@haruki_web3GitHub

frontend-playbook

Automate Ethereum dApp frontend deployment to IPFS or Vercel with ENS content-hash updates.

Updated Apr 8, 2026
Search Tags:#deployment#frontend#vercel#ethereum#dapp#ens#ipfs
One-click install
npx skills add https://github.com/mashharuki/flare-sample --skill frontend-playbook-mashharuki
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-playbook
Source: https://github.com/mashharuki/flare-sample/tree/main/.claude/skills/eth-frontend-playbook
Command: npx skills add https://github.com/mashharuki/flare-sample --skill frontend-playbook-mashharuki

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Deploying Ethereum frontend applications built with Scaffold-ETH and Next.js to production involves many subtle, easy-to-miss pitfalls: local fork vs empty chain testing, static export quirks on IPFS, Node 25+ localStorage polyfills, route 404s caused by missing trailing slashes, stale CI builds, and correct ENS content-hash configuration. This playbook collects the proven build steps, verification checks, and deployment options so teams avoid common failures and ship predictable releases.

Core Features & Use Cases

  • Fork-mode development: Use real-chain state via anvil forks so frontend integration tests run against real tokens, liquidity, and contract state instead of empty local chains.
  • IPFS-safe static export: Clean-build guidance, localStorage polyfill, trailingSlash configuration, CID verification, and routing checks to ensure every route serves an index.html on IPFS.
  • Vercel & ENS guidance: Monorepo Vercel settings, prebuilt workflow alternatives, and the two-transaction ENS subdomain flow with verification steps.
  • Production checklist and QA: End-to-end build verification, OG image and metadata validation, onchain content-hash checks, and browser UX test steps for wallet flows.
  • Use case: Ship a Scaffold-ETH dApp from forked local testing to a verified myapp.yourname.eth.link IPFS deployment with ENS content-hash set and QA signoff.

Quick Start

Prepare your Scaffold-ETH Next.js project for production by enabling fork-mode testing, building an IPFS-safe static export with trailingSlash and a localStorage polyfill, uploading the out/ folder to IPFS, saving the new CID, and setting that CID as the ENS subdomain content hash.

Frequently Asked Questions about frontend-playbook

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I deploy a Scaffold-ETH dApp to IPFS without getting 404 errors?▼

To deploy a Scaffold-ETH dApp to IPFS without 404 errors, you must configure Next.js static export with trailingSlash enabled. This ensures every route generates its own index.html file, allowing IPFS gateway routing to resolve nested paths correctly.

How do I set an IPFS content hash to an ENS subdomain for my dApp?▼

Setting an IPFS content hash to an ENS subdomain requires a two-transaction flow. You first update the ENS subdomain resolver's content hash with your new IPFS CID, then verify the onchain content hash to ensure the deployment serves correctly via your ENS subdomain.

Why does my Next.js dApp static export fail on Node 25+?▼

Next.js dApp static exports fail on Node 25+ due to missing browser APIs during the build process. You must implement a localStorage polyfill in your project configuration to allow the static export to complete successfully without runtime errors.

How do I test my Ethereum dApp frontend against real contract state locally?▼

To test your Ethereum dApp frontend against real contract state locally, use anvil fork-mode development. This creates a local chain forked from real-chain state, allowing integration tests to interact with actual tokens, liquidity, and live contract data instead of an empty local chain.

Can I deploy a Next.js monorepo dApp to Vercel and still use ENS subdomains?▼

Yes, you can deploy a Next.js monorepo dApp to Vercel and use ENS subdomains. The deployment requires specific Vercel monorepo configuration settings for your build, after which you can independently set and verify your ENS subdomain content hash onchain.

What is the best way to verify an Ethereum dApp production deployment?▼

The best way to verify an Ethereum dApp production deployment is through comprehensive QA checks. This includes validating OG images, metadata, onchain ENS content-hash verification, IPFS CID verification, and executing browser UX test steps for wallet connection flows.

Related Skills

Explore More Software Engineering Skills→
niconiahiniconiahi
1

testing

Spawn and manage isolated anvil EVM instances for vitest tests.

Community
Advanced
involvexinvolvex

qa

Report PASS/FAIL QA checks for Scaffold-ETH 2 dApps post-build.

Community
Advanced
ccashwellccashwell
120

ipfs-deployment

Automate dApp frontend deployment to IPFS with pinning and ENS content hashes.

Community
Intermediate
ZodomoZodomo
7

frontend-playbook

Build and deploy Ethereum dApp frontends with Next.js static export to IPFS or Vercel.

Community
Advanced