chore: use the asset canister cookie to lookup the root key

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<CanisterEnv>();
 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,
   },
 });
 

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:<canister-name>` 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<CanisterEnv>();
+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,
   },