Application frontend overview

Intermediate

Concept

Dapps deployed on ICP often utilize a frontend interface to facilitate user interaction with the application. Application frontends include the user interface, webpage, dashboard, or other assets that are displayed in the web browser.

Frontend canisters are also referred to as 'asset canisters', since they are defined as "type": "asset" in the dfx.json file for a project.

Frontends can exist in the following forms:

• A frontend canister that communicates with backend canister(s) to provide a full-stack dapp. You can learn more by viewing the default frontend canister and learn how to customize it.

• Backend canisters communicate with an external frontend application that isn't hosted on ICP. To facilitate this communication, agent-js can be used. You can learn more about the JS request API.

• A frontend canister that doesn't communicate with any backend canisters and only provides web assets such as a website. Learn more about serving static assets.

Resources

• Customize the default frontend canister.

• Using raw HTML and JavaScript to display a simple HTML entry page.

• Using React and TypeScript to import CSS properties from an external file.

• Vite + React + Motoko template example.

• Vite + SvelteKit + Motoko template example.

• Deploying an existing React application as a frontend canister.