From 97f11bbc42c928cdc63c43ccd079e97572eacbd1 Mon Sep 17 00:00:00 2001 From: Raymond Khalife Date: Mon, 8 Jun 2026 16:52:17 -0400 Subject: [PATCH 1/4] chore: use the asset canister cookie to lookup the root key --- hello-world/react-frontend/src/App.tsx | 10 ++++++---- hello-world/vue-frontend/src/App.vue | 21 ++++++++++++++++++--- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/hello-world/react-frontend/src/App.tsx b/hello-world/react-frontend/src/App.tsx index e8813a0..c8b6dda 100644 --- a/hello-world/react-frontend/src/App.tsx +++ b/hello-world/react-frontend/src/App.tsx @@ -12,15 +12,17 @@ interface CanisterEnv { } // We only want to access the environment variables when serving the frontend from the asset canister. -// In development mode, we use a fixed canister ID for the backend canister. +// `getCanisterEnv` will retrive the environment variables and the root key from the cookie returned +// by the asset canister +// When developing locally, the vite server will inject the cookie into the responses +// see vite.config.ts const canisterEnv = getCanisterEnv(); const canisterId = canisterEnv["PUBLIC_CANISTER_ID:backend"]; -// We want to fetch the root key from the replica when developing locally. +// We always use the rootkey that is coming back from the cookie in the asset canister const helloWorldActor = createActor(canisterId, { agentOptions: { - rootKey: !import.meta.env.DEV ? canisterEnv!.IC_ROOT_KEY : undefined, - shouldFetchRootKey: import.meta.env.DEV, + rootKey: canisterEnv.IC_ROOT_KEY, }, }); diff --git a/hello-world/vue-frontend/src/App.vue b/hello-world/vue-frontend/src/App.vue index 5841879..ba2f92e 100644 --- a/hello-world/vue-frontend/src/App.vue +++ b/hello-world/vue-frontend/src/App.vue @@ -3,10 +3,25 @@ import { ref } from "vue"; import { createActor } from "./bindings/backend"; import { safeGetCanisterEnv } from "@icp-sdk/core/agent/canister-env"; -const canisterEnv = safeGetCanisterEnv(); -const canisterId = canisterEnv?.["PUBLIC_CANISTER_ID:backend"]; -const actor = createActor(canisterId, { +// Here we define the environment variables that the asset canister serves. +// By default, the CLI sets all the canister IDs in the environment variables of the asset canister +// using the `PUBLIC_CANISTER_ID:` format. +// For this reason, we can expect the `PUBLIC_CANISTER_ID:backend` environment variable to be set. +interface CanisterEnv { + readonly "PUBLIC_CANISTER_ID:backend": string; +} + +// We only want to access the environment variables when serving the frontend from the asset canister. +// `getCanisterEnv` will retrive the environment variables and the root key from the cookie returned +// by the asset canister +// When developing locally, the vite server will inject the cookie into the responses +// see vite.config.ts +const canisterEnv = getCanisterEnv(); +const canisterId = canisterEnv["PUBLIC_CANISTER_ID:backend"]; + +// We always use the rootkey that is coming back from the cookie in the asset canister +const helloWorldActor = createActor(canisterId, { agentOptions: { rootKey: canisterEnv.IC_ROOT_KEY, }, From a8a33a7c4e0843436e0fb51bc6465401d4f92704 Mon Sep 17 00:00:00 2001 From: Raymond Khalife Date: Mon, 8 Jun 2026 17:14:31 -0400 Subject: [PATCH 2/4] fix tsx in vue --- hello-world/react-frontend/src/App.tsx | 2 +- hello-world/vue-frontend/src/App.vue | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/hello-world/react-frontend/src/App.tsx b/hello-world/react-frontend/src/App.tsx index c8b6dda..88416e1 100644 --- a/hello-world/react-frontend/src/App.tsx +++ b/hello-world/react-frontend/src/App.tsx @@ -19,7 +19,7 @@ interface CanisterEnv { const canisterEnv = getCanisterEnv(); const canisterId = canisterEnv["PUBLIC_CANISTER_ID:backend"]; -// We always use the rootkey that is coming back from the cookie in the asset canister +// We always use the root key that is coming back from the cookie in the asset canister const helloWorldActor = createActor(canisterId, { agentOptions: { rootKey: canisterEnv.IC_ROOT_KEY, diff --git a/hello-world/vue-frontend/src/App.vue b/hello-world/vue-frontend/src/App.vue index ba2f92e..d3b9805 100644 --- a/hello-world/vue-frontend/src/App.vue +++ b/hello-world/vue-frontend/src/App.vue @@ -1,8 +1,7 @@ - From 4bfb8d0b09451eb695c2ee69f802679a2c8b0aed Mon Sep 17 00:00:00 2001 From: raymondk Date: Mon, 8 Jun 2026 17:16:42 -0400 Subject: [PATCH 3/4] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- hello-world/react-frontend/src/App.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/hello-world/react-frontend/src/App.tsx b/hello-world/react-frontend/src/App.tsx index 88416e1..b648a0c 100644 --- a/hello-world/react-frontend/src/App.tsx +++ b/hello-world/react-frontend/src/App.tsx @@ -12,10 +12,10 @@ interface CanisterEnv { } // We only want to access the environment variables when serving the frontend from the asset canister. -// `getCanisterEnv` will retrive the environment variables and the root key from the cookie returned -// by the asset canister -// When developing locally, the vite server will inject the cookie into the responses -// see vite.config.ts +// `getCanisterEnv` will retrieve the environment variables and the root key from the cookie returned +// by the asset canister. +// When developing locally, the Vite server will inject the cookie into the responses. +// See vite.config.ts. const canisterEnv = getCanisterEnv(); const canisterId = canisterEnv["PUBLIC_CANISTER_ID:backend"]; From c0fae3f7f9fd469f86533f1e640c2f14e7c1e769 Mon Sep 17 00:00:00 2001 From: raymondk Date: Mon, 8 Jun 2026 17:17:58 -0400 Subject: [PATCH 4/4] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- hello-world/vue-frontend/src/App.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/hello-world/vue-frontend/src/App.vue b/hello-world/vue-frontend/src/App.vue index d3b9805..042cf51 100644 --- a/hello-world/vue-frontend/src/App.vue +++ b/hello-world/vue-frontend/src/App.vue @@ -12,10 +12,10 @@ interface CanisterEnv { } // We only want to access the environment variables when serving the frontend from the asset canister. -// `getCanisterEnv` will retrive the environment variables and the root key from the cookie returned -// by the asset canister -// When developing locally, the vite server will inject the cookie into the responses -// see vite.config.ts +// `getCanisterEnv` will retrieve the environment variables and the root key from the cookie returned +// by the asset canister. +// When developing locally, the Vite server will inject the cookie into the responses. +// See vite.config.ts. const canisterEnv = getCanisterEnv(); const canisterId = canisterEnv["PUBLIC_CANISTER_ID:backend"];