chore: use standard port for superheroes example

motoko/superheroes/package.json

@@ -47,7 +47,7 @@
     "typescript": "^4.3.5",
     "util": "0.12.3",
     "webpack": "^5.87.0",
-    "webpack-cli": "4.5.0",
+    "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.6.0"
   },
   "browserslist": [

motoko/superheroes/src/declarations/superheroes/index.d.ts

@@ -0,0 +1,50 @@
+import type {
+  ActorSubclass,
+  HttpAgentOptions,
+  ActorConfig,
+  Agent,
+} from "@dfinity/agent";
+import type { Principal } from "@dfinity/principal";
+import type { IDL } from "@dfinity/candid";
+
+import { _SERVICE } from './superheroes.did';
+
+export declare const idlFactory: IDL.InterfaceFactory;
+export declare const canisterId: string;
+
+export declare interface CreateActorOptions {
+  /**
+   * @see {@link Agent}
+   */
+  agent?: Agent;
+  /**
+   * @see {@link HttpAgentOptions}
+   */
+  agentOptions?: HttpAgentOptions;
+  /**
+   * @see {@link ActorConfig}
+   */
+  actorOptions?: ActorConfig;
+}
+
+/**
+ * Intializes an {@link ActorSubclass}, configured with the provided SERVICE interface of a canister.
+ * @constructs {@link ActorSubClass}
+ * @param {string | Principal} canisterId - ID of the canister the {@link Actor} will talk to
+ * @param {CreateActorOptions} options - see {@link CreateActorOptions}
+ * @param {CreateActorOptions["agent"]} options.agent - a pre-configured agent you'd like to use. Supercedes agentOptions
+ * @param {CreateActorOptions["agentOptions"]} options.agentOptions - options to set up a new agent
+ * @see {@link HttpAgentOptions}
+ * @param {CreateActorOptions["actorOptions"]} options.actorOptions - options for the Actor
+ * @see {@link ActorConfig}
+ */
+export declare const createActor: (
+  canisterId: string | Principal,
+  options?: CreateActorOptions
+) => ActorSubclass<_SERVICE>;
+
+/**
+ * Intialized Actor using default settings, ready to talk to a canister using its candid interface
+ * @constructs {@link ActorSubClass}
+ */
+export declare const superheroes: ActorSubclass<_SERVICE>;

motoko/superheroes/src/declarations/superheroes/index.js

@@ -0,0 +1,42 @@
+import { Actor, HttpAgent } from "@dfinity/agent";
+
+// Imports and re-exports candid interface
+import { idlFactory } from "./superheroes.did.js";
+export { idlFactory } from "./superheroes.did.js";
+
+/* CANISTER_ID is replaced by webpack based on node environment
+ * Note: canister environment variable will be standardized as
+ * process.env.CANISTER_ID_<CANISTER_NAME_UPPERCASE>
+ * beginning in dfx 0.15.0
+ */
+export const canisterId =
+  process.env.CANISTER_ID_SUPERHEROES;
+
+export const createActor = (canisterId, options = {}) => {
+  const agent = options.agent || new HttpAgent({ ...options.agentOptions });
+
+  if (options.agent && options.agentOptions) {
+    console.warn(
+      "Detected both agent and agentOptions passed to createActor. Ignoring agentOptions and proceeding with the provided agent."
+    );
+  }
+
+  // Fetch root key for certificate validation during development
+  if (process.env.DFX_NETWORK !== "ic") {
+    agent.fetchRootKey().catch((err) => {
+      console.warn(
+        "Unable to fetch root key. Check to ensure that your local replica is running"
+      );
+      console.error(err);
+    });
+  }
+
+  // Creates an actor with using the candid interface and the HttpAgent
+  return Actor.createActor(idlFactory, {
+    agent,
+    canisterId,
+    ...options.actorOptions,
+  });
+};
+
+export const superheroes = canisterId ? createActor(canisterId) : undefined;

motoko/superheroes/src/declarations/superheroes.did → motoko/superheroes/src/declarations/superheroes/superheroes.did

@@ -10,6 +10,7 @@ type List =
        List;
      };
 service : {
+  /// * High-Level API
   create: (Superhero) -> (SuperheroId);
   delete: (SuperheroId) -> (bool);
   read: (SuperheroId) -> (opt Superhero) query;

motoko/superheroes/src/declarations/superheroes.did.d.ts → motoko/superheroes/src/declarations/superheroes/superheroes.did.d.ts

@@ -1,5 +1,6 @@
 import type { Principal } from '@dfinity/principal';
 import type { ActorMethod } from '@dfinity/agent';
+import type { IDL } from '@dfinity/candid';
 
 export type List = [] | [[string, List]];
 export interface Superhero { 'superpowers' : List, 'name' : string }
@@ -10,3 +11,5 @@ export interface _SERVICE {
   'read' : ActorMethod<[SuperheroId], [] | [Superhero]>,
   'update' : ActorMethod<[SuperheroId, Superhero], boolean>,
 }
+export declare const idlFactory: IDL.InterfaceFactory;
+export declare const init: (args: { IDL: typeof IDL }) => IDL.Type[];

motoko/superheroes/src/www/components/create.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { superheroes } from "../../declarations";
+import { superheroes } from "../../declarations/superheroes";
 
 const $ = document.getElementById.bind(document);
 const idl = require('../utilities/idl');

motoko/superheroes/src/www/components/delete.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { superheroes } from "../../declarations";
+import { superheroes } from "../../declarations/superheroes";
 
 const $ = document.getElementById.bind(document);
 const idl = require('../utilities/idl');

motoko/superheroes/src/www/components/read.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { superheroes } from "../../declarations";
+import { superheroes } from "../../declarations/superheroes";
 
 const $ = document.getElementById.bind(document);
 const idl = require('../utilities/idl');

motoko/superheroes/src/www/components/update.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { superheroes } from "../../declarations";
+import { superheroes } from "../../declarations/superheroes";
 
 const $ = document.getElementById.bind(document);
 const idl = require('../utilities/idl');

motoko/superheroes/webpack.config.js

@@ -26,7 +26,7 @@ function initCanisterIds() {
   canisters = network === "local" ? localCanisters : prodCanisters;
 
   for (const canister in canisters) {
-    process.env[canister.toUpperCase() + "_CANISTER_ID"] =
+    process.env["CANISTER_ID_" + canister.toUpperCase()] =
       canisters[canister][network];
   }
 }
@@ -85,26 +85,28 @@ module.exports = {
     }),
     new webpack.EnvironmentPlugin({
       NODE_ENV: 'development',
-      SUPERHEROES_CANISTER_ID: canisters["superheroes"]
+      ...process.env
     }),
     new webpack.ProvidePlugin({
       Buffer: [require.resolve("buffer/"), "Buffer"],
       process: require.resolve("process/browser"),
     }),
   ],
-  // proxy /api to port 8000 during development
+  // proxy /api to the replica port during development
   devServer: {
     proxy: {
       "/api": {
-        target: "http://localhost:8000",
+        target: "http://localhost:4943",
         changeOrigin: true,
         pathRewrite: {
           "^/api": "/api",
         },
       },
     },
     hot: true,
-    contentBase: path.resolve(__dirname, "./src/www"),
-    watchContentBase: true
+    static: [
+      path.resolve(__dirname, "./dist/www")
+    ],
+    liveReload: true
   },
 };