Create Dynamic App

A powerful CLI tool to generate starter applications with Dynamic's web3 authentication. Quickly bootstrap projects using your preferred frameworks, libraries, and blockchain networks.

Table of Contents

• Create Dynamic App
  • Table of Contents
  • Installation
  • Quick Start
  • Features
  • Supported Chains
  • Project Options
    • Frameworks
    • Library Options
  • Usage Examples
    • Generate a Next.js App with Specific Options
    • Generate a React App
    • Generate Projects for Development/Testing
  • Project Structure
    • Next.js Project
    • React Project
  • Troubleshooting
    • Common Issues
  • Contributing
  • License

Installation

You can use Create Dynamic App directly with npx:

npx create-dynamic-app my-project-name

Or install it globally:

npm install -g create-dynamic-app
create-dynamic-app my-project-name

Quick Start

# Create a new project with interactive prompts
npx create-dynamic-app my-web3-app

# Follow the prompts to select:
# 1. Framework (Next.js, React, React Native)
# 2. Blockchain chains to support
# 3. Library preferences (Viem/Ethers, Wagmi)

Features

• Multiple Framework Support: Generate applications using Next.js, React, or React Native
• Blockchain Flexibility: Choose from 7 different blockchain networks to include
• Library Options: Select your preferred Ethereum libraries (Viem or Ethers.js)
• Wagmi Integration: Optional Wagmi support for enhanced React hooks
• Ready-to-use Components: Includes auth components and chain-specific utility methods
• Dark/Light Mode: Built-in theme support that respects system preferences

Supported Chains

The CLI supports the following blockchain networks:

Project Options

Frameworks

• Next.js: Server-side rendering, file-based routing, optimized for production
• React: Client-side SPA with Create React App configuration
• React Native: Mobile application support with Expo

Library Options

When including Ethereum support, you can choose:

• Viem: Modern, lightweight TypeScript library for Ethereum
• Ethers.js: Popular, full-featured Ethereum library
• Wagmi: React hooks for Ethereum (can be combined with either Viem or Ethers)

Usage Examples

Generate a Next.js App with Specific Options

# To create a specific Next.js project
npx create-dynamic-app my-next-app --framework nextjs --chains ethereum,solana --library viem --wagmi

Generate a React App

# To create a specific React project
npx create-dynamic-app my-react-app --framework react --chains ethereum --library ethers

Generate Projects for Development/Testing

# Generate all variations for testing
npm run generate:all

Project Structure

The generated projects follow best practices for their respective frameworks:

Next.js Project

my-next-app/
├── app/                 # Next.js app directory
│   ├── components/      # React components
│   ├── page.tsx         # Main application page
│   └── layout.tsx       # Root layout
├── lib/                 # Utility functions
│   ├── dynamic.ts       # Dynamic SDK exports
│   ├── providers.tsx    # Context providers
│   └── wagmi.ts         # Wagmi configuration (if selected)
├── public/              # Static assets
└── package.json         # Dependencies and scripts

React Project

my-react-app/
├── public/              # Static assets
├── src/                 # Source code
│   ├── App.js           # Main application component
│   ├── Main.js          # Content component
│   ├── Methods.js       # Chain-specific utility methods
│   └── index.js         # Application entry point
└── package.json         # Dependencies and scripts

Troubleshooting

Common Issues

Issue: Error installing dependencies with npm Solution: Try using --legacy-peer-deps flag or use yarn:

cd my-dynamic-project
npm install --legacy-peer-deps

Issue: Conflicts with Solana dependencies Solution: The generator adds necessary overrides. If you have issues, manually set:

"overrides": {
  "rpc-websockets": "7.10.0",
  "@solana/web3.js": "1.91.6"
}

Issue: Environment ID is missing Solution: Replace the placeholder in providers.tsx/App.js:

environmentId: "YOUR_ENVIRONMENT_ID", // Get from Dynamic dashboard

Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Run tests and linting (npm run lint && npm test)
5. Commit your changes (git commit -m 'Add some amazing feature')
6. Push to the branch (git push origin feature/amazing-feature)
7. Open a Pull Request

License

ISC License - see the LICENSE file for details.