fix/improve-builder-experience (#32)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: Le-Caignec

.vitepress/sidebar.ts

@@ -479,7 +479,7 @@ export function getSidebar() {
             ],
           },
           {
-            text: '💬 Web3Telegram <span class="VPBadge warning" style="margin-left: 8px; margin-bottom: -1px; transform: translateY(-1px);">alpha</span>',
+            text: '💬 Web3Telegram',
             link: '/use-iapp/web3telegram',
             collapsed: true,
             items: [

package-lock.json

@@ -20,6 +20,7 @@
     "@vueuse/core": "^13.6.0",
     "@wagmi/vue": "^0.1.24",
     "clsx": "^2.1.1",
+    "figlet": "^1.8.2",
     "pinia": "^3.0.3",
     "reka-ui": "^2.4.1",
     "tailwind-merge": "^3.3.1",
@@ -33,6 +34,7 @@
   "devDependencies": {
     "@iconify/vue": "^5.0.0",
     "@shikijs/vitepress-twoslash": "^3.8.0",
+    "@types/figlet": "^1.7.0",
     "@types/prop-types": "^15.7.15",
     "@types/react": "^18.3.23",
     "prettier": "^3.6.2",

package.json

@@ -6,6 +6,12 @@ description:
 
 # Create and Deploy an iApp
 
+iApps (iExec Applications) are decentralized applications that run on the iExec
+network. They leverage confidential computing to ensure data privacy and
+security while providing scalable off-chain computation.
+
+## About iApp Generator
+
 Bootstrap TEE-compatible applications in minutes without any hardcoding skills,
 iApp Generator handles all the low-level complexity for you.
 
@@ -20,20 +26,254 @@ iApp Generator handles all the low-level complexity for you.
 - **Check and deploy iApps quickly** - iApp Generator checks that your iApp
   complies with the iExec Framework and streamlines its deployment.
 
-```bash
-# Create your iApp (Python or Node.js supported)
-iapp init my-privacy-app
-cd my-privacy-app
+## Prerequisites
+
+Before getting started, make sure you have the following installed:
+
+- **Node.js** (version 18 or higher) - [Download here](https://nodejs.org/)
+- **Docker** - [Download here](https://www.docker.com/get-started)
+- **Docker Hub account** - [Sign up here](https://hub.docker.com/) (required for
+  deployment)
+
+## Installation
+
+First, install the iApp Generator CLI tool using your preferred package manager:
+
+::: code-group
+
+```sh [npm]
+npm install -g @iexec/iapp
+```
+
+```sh [yarn]
+yarn global add @iexec/iapp
+```
+
+```sh [pnpm]
+pnpm add -g @iexec/iapp
+```
 
-# Develop and test locally (simulates TEE environment)
-iapp test
-# Deploy to the network
-iapp deploy
+```sh [bun]
+bun add -g @iexec/iapp
 ```
 
-<div class="bg-gradient-to-r from-blue-400/10 to-blue-400/5 rounded-[6px] p-4 border-l-4 border-blue-600 mb-6">
-  <p class="m-0! text-sm"><strong>Note:</strong> iApp Generator currently supports Python and Node.js, but iApps can be built in any language that runs in Docker.</p>
-</div>
+:::
+
+## Quick Start
+
+Once installed, you can create and deploy your first iApp. The CLI will guide
+you through an interactive setup process to configure your project name,
+programming language, and template:
+
+<CLIDemo
+  initialCommand="iapp init"
+  asciiText="iApp"
+  :steps="[
+    {
+      showAt: 2,
+      completeAt: 4,
+      question: 'What is your project name? (A folder with this name will be created)',
+      answer: 'hello-world',
+      showTyping: true,
+      isComplete: false
+    },
+    {
+      showAt: 4,
+      completeAt: 6,
+      question: 'Which language do you want to use?',
+      answer: 'JavaScript',
+      options: [
+        { label: 'JavaScript', selected: true },
+        { label: 'Python', selected: false }
+      ],
+      highlighted: false,
+      isComplete: false
+    },
+    {
+      showAt: 6,
+      completeAt: 8,
+      question: 'What kind of project do you want to init?',
+      answer: 'Hello World',
+      options: [
+        { label: 'Hello World - iapp quick start', selected: true },
+        { label: 'advanced', selected: false }
+      ],
+      highlighted: false,
+      isComplete: false
+    }
+  ]"
+  :completionStep="8"
+  :completionMessage="'Generating your iApp...'"
+  :completionItems="[
+    '📁 Created hello-world/',
+    '📄 Added package.json',
+    '🐳 Added Dockerfile',
+    '⚙️ Added iExec configuration'
+  ]"
+  :successMessage="'Your iApp is ready!'"
+/>
+
+After the interactive setup, continue with development and deployment:
+
+## Development and Testing
+
+Navigate to your project and run tests locally to simulate the TEE environment.
+The CLI will build a Docker image, run your app, and show you the results:
+
+<CLIDemo
+  initialCommand="iapp test"
+  :steps="[
+    {
+      showAt: 2,
+      question: 'No app secret is configured (from iapp.config.json)',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 3,
+      question: 'App docker image built (sha256:9cc0de820aaaf8f86700a3ec4082fe69b9e9a48a117ebb0ade0d82d0879cbe41)',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 4,
+      question: 'App docker image ran and exited successfully.',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 5,
+      completeAt: 6,
+      question: 'Would you like to see the app logs? (12 lines)',
+      answer: 'no',
+      options: [
+        { label: 'yes', selected: false },
+        { label: 'no', selected: true }
+      ],
+      highlighted: false,
+      showTyping: false,
+      isComplete: false
+    },
+    {
+      showAt: 7,
+      question: 'Checked app output',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 8,
+      completeAt: 10,
+      question: 'Would you like to see the result? (View ./output/)',
+      answer: 'yes',
+      options: [
+        { label: 'yes', selected: true },
+        { label: 'no', selected: false }
+      ],
+      highlighted: false,
+      showTyping: false,
+      isComplete: false
+    }
+  ]"
+  :completionStep="11"
+  :completionMessage="'📁 output directory content:'"
+  :completionItems="[
+    '└ computed.json',
+    '└ result.txt'
+  ]"
+  :successMessage="'hello world'"
+  :autoRestart="true"
+/>
+
+## Deployment
+
+After your tests pass and the package is built, you can deploy your iApp to a
+supported network. During deployment, you'll enter your DockerHub credentials,
+specify your app version, and push both standard and TEE-compatible images:
+
+<CLIDemo
+  initialCommand="iapp deploy"
+  asciiText="Deploy"
+  :steps="[
+    {
+      showAt: 2,
+      question: 'Using chain bellecour',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 3,
+      question: 'Using saved walletPrivateKey (from iapp.config.json)',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 4,
+      completeAt: 6,
+      question: 'What is your username on DockerHub? (It will be used to properly tag the Docker image)',
+      answer: 'bob',
+      showTyping: true,
+      isComplete: false
+    },
+    {
+      showAt: 6,
+      completeAt: 8,
+      question: 'What is your DockerHub access token?',
+      answer: '**********************',
+      showTyping: true,
+      isComplete: false
+    },
+    {
+      showAt: 8,
+      completeAt: 10,
+      question: 'What is the version of your iApp?',
+      answer: '0.0.1',
+      showTyping: true,
+      isComplete: false
+    },
+    {
+      showAt: 10,
+      question: 'Docker image built (sha256:a53fc4c480f482c384a13266ea2cb6cc5572733c866c44a5f604f4bfab3a744a) and tagged bob/hello-world:0.0.1',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 11,
+      question: 'Pushed image bob/hello-world:0.0.1 on dockerhub',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 12,
+      question: 'Pushed TEE image bob/hello-world:0.0.1-tee-scone-5.9.1-v16-debug-ce3a01d9c5d7 on dockerhub',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 13,
+      question: 'TEE app deployed',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    }
+  ]"
+  :completionStep="14"
+  :completionMessage="'Deployment of your iApp completed successfully:'"
+  :completionItems="[
+    '└ Docker image: bob/hello-world:0.0.1-tee-scone-5.9.1-v16-debug-ce3a01d9c5d7',
+    '└ iApp address: 0x1f80DCebc2EAAff0Db7156413C43B7e88D189923'
+  ]"
+  :successMessage="'Run iapp run 0x1f80DCebc2EAAff0Db7156413C43B7e88D189923 to execute your iApp on an iExec TEE worker'"
+  :autoRestart="true"
+/>
 
 ## Real Examples
 
@@ -91,7 +331,7 @@ update_oracle_contract(average_price)
 
 :::
 
-**Automated Transactions iApp**
+### Automated Transactions iApp
 
 This iApp automates monthly payments using protected payment details, so
 financial information remains private.
@@ -116,3 +356,7 @@ for month in range(12):
 ```
 
 :::
+
+<script setup>
+import CLIDemo from '../../components/CLIDemo.vue';
+</script>

src/build-iapp/guides/build-&-deploy.md

@@ -62,7 +62,7 @@ Here's an example app order for a sentiment analysis iApp:
 }
 ```
 
-## Creating an App Order from an iApp Generator Project
+## Creating an App Order
 
 ### Step 1: Install the iExec SDK