refactor: remove canister-env module (#166)

Author: ilbertt

examples/icp-frontend-environment-variables/README.md

@@ -7,33 +7,27 @@ This example demonstrates how to pass environment variables from the asset canis
 This project consists of two canisters:
 
 - [backend](./backend/): a pre-built Hello World canister, together with its [`backend.did`](./backend/dist/hello_world.did) file.
-- [frontend](./frontend/): a [Vite](https://vite.dev/) webapp deployed in a [custom asset canister](./frontend/canister/assetstorage.wasm.gz), built specifically for this example.
+- [frontend](./frontend/): a [Vite](https://vite.dev/) webapp deployed in an asset canister.
 
 ### Bindings Generation
 
 The [`@icp-sdk/bindgen`](https://npmjs.com/package/@icp-sdk/bindgen) library offers a plugin for Vite that generates the TypeScript Candid bindings from the [`backend.did`](./backend/dist/hello_world.did) file. The bindings are generated at build time by Vite and are saved in the [`frontend/app/src/backend/api/`](./frontend/app/src/backend/api/) folder.
 
 The plugin supports hot module replacement, so you can run the frontend in development mode (by running `npm run dev` in the [`frontend/app/`](./frontend/app/) folder) and make changes to the Candid declaration file to see the bindings being updated in real time.
 
-The plugin also supports additional features, such as the ability to generate a TypeScript declaration file for the environment variables that are available to the frontend. The [`canister-env.d.ts`](./frontend/app/src/backend/api/canister-env.d.ts) file is generated automatically by the plugin and is used to type the environment variables in the frontend code. See the [Environment Variables](#environment-variables) section for more details.
-
 See the [`vite.config.ts`](./frontend/app/vite.config.ts) file for how the plugin is used.
 
 ### Environment Variables
 
 The project is configured to pass the backend's canister ID to the frontend using a [cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies). The environment variables are made available to the frontend JS code that runs in the browser by following this flow:
 
 1. During deployment, the `icp` CLI sets the backend's canister ID in the frontend canister's (asset canister) environment variables
-2. The asset canister (built specifically for this example, its Wasm can be found in the [`frontend/canister/`](./frontend/canister/) folder) sets a specific cookie (named `ic_env`) that contains some environment variables when the assets are uploaded
+2. The asset canister sets a specific cookie (named `ic_env`) that contains some environment variables when the assets are uploaded
 3. The asset canister serves the frontend assets with the cookie set
-4. The frontend JS code uses the [`@icp-sdk/canister-env`](./frontend/libs/canister-env/) library to parse the cookie and extract the environment variables
+4. The frontend JS code uses the [`@icp-sdk/core/agent/canister-env`](https://js.icp.build/core/latest/canister-env/) module to parse the cookie and extract the environment variables
 
 In the [`App.tsx`](./frontend/app/src/App.tsx) file, you can see how the frontend can obtain the backend's canister ID from the environment variables and use it to create an actor for the backend canister.
 
-The [Bindings Generation](#bindings-generation) process is also configured to generate a TypeScript declaration file for the environment variables served by the asset canister, in order to make the frontend code more type-safe.
-
-> Note: the `@icp-sdk/canister-env` library is only available in this repository. It will soon be extracted into a separate repo and NPM package.
-
 ## Prerequisites
 
 Before you begin, ensure that you have the following installed:

examples/icp-frontend-environment-variables/frontend/app/package.json

@@ -11,14 +11,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@icp-sdk/canister-env": "*",
-    "@icp-sdk/core": "^4.0.5",
+    "@icp-sdk/core": "^4.2.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
-    "@icp-sdk/bindgen": "^0.1.0",
+    "@icp-sdk/bindgen": "^0.2.0",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^5.0.0",

examples/icp-frontend-environment-variables/frontend/app/src/App.tsx

@@ -1,18 +1,25 @@
 import { useState } from "react";
 import { createActor } from "./backend/api/hello_world";
-import { getCanisterEnv } from "@icp-sdk/canister-env";
+import { getCanisterEnv } from "@icp-sdk/core/agent/canister-env";
 import "./App.css";
 
+// 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.
+// In development mode, we use a fixed canister ID for the backend canister.
 const canisterEnv = getCanisterEnv<CanisterEnv>();
 const canisterId = canisterEnv["PUBLIC_CANISTER_ID:backend"];
 
+// We want to fetch the root key from the replica when developing locally.
 const helloWorldActor = createActor(canisterId, {
   agentOptions: {
-    rootKey: !import.meta.env.DEV ? canisterEnv.IC_ROOT_KEY : undefined,
+    rootKey: !import.meta.env.DEV ? canisterEnv!.IC_ROOT_KEY : undefined,
     shouldFetchRootKey: import.meta.env.DEV,
   },
 });
@@ -26,9 +33,7 @@ function App() {
       "name"
     ) as HTMLInputElement;
 
-    helloWorldActor.greet(nameInput.value).then((greeting) => {
-      setGreeting(greeting);
-    });
+    helloWorldActor.greet(nameInput.value).then(setGreeting);
     return false;
   }
 

examples/icp-frontend-environment-variables/frontend/app/src/backend/api/declarations/hello_world.did.d.ts

@@ -2,7 +2,7 @@
 
 // @ts-nocheck
 
-// This file was automatically generated by @icp-sdk/bindgen@0.1.0.
+// This file was automatically generated by @icp-sdk/bindgen@0.2.0.
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
@@ -21,7 +21,5 @@ export interface _SERVICE {
    */
   'greet' : ActorMethod<[string], string>,
 }
-export declare const idlService: IDL.ServiceClass;
-export declare const idlInitArgs: IDL.Type[];
 export declare const idlFactory: IDL.InterfaceFactory;
 export declare const init: (args: { IDL: typeof IDL }) => IDL.Type[];

examples/icp-frontend-environment-variables/frontend/app/src/backend/api/declarations/hello_world.did.js

@@ -2,18 +2,12 @@
 
 // @ts-nocheck
 
-// This file was automatically generated by @icp-sdk/bindgen@0.1.0.
+// This file was automatically generated by @icp-sdk/bindgen@0.2.0.
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { IDL } from '@icp-sdk/core/candid';
 
-export const idlService = IDL.Service({
-  'greet' : IDL.Func([IDL.Text], [IDL.Text], ['query']),
-});
-
-export const idlInitArgs = [];
-
 export const idlFactory = ({ IDL }) => {
   return IDL.Service({ 'greet' : IDL.Func([IDL.Text], [IDL.Text], ['query']) });
 };

examples/icp-frontend-environment-variables/frontend/app/src/backend/api/hello_world.ts

@@ -2,7 +2,7 @@
 
 // @ts-nocheck
 
-// This file was automatically generated by @icp-sdk/bindgen@0.1.0.
+// This file was automatically generated by @icp-sdk/bindgen@0.2.0.
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 

examples/icp-frontend-environment-variables/frontend/app/vite.config.ts

@@ -2,6 +2,13 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { icpBindgen } from "@icp-sdk/bindgen/plugins/vite";
 
+// Change these values to match your local replica.
+// The `icp network run` command will print the root key
+// and the `icp deploy` command will print the backend canister id.
+const IC_ROOT_KEY_HEX =
+  "308182301d060d2b0601040182dc7c0503010201060c2b0601040182dc7c050302010361008b52b4994f94c7ce4be1c1542d7c81dc79fea17d49efe8fa42e8566373581d4b969c4a59e96a0ef51b711fe5027ec01601182519d0a788f4bfe388e593b97cd1d7e44904de79422430bca686ac8c21305b3397b5ba4d7037d17877312fb7ee34";
+const BACKEND_CANISTER_ID = "txyno-ch777-77776-aaaaq-cai";
+
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
@@ -11,4 +18,17 @@ export default defineConfig({
       outDir: "./src/backend/api",
     }),
   ],
+  server: {
+    headers: {
+      "Set-Cookie": `ic_env=${encodeURIComponent(
+        `ic_root_key=${IC_ROOT_KEY_HEX}&PUBLIC_CANISTER_ID:backend=${BACKEND_CANISTER_ID}`
+      )}; SameSite=Lax;`,
+    },
+    proxy: {
+      "/api": {
+        target: "http://127.0.0.1:8000",
+        changeOrigin: true,
+      },
+    },
+  },
 });