Skip to content

Commit

Permalink
Merge branch 'pm-rename-ecosystem-tags' of github.com:dfinity/portal …
Browse files Browse the repository at this point in the history
…into pm-rename-ecosystem-tags
  • Loading branch information
meodai committed Dec 19, 2024
2 parents 089224e + 72296d8 commit 57d5252
Show file tree
Hide file tree
Showing 16 changed files with 122 additions and 199 deletions.
2 changes: 1 addition & 1 deletion docs/developer-docs/defi/tokens/token-standards.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ The ICP token is the network's native token used for various utility and governa

- Rewarding neurons for staking ICP into the neuron and voting on governance proposals.

View an example dapp for [ICP transfers](https://github.com/dfinity/examples/tree/master/motoko/icp_transfer).
View an example dapp for [ICP transfers](https://github.com/dfinity/examples/tree/master/motoko/token_transfer).

## ICRC-1

Expand Down
2 changes: 1 addition & 1 deletion docs/developer-docs/getting-started/explore-examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ https://2drrs-wqaaa-aaaab-qblbq-cai.icp1.io

The **backend canister** URL will open the [Candid UI](/docs/current/developer-docs/smart-contracts/candid/candid-concepts) which can interact directly with the backend canister's methods. A **method** is a function exposed by the canister that can be called by a user, another canister, or the application's frontend.

The **frontend** URL will open the application's frontend user interface. To create this frontend, the project's React files (shown in the ICP Ninja code editor within the `frontend/` folder) have been compiled and deployed as an [asset canister](/docs/current/developer-docs/web-apps/application-frontends/default-frontend).
The **frontend** URL will open the application's frontend user interface. To create this frontend, the project's React files (shown in the ICP Ninja code editor within the `frontend/` folder) have been compiled and deployed as an [asset canister](/docs/current/developer-docs/web-apps/application-frontends/overview).

:::info
This application will be live for 20 minutes. After 20 minutes, it will expire, and the URLs will become invalid. The project code will still be accessible, and you can redeploy the application at any time to view it for another 20 minutes.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";


# Introduction
# What are canisters?

<MarkdownChipRow labels={["Beginner", "Concept"]} />

Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ import Tabs from "@theme/Tabs";



# Using an existing frontend application
# Using an existing application frontend

<MarkdownChipRow labels={["Intermediate", "Tutorial"]} />

While numerous starter projects and examples exist for those who prefer to start from scratch, deploying an existing frontend application as a frontend <GlossaryTooltip>canister</GlossaryTooltip> is also a viable option for building an application on ICP.
While numerous starter projects and examples exist for those who prefer to start from scratch, deploying an existing application frontend as a frontend <GlossaryTooltip>canister</GlossaryTooltip> is also a viable option for building an application on ICP.

:::caution
Server methods such as `getServerSideProps` are not supported, since it will be deployed as a client-only application.
Expand Down
34 changes: 24 additions & 10 deletions docs/developer-docs/web-apps/application-frontends/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@ keywords: [beginner, concept, frontend, asset canister, assets]
import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";

# What is an asset canister?
# Application frontends

<MarkdownChipRow labels={["Beginner", "Concept"]} />

Dapps often utilize a frontend interface to facilitate user interaction with the application through elements such as a dashboard, account page, media player, or other assets that are displayed in the web browser. These assets may be in the form of HTML, JavaScript, CSS, or other frontend frameworks like React.
Dapps often utilize a frontend interface to facilitate user interaction with the application through elements such as a dashboard, account page, media player, or other assets that are displayed in the web browser. These assets may be in the form of HTML, JavaScript, CSS, or use frontend frameworks like React.

Application frontends are often referred to as **asset <GlossaryTooltip>canisters</GlossaryTooltip>** on ICP, since they are canisters defined as `"type": "asset"` in the `dfx.json` file for a project. Projects created by the `dfx new` command have the option to include a default asset canister named using the project's name and the suffix `_frontend`, such as `hello_world_frontend`.
Application frontends are hosted on ICP using **asset canisters**. Asset canisters compile frontend assets like CSS and JavaScript into a Wasm module that can be deployed on ICP as a canister.

:::info
The terms 'asset canister' and 'frontend canister' are often used interchangeably.
The terms 'asset canister' and 'frontend canister' are sometimes used interchangeably. **Asset** canister is typically used to describe the Rust code `dfx` uses in the background to compile a project's frontend assets into Wasm. **Frontend** canister is typically used as a general term to describe a project's frontend.
:::

Application frontends exist in the following forms:
Expand All @@ -33,7 +33,7 @@ When a canister is configured in a project's `dfx.json` file as `"type": "asset"

## Default settings

By default, all projects created with `dfx new` have the option to include a frontend canister in the project. This default frontend canister is written in Rust and uses one of the following frontend frameworks: SvelteKit, React, Vue, or Vanilla JS. The user can choose the framework through the `dfx new` interactive prompt in `dfx` versions 0.17.0 and newer.
By default, all projects created with `dfx new` have the option to include a frontend canister in the project. This default frontend canister is written in Rust and may use one of the following frontend frameworks: SvelteKit, React, Vue, or Vanilla JS. The user can choose the framework through the `dfx new` interactive prompt in `dfx` versions 0.17.0 and newer.

For asset canisters created by `dfx new`, the default configuration will include:

Expand Down Expand Up @@ -107,7 +107,25 @@ The [Express HTTP server](https://demergent-labs.github.io/azle/) package via Az

The frontend canister can host roughly 1GiB in static files. It is recommended that you distribute your files across multiple canisters if the total size of all your assets begins to exceed this amount. Once you exceed this figure, your canister may fail to upgrade.

## Dynamic URLs
## Application URLs

Frontend canisters serve the application's web assets via a URL that contains the <GlossaryTooltip>canister</GlossaryTooltip>'s ID. Local deployments use local URLs such as `http://127.0.0.1:4943/?canisterId=<canister-id>`, while applications deployed to the mainnet use public URLs containing the canister's ID followed by `.ic0.app`, `.icp0.io` or `raw.icp0.io`.

### Raw HTTP interfaces

The `raw.icp0.io` domain provides a way to access the raw HTTP interface of that canister. For local deployments that want to simulate the behavior of the `raw.icp0.io` domain, you must implement a method in your canister that consumes an HTTP request and outputs an HTTP response. Here is an example written in Motoko:

```motoko no-repl
public shared(msg) func http_request(req: HttpRequest) : async HttpResponse {
{
status = { code = 200; reason = "OK" };
headers = [( "Content-Type", "text/plain" )];
body = Text.encodeUtf8("Hello, World!");
}
};
```

### Dynamic URLs

Dynamic URLs are currently not supported by the default frontend canister.

Expand Down Expand Up @@ -138,7 +156,3 @@ let path = HttpCertificationPath::wildcard("/js");
- [Vite + SvelteKit + Motoko](https://github.com/letmejustputthishere/vite-sveltekit-motoko-ii/tree/main) template example.

- Deploying an [existing Next.js application](./existing-frontend.mdx) as a frontend canister.

## Next steps

[Learn how to use and customize the default frontend canister](default-frontend.mdx).
Original file line number Diff line number Diff line change
Expand Up @@ -623,7 +623,7 @@ Start by creating the file `src/poll_frontend/src/index.html` that contains the
**What does this code do?**
The HTML code above is a simple form that provides the end user with options to select using radio buttons. There is nothing 'Web3' or specific to ICP about this code.

Then, the `<head>` tag is used to include some basic CSS for the page's styling. To learn more about adding a stylesheet, see: [add a stylesheet](/docs/current/developer-docs/web-apps/application-frontends/default-frontend).
Then, the `<head>` tag is used to include some basic CSS for the page's styling. To learn more about adding a stylesheet, see: [add a stylesheet](/docs/current/developer-docs/web-apps/application-frontends/overview).
:::

Next, you will need a `webpack.config.js` file that defines several parameters to facilitate your local development web server.
Expand Down
Loading

0 comments on commit 57d5252

Please sign in to comment.