Basic React Frontend

View this sample's code on GitHub

Overview

A minimal React application hosted entirely onchain on ICP. It demonstrates how to deploy a static frontend as an asset canister — no backend needed.

Project structure

The /frontend folder contains the web assets for the application's user interface, built with React, Vite, and Tailwind CSS. The frontend is deployed as an asset canister — no backend canister is needed.

Deploying from ICP Ninja

This example can be deployed directly from ICP Ninja, a browser-based IDE for ICP. To continue developing locally after deploying from ICP Ninja, see BUILD.md.

Note: ICP Ninja currently uses dfx under the hood, which is why this example includes a dfx.json configuration file. dfx is the legacy CLI, being superseded by icp-cli, which is what developers should use for local development.

Build and deploy from the command line

Prerequisites

• Install Node.js
• Install icp-cli: npm install -g @icp-sdk/icp-cli @icp-sdk/ic-wasm

Install

Clone the example project:

git clone https://github.com/dfinity/examples
cd examples/hosting/react

Deployment

Start the local network:

icp network start -d

Deploy the canister:

icp deploy

The URL for the frontend depends on the canister ID. When deployed, the URL will look like this:

http://{canister_id}.localhost:8000

Stop the local network when done:

icp network stop