create-universal-dapp

create-universal-dapp

A CLI tool to scaffold Push Chain applications with your choice of framework and tooling.

Quick Start

npm install -g create-universal-dapp
create-universal-dapp my-app

Or use npx:

npx create-universal-dapp my-app

Features

• ⚡ Multiple Frameworks: Choose between Next.js or Vite (React)
• 🔧 ESLint: Optional code linting setup
• 📦 Push Chain Integration: Pre-configured with @pushchain/core and @pushchain/ui-kit
• 🚀 TypeScript: Full TypeScript support out of the box
• 🎨 Styling: Tailwind CSS set up by default

Usage

Interactive Mode

Run the CLI without arguments to enter interactive mode:

create-universal-dapp

You'll be prompted to:

• Choose your project name
• Select a framework (Next.js or Vite)
• Enable/disable ESLint

Command Line Options

create-universal-dapp my-app --framework nextjs --eslint

Available options:

• -f, --framework <framework>: Choose 'nextjs' or 'vite'
• --eslint / --no-eslint: Include/exclude ESLint configuration

Generated Project Structure

Next.js Project

my-app/
├── src/
│   ├── app/
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   └── lib/
│       ├── pushchain.tsx    # Push Chain provider
│       └── utils.ts         # Utility functions
├── package.json
├── next.config.js
├── tsconfig.json
└── tailwind.config.js

Vite Project

my-app/
├── src/
│   ├── components/
│   ├── lib/
│   │   ├── pushchain.tsx    # Push Chain provider
│   │   └── utils.ts         # Utility functions
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
└── tailwind.config.js

Push Chain Integration

The generated project includes:

1. PushChain Provider

A React context provider that manages the Push Chain connection:

import { usePushChain } from '@/lib/pushchain'

function MyComponent() {
  const { pushChain, isConnected, connect, disconnect, error } = usePushChain()
  
  // Use Push Chain methods here
}

2. Demo Component

A working example showing how to:

• Connect to Push Chain
• Send messages
• Handle errors
• Display connection status

3. Environment Variables

Configure your Push Chain settings:

# Next.js
NEXT_PUBLIC_PUSHCHAIN_API_KEY=your_api_key_here
NEXT_PUBLIC_PUSHCHAIN_NETWORK=testnet

# Vite
VITE_PUSHCHAIN_API_KEY=your_api_key_here
VITE_PUSHCHAIN_NETWORK=testnet

Development

To work on this CLI tool:

git clone https://github.com/pushchain/create-universal-dapp
cd create-universal-dapp
npm install
npm run build
npm link

Then you can test it:

create-universal-dapp test-app

Scripts

• npm run build - Build the CLI
• npm run dev - Run in development mode
• npm start - Run the built CLI

Next Steps

After creating your project:

• Configure Environment Variables: Set up your Push Chain API keys
• Customize the Integration: Replace example code with your specific Push Chain functionality
• Add Features: Build upon the generated structure
• Explore Push Chain: Check out the @pushchain/ui-kit for additional components

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT