Vanilla Template Update

create-aleo-app/template-vanilla/main.js

@@ -20,6 +20,10 @@ window.key = () => {
     worker.postMessage("key");
 };
 
+window.deploy = () => {
+  worker.postMessage("deploy");
+};
+
 document.querySelector("#app").innerHTML = `
   <div>
     <a href="https://vitejs.dev" target="_blank">
@@ -35,6 +39,7 @@ document.querySelector("#app").innerHTML = `
     <div class="card">
       <button onclick="window.execute()">Call Execute Function</button>
       <button onclick="window.key()">Get Private Key</button>
+      <button onclick="window.deploy()">Deploy HelloWorld Program</button>
     </div>
     <p class="read-the-docs">
       Click on the Aleo logo to learn more

create-aleo-app/template-vanilla/worker.js

@@ -1,12 +1,16 @@
 import {
-    Account,
-    initThreadPool,
-    PrivateKey,
-    ProgramManager,
+  Account,
+  ProgramManager,
+  PrivateKey,
+  initThreadPool,
+  AleoKeyProvider,
+  AleoNetworkClient,
+  NetworkRecordProvider,
 } from "@aleohq/sdk";
 
 await initThreadPool();
 
+// A program name must be unique. To deploy the program, you should change the name from hello_hello.aleo to something else that is unique.
 const hello_hello_program =`
 program hello_hello.aleo;
 
@@ -36,12 +40,56 @@ function getPrivateKey() {
     return new PrivateKey().to_string();
 }
 
+async function deployProgram(program) {
+  const keyProvider = new AleoKeyProvider();
+  keyProvider.useCache(true);
+
+  // Create a record provider that will be used to find records and transaction data for Aleo programs
+  const networkClient = new AleoNetworkClient("https://api.explorer.aleo.org/v1");
+
+  // Use existing account with funds
+  const account = new Account({
+    privateKey: "user1PrivateKey",
+  });
+
+  const recordProvider = new NetworkRecordProvider(account, networkClient);
+
+  // Initialize a program manager to talk to the Aleo network with the configured key and record providers
+  const programManager = new ProgramManager(
+    "https://api.explorer.aleo.org/v1",
+    keyProvider,
+    recordProvider,
+  );
+
+  programManager.setAccount(account);
+
+  // Define a fee to pay to deploy the program
+  const fee = 1.9; // 1.9 Aleo credits
+
+  // Deploy the program to the Aleo network
+  const tx_id = await programManager.deploy(program, fee);
+
+  // Optional: Pass in fee record manually to avoid long scan times
+  // const feeRecord = "{  owner: aleo1xxx...xxx.private,  microcredits: 2000000u64.private,  _nonce: 123...789group.public}";
+  // const tx_id = await programManager.deploy(program, fee, undefined, feeRecord);
+
+  return tx_id;
+}
+
 onmessage = async function (e) {
     if (e.data === "execute") {
         const result = await localProgramExecution(hello_hello_program, "hello", ["5u32", "5u32"]);
         postMessage(result);
     } else if (e.data === "key") {
         const result = getPrivateKey();
         postMessage(result);
+    } else if (e.data === "deploy") {
+    try {
+        const result = await deployProgram(hello_hello_program);
+        postMessage(result);
+      } catch (error) {
+        postMessage({ error: error.message });
     }
+  }
+
 };