Merge pull request #3302 from dfinity/azle-tagging

Tag all current Azle examples to be reviewed & updated

docs/developer-docs/getting-started/default-template.mdx

@@ -79,30 +79,18 @@ hello/
 <AdornedTab value={"typescript"} label="TypeScript" endAdornment={<BetaChip />}>
 
 ```bash
-hello/
-├── README.md      # Default project documentation
-├── dfx.json       # Project configuration file
-├── node_modules   # Libraries for frontend development
-├── package-lock.json
+  hello/
+├── README.md          # Default project documentation
+├── dfx.json           # Project configuration file
+├── node_modules
+├── package-lock.json  # Libraries for frontend development
 ├── package.json
-├── src            # Source files directory
-│   ├── hello_backend
-│   │   └── package.json
-│   │   └── hello_backend.did
-│   │   └── src
-│       │   ├── index.ts
-│   ├── hello_frontend
-│       ├── assets
-|       |── index.html
-|       |── package.json
-│       └── src
-│           ├── App.js
-│           ├── index.scss
-│           ├── logo2.svg
-│           ├── main.js
-│           └── vite-env.d.ts
-|       |── tsconfig.json
-|       |── vite.config.js
+├── src                # Source files directory
+│   ├── hello_backend
+|   |   └── index.ts
+│   ├── hello_frontend
+│   │   ├── index.html
+│   │   └── index.ts
 └── tsconfig.json
 ```
 
@@ -243,34 +231,17 @@ By default, the `dfx.json` file will contain automatically generated configurati
 
 ```json
 {
-  "canisters": {
-    "hello_backend": {
-      "build": "npx azle hello_backend",
-      "candid": "src/hello_backend/hello_backend.did",
-      "gzip": true,
-      "main": "src/hello_backend/src/index.ts",
-      "type": "custom",
-      "wasm": ".azle/hello_backend/hello_backend.wasm"
-    },
-    "hello_frontend": {
-      "dependencies": [
-        "hello_backend"
-      ],
-      "source": [
-        "src/hello_frontend/dist"
-      ],
-      "type": "assets",
-      "workspace": "hello_frontend"
+    "canisters": {
+        "hello_backend": {
+            "type": "azle",
+            "main": "src/hello_backend/index.ts",
+            "candid_gen": "automatic",
+            "declarations": {
+                "output": "test/dfx_generated/hello_backend",
+                "node_compatibility": true
+            }
+        }
     }
-  },
-  "defaults": {
-    "build": {
-      "args": "",
-      "packtool": ""
-    }
-  },
-  "output_env_file": ".env",
-  "version": 1
 }
 ```
 
@@ -348,13 +319,21 @@ fn greet(name: String) -> String {
 <AdornedTab value={"typescript"} label="TypeScript" endAdornment={<BetaChip />}>
 
 ```typescript
-import { Canister, query, text } from 'azle';
+import { IDL, query, update } from 'azle';
+
+export default class {
+    message: string = 'Hello world!';
+
+    @query([], IDL.Text)
+    getMessage(): string {
+        return this.message;
+    }
 
-export default Canister({
-    greet: query([text], text, (name) => {
-        return `Hello, ${name}!`;
-    })
-})
+    @update([IDL.Text])
+    setMessage(message: string): void {
+        this.message = message;
+    }
+}
 ```
 
 </AdornedTab>

docs/developer-docs/getting-started/hello-world.mdx

@@ -193,14 +193,30 @@ fn greet(name: String) -> String {
 
 <AdornedTab value={"typescript"} label="TypeScript" endAdornment={<BetaChip />}>
 
+TypeScript canisters can be written using the Azle canister development kit. For Azle projects, you will need to install the Azle `dfx` extension:
+
+```
+npx azle install-dfx-extension
+```
+
+The default canister code for Azle projects contains the following code:
+
 ```typescript title="src/hello_backend/src/index.ts"
-import { Canister, query, text } from 'azle';
+import { IDL, query, update } from 'azle';
 
-export default Canister({
-    greet: query([text], text, (name) => {
-        return `Hello, ${name}!`;
-    })
-})
+export default class {
+    message: string = 'Hello world!';
+
+    @query([], IDL.Text)
+    getMessage(): string {
+        return this.message;
+    }
+
+    @update([IDL.Text])
+    setMessage(message: string): void {
+        this.message = message;
+    }
+}
 ```
 
 </AdornedTab>
@@ -273,13 +289,13 @@ Output:
 <AdornedTab value={"typescript"} label="TypeScript" endAdornment={<BetaChip />}>
 
 ```bash
-dfx canister call hello_backend greet world
+dfx canister call hello_backend getMessage
 ```
 
 Output:
 
 ```
-("Hello, world!")
+("Hello world!")
 ```
 
 </AdornedTab>