automatic including of sdk in web app

Niko PLP 10 months ago
parent 1d92f7084e
commit 36a745206a
  1. 6
      README.md
  2. 19
      ng-app/README.md
  3. BIN
      ng-app/dist-file.tar.gz
  4. 0
      ng-app/index-native.html
  5. 61
      ng-app/index-web.html
  6. 15
      ng-app/package.json
  7. 2
      ng-app/src/App.svelte
  8. 19
      ng-app/src/main-web.ts
  9. 13
      ng-sdk-js/README.md
  10. 33
      pnpm-lock.yaml

@ -39,6 +39,7 @@ cargo install wasm-pack --git https://github.com/rustwasm/wasm-pack.git --rev c2
cargo install cargo-watch
// optionally, if you want a Rust REPL: cargo install evcxr_repl
git clone git@git.nextgraph.org:NextGraph/nextgraph-rs.git
// or if you don't have a git account: git clone https://git.nextgraph.org/NextGraph/nextgraph-rs.git
cd nextgraph-rs
cargo build
```
@ -58,7 +59,7 @@ The crates are organized as follow :
- ng-wallet : keeps the secret keys of all identities of the user in a safe wallet
- [ng-sdk-js](ng-sdk-js/README.md) : contains the JS SDK, with example apps: web app, react app, or node service.
- [ng-app](ng-app/README.md) : all the native apps, based on Tauri, and the web app.
- [ngone](ngone/README.md) : server for nextgraph.one (boostrap into the right app)
- [ngone](ngone/README.md) : server for nextgraph.one (helps user bootstrap into the right app)
- [ngaccount](ngaccount/README.md) : server for nextgraph's Broker Service Provider account manager.
### Run
@ -125,7 +126,6 @@ Otherwise, build from source the single-file release of ng-app
npm install -g pnpm
cd ng-sdk-js
wasm-pack build --target bundler
// uncomment line 14 of ng-app/src/App.svelte: import * as api from "ng-sdk-js";
cd ../ng-app
pnpm install
pnpm webfilebuild
@ -146,7 +146,7 @@ The CLI tool can be obtained with :
cargo build -r -p ngcli
```
you can then use the binary `target/release/ngd`
you can then use the binary `target/release/ngcli`
For usage, see the documentation [here](ngd/README.md).

@ -34,22 +34,23 @@ pnpm webdev
#### Prod
```
pnpm webbuild
// then the application is available in dist-web folder
// can be served with:
cd dist-web ; python3 -m http.server
```
in order to build a self-contained html file, useful for offline use, do:
this will produce a single html file embedding all the resources. this is what you need for production
```
// uncomment line 14 of src/App.svelte: import * as api from "ng-sdk-js";
pnpm webfilebuild
// single file is available in dist-file/index.html
```
alternatively, to obtain a regular dist folder with all resources (we dont use it anymore):
```
pnpm webbuild
// then the application is available in dist-web folder
// can be served with:
cd dist-web ; python3 -m http.server
```
## Desktop
```

Binary file not shown.

@ -0,0 +1,61 @@
<!--
// Copyright (c) 2022-2023 Niko Bonnieure, Par le Peuple, NextGraph.org developers
// All rights reserved.
// Licensed under the Apache License, Version 2.0
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
// at your option. All files in the project carrying such
// notice may not be copied, modified, or distributed except
// according to those terms.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMjUg
MjI1Ij48Y2lyY2xlIGN4PSIxMDkuODgxIiBjeT0iMTEyLjkwNSIgcj0iMTA2Ljk4IiBzdHlsZT0i
ZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyBzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMC4y
NjgzNzU7Ij48L2NpcmNsZT48cGF0aCBkPSJNOTguMzQzIDE5MC4yNjFjLTE3Ljk0LTIuNzI3LTMz
LjMzMS0xMC42ODMtNDUuNzM1LTIzLjYzOC0xNC4wMDYtMTQuNjI5LTIxLjQzLTMzLjIxLTIxLjQz
LTUzLjYzNSAwLTEwLjIxOCAxLjctMTkuNDQ0IDUuMjIxLTI4LjMzMiA0LjI4Ny0xMC44MiAxMC4w
MzgtMTkuMzkgMTguNTM1LTI3LjYyMiA0LjczLTQuNTgyIDYuNjA3LTYuMTA3IDExLjI4MS05LjE2
MyAxMS45LTcuNzggMjQuMTc0LTExLjg4IDM4LjA5Ni0xMi43MjUgMTkuODA1LTEuMjAxIDM5LjEx
MiA1LjExMyA1NC42MDMgMTcuODYgMS41MDcgMS4yNCAyLjczIDIuMzU4IDIuNzE2IDIuNDg2LS4w
MTMuMTI4LTMuODU4IDMuNjM1LTguNTQ0IDcuNzkzLTQuNjg2IDQuMTU3LTEwLjA0NyA4Ljk2Mi0x
MS45MTQgMTAuNjc3LTEuODY2IDEuNzE1LTMuNTQgMy4xMTktMy43MjEgMy4xMTktLjE4MSAwLTEu
NC0uNzQ2LTIuNzEtMS42NTYtNy41My01LjIzOS0xNS45OTQtNy44MjItMjUuNjI1LTcuODIyLTEy
LjczMiAwLTIzLjI1IDQuMzM4LTMyLjE0NCAxMy4yNTctNi4zOTYgNi40MTQtMTAuNzA0IDE0LjU1
Ni0xMi41IDIzLjYyNC0uNjkxIDMuNDg4LS42OSAxMy41My4wMDIgMTcuMDA5IDMuNzA1IDE4LjYy
NiAxOC4zMTggMzMuMTAyIDM2LjY0MiAzNi4yOTcgNC4xNjQuNzI2IDExLjk4LjcxMiAxNS45OS0u
MDI4IDE0LjAzMi0yLjU5NCAyNS44Ni0xMS4zNjggMzIuMjY1LTIzLjkzNi43NzQtMS41MTkgMS4y
Ni0yLjg4NSAxLjA4LTMuMDM2LS4xNzgtLjE1Mi02Ljg3NC0xLjE3OC0xNC44NzctMi4yODEtOS43
OC0xLjM0OC0xNC45MjQtMi4yMTQtMTUuNjg1LTIuNjQxLTEuNTItLjg1NC0yLjgzNi0yLjg4OC0y
LjgzNi00LjM4NiAwLTEuMTczIDIuMDI3LTE1Ljg2OSAyLjQ5LTE4LjA2LjI5OC0xLjQwMSAyLjQy
Ni0zLjQ5MyAzLjg0NC0zLjc3Ny42MjItLjEyNCA4LjgyNy44NTYgMTguMjggMi4xODQgOS40MzQg
MS4zMjUgMTcuMjYzIDIuMjk0IDE3LjM5OSAyLjE1NC4xMzYtLjE0IDEuMTE4LTYuNTQ4IDIuMTgz
LTE0LjI0IDEuMTA4LTggMi4yMDQtMTQuNjAyIDIuNTYyLTE1LjQyNi4zNDQtLjc5MyAxLjExLTEu
ODUgMS43MDMtMi4zNDggMi4wNjMtMS43MzYgMy4xNDMtMS43ODUgMTIuMjA0LS41NTMgOS42MzYg
MS4zMSAxMC43MDkgMS41NjIgMTIuMjggMi44ODUgMS42NDQgMS4zODMgMi4yNzQgMi44MSAyLjI2
IDUuMTIzLS4wMDcgMS4xMDItLjkyMiA4LjI5Ny0yLjAzMyAxNS45ODktMS4xMTIgNy42OTEtMS45
NzIgMTQuMDQtMS45MTIgMTQuMTA5LjA2MS4wNjggNy4xNjcgMS4xMTEgMTUuNzkyIDIuMzE4IDEx
LjEwNSAxLjU1NCAxNi4wMDggMi4zODcgMTYuODAyIDIuODU2IDEuNTMuOTA0IDIuNDggMi42NDgg
Mi40NSA0LjQ5OC0uMDQ2IDIuODQ0LTIuNDEzIDE4LjEyMy0yLjk3NSAxOS4yMS0uNjYyIDEuMjgt
Mi42MDMgMi41NDgtMy45MjEgMi41NjItLjUyLjAwNS03Ljg3NS0uOTYtMTYuMzQ0LTIuMTQ0LTgu
NDctMS4xODUtMTUuNDc2LTIuMDc3LTE1LjU3LTEuOTgzLS4wOTQuMDk0LTEuMTg4IDcuMzQxLTIu
NDMxIDE2LjEwNi0xLjQ0IDEwLjE1My0yLjQ5OCAxNi40MzYtMi45MTYgMTcuMzE2LS43MjUgMS41
MjgtMi43NjIgMy4wNjMtNC41MzggMy40MTgtLjk1Ny4xOTEtMTAuOS0uOTI4LTEzLjU5OC0xLjUz
LS41NDgtLjEyMy0xLjg5Mi42NzItNC41MSAyLjY2NS0xMS4yNjMgOC41NzYtMjQuMzQyIDEzLjkx
LTM4LjM1NyAxNS42NDItNC40LjU0NC0xNS43MjcuNDMzLTE5Ljg1NC0uMTk1eiIgc3R5bGU9ImZp
bGw6IHJnYig3MywgMTE0LCAxNjUpOyBmaWxsLW9wYWNpdHk6IDE7IHN0cm9rZTogcmdiKDczLCAx
MTQsIDE2NSk7IHN0cm9rZS13aWR0aDogMC4zNzc5NzY7IHN0cm9rZS1vcGFjaXR5OiAxOyI+PC9w
YXRoPjwvc3ZnPg==" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NextGraph</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main-web.ts"></script>
</body>
</html>

@ -4,13 +4,13 @@
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"webdev": "cross-env NG_APP_WEB=1 TAURI_DEBUG=1 vite",
"webbuild": "cross-env NG_APP_WEB=1 vite build && rm -f ./dist-web/assets/*.svg && tar --exclude .DS_Store -zcvf dist-web.tar.gz dist-web",
"webfilebuild": "cross-env NG_APP_WEB=1 NG_APP_FILE=1 vite build && node prepare-app-file.cjs && rm -rf ./dist-file/assets && tar --exclude .DS_Store -zcvf dist-file.tar.gz dist-file",
"webfilebuilddebug": "cross-env NG_APP_WEB=1 NG_APP_FILE=1 TAURI_DEBUG=1 vite build -m debug",
"build": "vite build && rm -f ./dist/assets/*.svg",
"buildfile": "cross-env NG_APP_FILE=1 vite build && rm -rf ./dist/assets && tar --exclude .DS_Store -zcvf dist.tar.gz dist",
"dev": "shx cp index-native.html index.html && vite",
"webdev": "shx cp index-web.html index.html && cross-env NG_APP_WEB=1 TAURI_DEBUG=1 vite",
"webbuild": "shx cp index-web.html index.html && cross-env NG_APP_WEB=1 vite build && rm -f ./dist-web/assets/*.svg && tar --exclude .DS_Store -zcvf dist-web.tar.gz dist-web",
"webfilebuild": "shx cp index-web.html index.html && cross-env NG_APP_WEB=1 NG_APP_FILE=1 vite build && node prepare-app-file.cjs && rm -rf ./dist-file/assets && tar --exclude .DS_Store -zcvf dist-file.tar.gz dist-file",
"webfilebuilddebug": "shx cp index-web.html index.html && cross-env NG_APP_WEB=1 NG_APP_FILE=1 TAURI_DEBUG=1 vite build -m debug",
"build": "shx cp index-native.html index.html && vite build && rm -f ./dist/assets/*.svg",
"buildfile": "shx cp index-native.html index.html && cross-env NG_APP_FILE=1 vite build && rm -rf ./dist/assets && tar --exclude .DS_Store -zcvf dist.tar.gz dist",
"preview": "vite preview",
"check": "svelte-check --tsconfig ./tsconfig.json",
"tauri": "tauri"
@ -38,6 +38,7 @@
"node-gzip": "^1.1.2",
"postcss": "^8.4.23",
"postcss-load-config": "^4.0.1",
"shx": "^0.3.4",
"svelte": "^3.54.0",
"svelte-check": "^3.0.0",
"svelte-preprocess": "^5.0.3",

@ -10,8 +10,6 @@
-->
<script lang="ts">
// this line is needed to have the SDK working when compiling for a single file bundle (pnpm webfilebuild)
// import * as api from "ng-sdk-js";
import { push, default as Router } from "svelte-spa-router";
import { onMount, tick, onDestroy } from "svelte";
import {

@ -0,0 +1,19 @@
// Copyright (c) 2022-2023 Niko Bonnieure, Par le Peuple, NextGraph.org developers
// All rights reserved.
// Licensed under the Apache License, Version 2.0
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
// at your option. All files in the project carrying such
// notice may not be copied, modified, or distributed except
// according to those terms.
import "./app.postcss";
import "./styles.css";
import * as api from "ng-sdk-js";
import App from "./App.svelte";
const app = new App({
target: document.getElementById("app"),
});
export default app;

@ -36,6 +36,11 @@ npm i ng-sdk-js
## For contributors
We recommend contributors to use the production build, as the creation and opening of wallets is very slow in the dev build.
Only use the dev build when debugging the sdk. see the next chapter for the production build.
Please note that the dev and prod builds share the same output folder, they thus override each other.
When building the app, be sure to have the production build of the SDK in the output folder.
```
wasm-pack build --dev --target bundler
@ -58,7 +63,7 @@ Or automated testing with headless chrome:
wasm-pack test --chrome --headless
```
## Production built
## Production build
```
wasm-pack build --target bundler
@ -72,7 +77,7 @@ cd ../pkg-node
npm publish --access=public
```
### Plain JS web app
### Example Plain JS web app
```
cd ../app-web
@ -84,7 +89,7 @@ npm start
Open this URL in browser : [http://localhost:8080](http://localhost:8080)
### React web app
### Example React web app
```
cd ../app-react
@ -96,7 +101,7 @@ npm run dev
This URL will open automatically in browser : [http://localhost:8080](http://localhost:8080)
### NodeJS app
### Example NodeJS app
```
cd ../app-node

@ -25,6 +25,7 @@ importers:
node-gzip: ^1.1.2
postcss: ^8.4.23
postcss-load-config: ^4.0.1
shx: ^0.3.4
svelte: ^3.54.0
svelte-check: ^3.0.0
svelte-preprocess: ^5.0.3
@ -59,6 +60,7 @@ importers:
node-gzip: 1.1.2
postcss: 8.4.24
postcss-load-config: 4.0.1_postcss@8.4.24
shx: 0.3.4
svelte: 3.59.1
svelte-check: 3.4.3_sxhny56dlbcmwov4vk7qwrzshi
svelte-preprocess: 5.0.4_vmz4xia4c7tzh4ii3qac2x3tom
@ -1098,6 +1100,11 @@ packages:
p-event: 4.2.0
dev: true
/interpret/1.4.0:
resolution: {integrity: sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==}
engines: {node: '>= 0.10'}
dev: true
/ip-regex/4.3.0:
resolution: {integrity: sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==}
engines: {node: '>=8'}
@ -1468,6 +1475,13 @@ packages:
picomatch: 2.3.1
dev: true
/rechoir/0.6.2:
resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==}
engines: {node: '>= 0.10'}
dependencies:
resolve: 1.22.2
dev: true
/regexparam/2.0.1:
resolution: {integrity: sha512-zRgSaYemnNYxUv+/5SeoHI0eJIgTL/A2pUtXUPLHQxUldagouJ9p+K6IbIZ/JiQuCEv2E2B1O11SjVQy3aMCkw==}
engines: {node: '>=8'}
@ -1540,6 +1554,25 @@ packages:
engines: {node: '>=8'}
dev: true
/shelljs/0.8.5:
resolution: {integrity: sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==}
engines: {node: '>=4'}
hasBin: true
dependencies:
glob: 7.2.3
interpret: 1.4.0
rechoir: 0.6.2
dev: true
/shx/0.3.4:
resolution: {integrity: sha512-N6A9MLVqjxZYcVn8hLmtneQWIJtp8IKzMP4eMnx+nqkvXoqinUPCbUFLp2UcWTEIUONhlk0ewxr/jaVGlc+J+g==}
engines: {node: '>=6'}
hasBin: true
dependencies:
minimist: 1.2.8
shelljs: 0.8.5
dev: true
/signal-exit/3.0.7:
resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
dev: true

Loading…
Cancel
Save