Update repo for dfx 0.12.0 (#1001)

* Update repo for dfx 0.12.0

This PR makes the following changes:
* use dfx 0.12.0 in CI
* remove deprecated network configuration from dfx.json files
* update documentation
* adapt using-dev-build test to read replica port by calling the dfx info command

* Implementing review feedback

* 🤖 Selenium screenshots auto-update

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

.github/actions/setup-dfx/action.yml

@@ -2,7 +2,7 @@ name: 'Setup DFX'
 description: Setup DFX
 inputs:
   dfx-version:
-    default: 0.11.2
+    default: 0.12.0
     description: The dfx version to be installed or loaded from cache.
     required: true
 runs:
@@ -26,3 +26,9 @@ runs:
         fi
         echo "DFX version"
         dfx --version
+
+    - name: Configure network
+      shell: bash
+      run: |
+        mkdir -p "$HOME/.config/dfx"
+        echo '{"local": {"bind": "0.0.0.0:4943","type": "ephemeral"}}' > "$HOME/.config/dfx/networks.json"

.github/workflows/canister-tests.yml

@@ -486,40 +486,20 @@ jobs:
           # Copy example to make sure it does not rely on living inside the II repo
           builddir=$(mktemp -d)
           cp -r ./demos/using-dev-build/. "$builddir"
+          
+          ii_wasm="$PWD/internet_identity_dev.wasm"
+          ii_did="$PWD/src/internet_identity/internet_identity.did"
+          
           pushd "$builddir"
 
           # Install npm deps
           npm ci
+          sed -i "s;https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity_dev.wasm;$ii_wasm;" ./dfx.json
+          sed -i "s;https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity.did;$ii_did;" ./dfx.json
 
-          # Create a fake curl so that we use this build's wasm and did files; also create "witness"
-          # files to make sure the fake curl was run (rm $witness_foo will fail otherwise)
-          witnesses=$(mktemp -d); witness_wasm="$witnesses/wasm"; witness_did="$witnesses/did"
-          curl_dir=$(mktemp -d)
-
-          cat > "$curl_dir/curl" << EOF
-          #!/usr/bin/env bash
-          case "\$*" in
-            *"internet_identity.wasm"*)
-              cp "$GITHUB_WORKSPACE"/internet_identity_dev.wasm ./internet_identity.wasm && touch $witness_wasm
-              ;;
-            *"internet_identity.did"*)
-              cp "$GITHUB_WORKSPACE"/src/internet_identity/internet_identity.did ./internet_identity.did && touch $witness_did
-              ;;
-            *)
-              echo "unexpected arguments: \$*"
-              exit 1
-              ;;
-          esac
-          EOF
-
-          chmod +x $curl_dir/curl
-          PATH=$curl_dir:$PATH dfx deploy --no-wallet --argument '(null)'
-          rm -rf "$curl_dir"; rm "$witness_wasm"; rm "$witness_did"; rmdir "$witnesses"
+          dfx deploy --no-wallet
 
           npm run test
-
-          # Clean up temp files
-          rm internet_identity.wasm; rm internet_identity.did
           popd
           rm -rf "$builddir"
 

HACKING.md

@@ -47,7 +47,7 @@ See `dfx canister call --help` and [the documentation](https://sdk.dfinity.org/d
 The `dfx` executable can proxy queries to the canister. To view it, run the following and open the resulting link in your browser:
 
 ```bash
-echo "http://localhost:8000?canisterId=$(dfx canister id internet_identity)"
+echo "http://localhost:4943?canisterId=$(dfx canister id internet_identity)"
 ```
 
 ### Building the frontend

demos/test-app/README.md

@@ -25,6 +25,6 @@ Note: These steps are intended to do development on the test-app. To simply run
 1. Ensure all dependencies are installed: `npm ci`
 2. Run the local replica `dfx start --clean`
 3. Deploy the canister to the local replica `dfx deploy`
-4. Visit the running site at http://localhost:8000?<canister_id>
+4. Visit the running site at http://localhost:4943?<canister_id>
    1. alternatively the dev server can be started by running `npm run develop` which can be accessed on http://localhost:8080
 

demos/test-app/dfx.json

@@ -12,11 +12,5 @@
       "packtool": ""
     }
   },
-  "networks": {
-    "local": {
-      "bind": "0.0.0.0:8000",
-      "type": "ephemeral"
-    }
-  },
   "version": 1
 }

demos/test-app/webpack.config.js

@@ -37,7 +37,7 @@ module.exports = {
       } catch (e) {
         throw Error(`Could get host from ${dfxJson}: ${e}`);
       }
-      // If the replicaHost lacks protocol (e.g. 'localhost:8000') the
+      // If the replicaHost lacks protocol (e.g. 'localhost:4943') the
       // requests are not forwarded properly
       if (!replicaHost.startsWith("http://")) {
         replicaHost = `http://${replicaHost}`;
@@ -79,7 +79,7 @@ module.exports = {
     port: 8081,
     proxy: {
       // Make sure /api calls land on the replica (and not on webpack)
-      "/api": "http://localhost:8000",
+      "/api": "http://localhost:4943",
     },
     allowedHosts: [".localhost", ".local", ".ngrok.io"],
   },

demos/using-dev-build/README.md

@@ -75,7 +75,7 @@ A detailed description of what happens behind the scenes is available in the [cl
 
 Let's now use those canisters. Don't care about details? Skip to the [helpers](#helpers).
 
-In order to talk to those canisters (for instance to view the webapp in your browser) you need to figure the ID of each canister and then use an URL of the form `https://localhost:8000/?canisterId=<canister ID>` (where `8000` is the port used by `dfx` to proxy calls to the replica; that port is usually specified in the `dfx.json`). You can find the canister IDs in the output of the `dfx command`, or by checking `dfx`'s "internal" (read: non-documented) state:
+In order to talk to those canisters (for instance to view the webapp in your browser) you need to figure the ID of each canister and then use an URL of the form `https://localhost:4943/?canisterId=<canister ID>` (where `4943` is the port used by `dfx` to proxy calls to the replica; that port is usually specified in the `dfx.json`). You can find the canister IDs in the output of the `dfx command`, or by checking `dfx`'s "internal" (read: non-documented) state:
 
 ```
 ~/internet-identity/demos/using-dev-build$ cat .dfx/local/canister_ids.json
@@ -94,11 +94,11 @@ In order to talk to those canisters (for instance to view the webapp in your bro
 }
 ```
 
-You might get different canister IDs (and that's totally fine). If the `webapp` canister ID is `rrkah-fqaaa-aaaaa-aaaaq-cai`, you should be able to point your browser to [`http://localhost:8000/?canisterId=rrkah-fqaaa-aaaaa-aaaaq-cai`](http://localhost:8000/?canisterId=rrkah-fqaaa-aaaaa-aaaaq-cai) to see the webapp. Hurray!
+You might get different canister IDs (and that's totally fine). If the `webapp` canister ID is `rrkah-fqaaa-aaaaa-aaaaq-cai`, you should be able to point your browser to [`http://localhost:4943/?canisterId=rrkah-fqaaa-aaaaa-aaaaq-cai`](http://localhost:4943/?canisterId=rrkah-fqaaa-aaaaa-aaaaq-cai) to see the webapp. Hurray!
 
 ![](./webapp.png)
 
-_If you actually use the webapp, make sure that the "Internet Identity URL" field points to `http://localhost:8000/?canisterId=<canister ID of the internet_identity canister>`._
+_If you actually use the webapp, make sure that the "Internet Identity URL" field points to `http://localhost:4943/?canisterId=<canister ID of the internet_identity canister>`._
 
 ## Helpers
 

demos/using-dev-build/dfx.json

@@ -1,17 +1,15 @@
 {
-  "__0": "The format of dfx.json is not documented. We use '__X' fields (unknown fields are ignored by dfx) to record our discoveries and other observations.",
+  "__0": "dfx.json reference: https://internetcomputer.org/docs/current/references/dfx-json-reference/",
+  "__1": "We use '__X' fields (unknown fields are ignored by dfx) to leave comments.",
   "canisters": {
     "internet_identity": {
       "__0": "The development build of Internet Identity. For more information, see https://github.com/dfinity/internet-identity#build-features-and-flavors",
-
       "type": "custom",
-      "candid": "internet_identity.did",
-      "wasm": "internet_identity.wasm",
+      "candid": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity.did",
+      "wasm": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity_dev.wasm",
 
-      "__1": "There is no standard way to pull remote canisters, so instead we have a dummy build script that",
-      "__2": "simply downloads the Internet Identity canister and Candid description.",
-      "__3": "See also: https://github.com/dfinity/sdk/issues/2085",
-      "build": "./scripts/download-did-and-wasm"
+      "__1": "Currently, dfx tries to shrink already optimized wasm modules. This is why we disable it here.",
+      "shrink": false
     },
 
     "whoami": {
@@ -39,11 +37,5 @@
       "packtool": ""
     }
   },
-  "networks": {
-    "local": {
-      "bind": "0.0.0.0:8000",
-      "type": "ephemeral"
-    }
-  },
   "version": 1
 }

demos/using-dev-build/test.ts

@@ -7,7 +7,7 @@
  */
 
 import * as fs from "fs";
-import { ChildProcess, spawn } from "child_process";
+import { ChildProcess, spawn, execSync } from "child_process";
 
 // Port and URL for II and the sign in app, then exported to the tests
 const II_DAPP_PORT = 8086;
@@ -57,19 +57,9 @@ function parseCanisterIDs(): CanisterIDs {
   }
 }
 
-function parseReplicaHost(): string {
-  const DFX_JSON_PATH = `${__dirname}/dfx.json`;
-  try {
-    const dfx_json = JSON.parse(fs.readFileSync(DFX_JSON_PATH, "utf8"));
-    let replicaHost = dfx_json.networks.local.bind;
-    if (!replicaHost.startsWith("http://")) {
-      replicaHost = `http://${replicaHost}`;
-    }
-    return replicaHost;
-  } catch (e) {
-    console.log(`Could not read replica host from ${DFX_JSON_PATH}`);
-    throw e;
-  }
+function getReplicaHost(): string {
+  let port = execSync("dfx info webserver-port");
+  return `http://localhost:${port}`;
 }
 
 /*
@@ -99,7 +89,7 @@ function main() {
     `Using canister IDs: internet_identity: ${canisterIds.internetIdentity}, webapp: ${canisterIds.webapp}`
   );
 
-  const replicaHost = parseReplicaHost();
+  const replicaHost = getReplicaHost();
   console.log(`Using replica host: ${replicaHost}`);
 
   const proxy = spawnProxy(canisterIds, replicaHost);

demos/using-dev-build/webapp/index.js

@@ -19,7 +19,7 @@ export const init = ({ IDL }) => {
 document.body.onload = () => {
   let iiUrl;
   if (process.env.DFX_NETWORK === "local") {
-    iiUrl = `http://localhost:8000/?canisterId=${process.env.II_CANISTER_ID}`;
+    iiUrl = `http://localhost:4943/?canisterId=${process.env.II_CANISTER_ID}`;
   } else if (process.env.DFX_NETWORK === "ic") {
     iiUrl = `https://${process.env.II_CANISTER_ID}.ic0.app`;
   } else {

demos/using-dev-build/webpack.config.js

@@ -78,7 +78,7 @@ module.exports = {
   devServer: {
     proxy: {
       "/api": {
-        target: "http://localhost:8000",
+        target: "http://localhost:4943",
         changeOrigin: true,
         pathRewrite: {
           "^/api": "/api",

dfx.json

@@ -4,19 +4,14 @@
       "type": "custom",
       "candid": "src/internet_identity/internet_identity.did",
       "wasm": "internet_identity.wasm",
-      "build": "scripts/build"
+      "build": "scripts/build",
+      "shrink" : false
     }
   },
   "defaults": {
     "build": {
       "packtool": ""
     }
   },
-  "networks": {
-    "local": {
-      "bind": "0.0.0.0:8000",
-      "type": "ephemeral"
-    }
-  },
   "version": 1
 }

docker-test-env/reverse_proxy/nginx.conf

@@ -16,7 +16,7 @@ http {
         ssl_certificate_key  /etc/nginx/certs/ic0.app.key;
 
         location / {
-            proxy_pass http://host.docker.internal:8000;
+            proxy_pass http://host.docker.internal:4943;
             proxy_set_header Host $http_host;
 
             # include details about the original request
@@ -67,7 +67,7 @@ http {
         ssl_certificate_key  /etc/nginx/certs/wildcard.ic0.app.key;
 
         location / {
-            proxy_pass http://host.docker.internal:8000;
+            proxy_pass http://host.docker.internal:4943;
             proxy_set_header Host $1.localhost;
 
             # include details about the original request
@@ -85,7 +85,7 @@ http {
         ssl_certificate_key  /etc/nginx/certs/nice-name.com.key;
 
         location / {
-            proxy_pass http://host.docker.internal:8000;
+            proxy_pass http://host.docker.internal:4943;
             proxy_set_header Host TEST_APP_CANISTER_ID.localhost;
 
             # include details about the original request

scripts/start-selenium-env

@@ -45,7 +45,7 @@ do
             exit 0
             ;;
         --no-hot-reload)
-          II_PORT=8000
+          II_PORT=4943
           shift
           ;;
         *)
@@ -60,6 +60,8 @@ done
 
 II_CANISTER_ID=$( jq -r .internet_identity.local .dfx/local/canister_ids.json )
 TEST_APP_CANISTER_ID=$( jq -r .test_app.local demos/test-app/.dfx/local/canister_ids.json )
+echo "II canister id: $II_CANISTER_ID"
+echo "test app canister id: $TEST_APP_CANISTER_ID"
 
 cd "docker-test-env"
 COMPOSE_CONFIG=$(sed "s/II_CANISTER_ID/$II_CANISTER_ID/g; s/TEST_APP_CANISTER_ID/$TEST_APP_CANISTER_ID/g" docker-compose.yml)

webpack.config.js

@@ -136,7 +136,7 @@ export default [
       port: 8080,
       proxy: {
         // Make sure /api calls land on the replica (and not on webpack)
-        "/api": "http://localhost:8000",
+        "/api": "http://localhost:4943",
       },
       allowedHosts: [".localhost", ".local", ".ngrok.io"],
     },