AlgoKit Logo
Gallery
Back to templates

React Vite Basic

Codespace Visit Demo

Creator Algorand Foundation

Source
react
vite
frontend
typescript

A baseline React web app for developing integrating with any ARC56 compliant Algorand smart contracts.

Features

Use Wallet Integration
Testnet Deployment
Transactions Sending
React Vite Basic

React Vite Typescript Example

This starter React project has been generated using AlgoKit. See below for default getting started instructions.

Setup

Initial Setup

1. Clone the Repository

Start by cloning this repository to your local machine.

2. Install Pre-requisites

Ensure the following pre-requisites are installed and properly configured:

  • npm: Node package manager. Install from Node.js Installation Guide. Verify with npm -v to see version 18.12+.
  • AlgoKit CLI: Essential for project setup and operations. Install the latest version from AlgoKit CLI Installation Guide. Verify installation with algokit --version, expecting 2.0.0 or later.

3. Bootstrap Your Local Environment

Run the following commands within the project folder:

  • Install Project Dependencies: With algokit project bootstrap all, ensure all dependencies are ready.

Development Workflow

Terminal

Directly manage and interact with your project using AlgoKit commands:

  1. Build Contracts: algokit project run build builds react web app and links with smart contracts in workspace, if any.
  2. Remaining set of command for linting, testing and deployment can be found in respective package.json file and .algokit.toml files.

VS Code

For a seamless experience with breakpoint debugging and other features:

  1. Open Project: In VS Code, open the repository root.
  2. Install Extensions: Follow prompts to install recommended extensions.
  3. Debugging:
    • Use F5 to start debugging.
    • Windows Users: Select the Python interpreter at ./.venv/Scripts/python.exe via Ctrl/Cmd + Shift + P > Python: Select Interpreter before the first run.

Other IDEs

While primarily optimized for VS Code, Jetbrains WebStorm has base support for this project:

  1. Open Project: In your JetBrains IDE, open the repository root.
  2. Automatic Setup: The IDE should configure the Python interpreter and virtual environment.
  3. Debugging: Use Shift+F10 or Ctrl+R to start debugging. Note: Windows users may encounter issues with pre-launch tasks due to a known bug. See JetBrains forums for workarounds.

AlgoKit Workspaces and Project Management

This project supports both standalone and monorepo setups through AlgoKit workspaces. Leverage algokit project run commands for efficient monorepo project orchestration and management across multiple projects within a workspace.

Please note, by default frontend is pre configured to run against Algorand LocalNet. If you want to run against TestNet or MainNet, comment out the current environment variable and uncomment the relevant one in .env file that is created after running bootstrap command and based on .env.template.

Algorand Wallet integrations

The template comes with use-wallet integration, which provides a React hook for connecting to an Algorand wallet providers. The following wallet providers are included by default:

  • LocalNet:
    • KMD/Local Wallet - Algorand’s Key Management Daemon (KMD) is a service that manages Algorand private keys and signs transactions. Works best with AlgoKit LocalNet and allows you to easily test and interact with your dApps locally.
  • TestNet and others:

Refer to official use-wallet documentation for detailed guidelines on how to integrate with other wallet providers (such as WalletConnect v2). Too see implementation details on the use wallet hook and initialization of extra wallet providers refer to App.tsx.

Tools

This project makes use of React and Tailwind to provider a base project configuration to develop frontends for your Algorand dApps and interactions with smart contracts. The following tools are in use:

  • AlgoKit Utils - Various TypeScript utilities to simplify interactions with Algorand and AlgoKit.
  • React - A JavaScript library for building user interfaces. {% if use_tailwind -%}
  • Tailwind CSS - A utility-first CSS framework for rapidly building custom designs. {% endif -%}{% if use_daisy_ui -%}
  • daisyUI - A component library for Tailwind CSS. {% endif -%}
  • use-wallet - A React hook for connecting to an Algorand wallet providers.
  • npm: Node.js package manager {% if use_jest -%}
  • jest: JavaScript testing framework {% endif -%}{% if use_playwright -%}
  • playwright: Browser automation library {% endif -%}{% if use_eslint_prettier -%}
  • Prettier: Opinionated code formatter
  • ESLint: Tool for identifying and reporting on patterns in JavaScript {% endif -%}{% if use_github_actions -%}
  • Github Actions workflows for build validation {% endif -%}

Integrating with smart contracts and application clients

Refer to the detailed guidance on integrating with smart contracts and application clients. In essence, for any smart contract codebase generated with AlgoKit or other tools that produce compile contracts into ARC34 compliant app specifications, you can use the algokit generate command to generate TypeScript or Python typed client. Once generated simply drag and drop the generated client into ./src/contracts and import it into your React components as you see fit.