Scaffold Stellar Frontend

To get started with Scaffold Stellar, visit its repo: github.com/AhaLabs/scaffold-stellar.

Under active development.

A modern, up-to-date toolkit for building Stellar smart contract frontends.

• ⚡️ Vite + React + TypeScript
• 🔗 Auto-generated contract clients
• 🧩 Example components for contract interaction
• 🛠 Hot reload for contract changes
• 🧪 Easy local/testnet deployment

This is the starter frontend generated by stellar scaffold init. See more at Scaffold Stellar.

Requirements

Before getting started, make sure you’ve met the requirements listed in the Soroban documentation and that the following tools are installed :

• Rust
• Cargo (comes with Rust)
• Rust target: install the compilation target listed in the Soroban setup guide
• Node.js (v22, or higher)
• npm: Comes with the node installer or can also be installed package managers such as Homebrew, Chocolatey, apt, etc.
• Stellar CLI
• Scaffold Stellar CLI Plugin

Quick Start

To get started with a fresh Scaffold Stellar project, follow the steps below:

1. Initialize a new project:

stellar scaffold init my-project
cd my-project

2. Set up your development environment:

# Copy and configure environment variables like network and STELLAR_SCAFFOLD_ENV
cp .env.example .env

# Install frontend dependencies
npm install

Have a look at environments.toml for more fined-grained control.

3. Start development environment:

npm run dev

Open the server URL in your web browser.

4. For testnet/mainnet deployment:

When you are ready for testnet, you need to deploy your contract using stellar registry. Some commands to get you started.

#  Note --source-account argument is omitted for clarity

# First publish your contract to the registry
stellar registry publish

# Then deploy an instance with constructor parameters
stellar registry deploy \
  --deployed-name my-contract \
  --published-name my-contract \
  -- \
  --param1 value1

# Can access the help docs with --help
stellar registry deploy \
  --deployed-name my-contract \
  --published-name my-contract \
  -- \
  --help

# Install the deployed contract locally
stellar registry create-alias my-contract

Scaffold Initial Project Structure

When you run stellar scaffold init, it creates a frontend-focused project structure with example contracts:

my-project/                      # Your initialized project
├── contracts/                   # Example smart contracts
├── packages/                    # Auto-generated TypeScript clients
├── src/                         # Frontend React application
│   ├── components/              # React components
│   ├── contracts/               # Contract interaction helpers
│   ├── debug/                   # Debugging contract explorer
│   ├── hooks/                   # Custom React hooks
│   ├── pages/                   # App Pages
│   ├── App.tsx                  # Main application component
│   └── main.tsx                 # Application entry point
├── target/                      # Build artifacts and WASM files
├── environments.toml            # Environment configurations
├── package.json                 # Frontend dependencies
└── .env                         # Local environment variables

This template provides a ready-to-use frontend application with example smart contracts and their TypeScript clients. You can use these as reference while building your own contracts and UI. The frontend is set up with Vite, React, and includes basic components for interacting with the contracts.