docs: deploy example aepps

Author: davidyuk

.github/workflows/docs-develop.yml

@@ -18,5 +18,13 @@ jobs:
         with:
           path: ~/.cache/pip3
           key: ${{ runner.os }}-pip-${{ hashFiles('docs/requirements.txt') }}
+      - uses: actions/cache@v3
+        with:
+          path: |
+            ~/.npm
+            ~/.autorest
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
       - run: pip3 install -r docs/requirements.txt
+      - run: git config --global user.email "[email protected]"
+      - run: git config --global user.name "GitHub Action"
       - run: mike deploy --push develop

.github/workflows/docs-release.yml

@@ -17,6 +17,14 @@ jobs:
         with:
           path: ~/.cache/pip3
           key: ${{ runner.os }}-pip-${{ hashFiles('docs/requirements.txt') }}
+      - uses: actions/cache@v3
+        with:
+          path: |
+            ~/.npm
+            ~/.autorest
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
       - run: pip3 install -r docs/requirements.txt
       - run: echo "RELEASE_VERSION=${GITHUB_REF:10}" >> $GITHUB_ENV
+      - run: git config --global user.email "[email protected]"
+      - run: git config --global user.name "GitHub Action"
       - run: mike deploy --push --update-aliases $RELEASE_VERSION latest

docs/build-assets.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+set -e
+
+[ ! -d "node_modules" ] && npm i
+npm run docs:examples
+npm run docs:api
+
+# TODO: revisit --ignore-scripts after solving https://github.com/npm/cli/issues/4202
+perl -i -pe 's/"prepare"/"rem-prepare"/g' package.json
+mkdir -p docs/examples/browser
+
+echo Build example aepp
+cd ./examples/browser/aepp
+npm i
+VUE_APP_WALLET_URL=../wallet-iframe/ PUBLIC_PATH=./ npm run build
+rm -rf ../../../docs/examples/browser/aepp
+mv dist/ ../../../docs/examples/browser/aepp
+
+echo Build example wallet-iframe
+cd ../wallet-iframe
+npm i
+VUE_APP_AEPP_URL=../aepp/ PUBLIC_PATH=./ npm run build
+rm -rf ../../../docs/examples/browser/wallet-iframe
+mv dist/ ../../../docs/examples/browser/wallet-iframe
+
+echo Build example wallet-web-extension
+cd ../wallet-web-extension
+npm i
+NODE_OPTIONS=--openssl-legacy-provider npm run build
+mv artifacts/wallet-web-extension-v0.1.0-production.zip ../../../docs/examples/browser/wallet-web-extension.zip
+
+cd ../../..
+perl -i -pe 's/"rem-prepare"/"prepare"/g' package.json

docs/hooks.py

@@ -1,15 +1,9 @@
-import os.path
 import subprocess
 import re
 import urllib.request
 
 def pre_build(**kwargs):
-  if not os.path.exists('node_modules'):
-    subprocess.run(['npm', 'install', '--ignore-scripts'], check=True)
-  subprocess.run(['npm', 'run', 'build:api'], check=True)
-  subprocess.run(['npm', 'run', 'build:generate'], check=True)
-  subprocess.run(['npm', 'run', 'docs:examples'], check=True)
-  subprocess.run(['npm', 'run', 'docs:api'], check=True)
+  subprocess.run(['./docs/build-assets.sh'], check=True)
 
 def replacer(match):
   filename = f'{match.group(3)}.{match.group(4)}'

examples/browser/aepp/src/Connect.vue

@@ -58,7 +58,7 @@ export default {
     walletConnected: false,
     walletConnecting: null,
     reverseIframe: null,
-    reverseIframeWalletUrl: 'http://localhost:9000',
+    reverseIframeWalletUrl: process.env.VUE_APP_WALLET_URL ?? 'http://localhost:9000',
     walletInfo: null,
   }),
   computed: {

examples/browser/aepp/vue.config.js

@@ -1,6 +1,7 @@
 const { defineConfig } = require('@vue/cli-service');
 
 module.exports = defineConfig({
+  publicPath: process.env.PUBLIC_PATH ?? '/',
   devServer: {
     port: 9001,
   },

examples/browser/wallet-iframe/src/App.vue

@@ -23,7 +23,7 @@
   <iframe
     v-if="!runningInFrame"
     ref="aepp"
-    src="http://localhost:9001"
+    :src="aeppUrl"
   />
 </template>
 
@@ -37,14 +37,13 @@ import Value from './Value.vue';
 
 export default {
   components: { Value },
-  data() {
-    return {
-      runningInFrame: window.parent !== window,
-      nodeName: '',
-      address: '',
-      balancePromise: null,
-    };
-  },
+  data: () => ({
+    aeppUrl: process.env.VUE_APP_AEPP_URL ?? 'http://localhost:9001',
+    runningInFrame: window.parent !== window,
+    nodeName: '',
+    address: '',
+    balancePromise: null,
+  }),
   methods: {
     async shareWalletInfo(clientId, { interval = 5000, attemps = 5 } = {}) {
       this.aeSdk.shareWalletInfo(clientId);

examples/browser/wallet-iframe/vue.config.js

@@ -1,6 +1,7 @@
 const { defineConfig } = require('@vue/cli-service');
 
 module.exports = defineConfig({
+  publicPath: process.env.PUBLIC_PATH ?? '/',
   devServer: {
     port: 9000,
   },

mkdocs.yml

@@ -71,6 +71,10 @@ nav:
         - examples/node/paying-for-contract-call-tx.md
         - examples/node/paying-for-spend-tx.md
       - examples/node/account-generalized.md
+    - Browser:
+      - 'Aepp example': examples/browser/aepp/index.html
+      - 'Iframe wallet example': examples/browser/wallet-iframe/index.html
+      - 'Webextension wallet example': examples/browser/wallet-web-extension.zip
     - tutorials/vuejs/helloworld-blockheight.md
   - 'API Reference': api/index.html
   - compatibility.md

package.json

@@ -47,7 +47,7 @@
     "test:unit": "mocha './test/unit/'",
     "test:watch": "mocha './test/unit/' './test/integration/' --watch",
     "prepare": "npm run build",
-    "prepublishOnly": "test/examples.sh && npm run docs:examples && npm run docs:api",
+    "prepublishOnly": "test/examples.sh",
     "release": "standard-version --skip.tag --infile docs/CHANGELOG.md",
     "release-alpha": "npm run release -- --prerelease alpha",
     "release-beta": "npm run release -- --prerelease beta"