web container (#253)

Workflow:
* Import files from github. Binary/image files are saved in the container, but not displayed in the folder
* Deploy backend to generate JS binding, environment variable, `canister_id.json` and `.env` files needed for frontend build
* If the folder contains `package.json`, a selection of non-".mo" file will enable frontend build
* Frontend build copies everything from state.files into the container, and run `npm install`, `npm run build`
* Deploy asset canister. Authorize a random identity and copy the identity to the container
* Inside the container, run `node upploadAsset.js <asset_canister> <dist_dir>`

Known limitations:
* Update the asset doesn't refresh the TTL. What's a good API without being abused?
* Cannot talk to local replica inside the web container. But it seems to be a problem on the replica side...There are two workarounds: 1) copy the build artifact from container and upload in the main browser code; 2) talk to the mainnet inside container
* Only fully supported in Chrome. Firefox may have CORS problem running `npm install` in jsh. Normal deployment is fine. Safari support is only in TP.

README.md

@@ -26,10 +26,7 @@ We plan on adding many more features to make playground a full-featured web IDE
 
 - [Install Internet Computer SDK](https://sdk.dfinity.org/docs/quickstart/local-quickstart.html)
 - [Install npm](https://nodejs.org/en/download/)
-- [Install mops](https://mops.one/docs/install)
-  ```
-  npm i -g ic-mops
-  ```
+- [Install mops-cli](https://github.com/chenyan2002/mops-cli/releases)
 - [Install Rust](https://www.rust-lang.org/tools/install)
 - Add wasm32 target to Rust
   ```
@@ -49,6 +46,8 @@ npm start # Run the local development server
 dfx deploy
 ```
 
+If you want to deploy frontend, remember to upload `assetstorage.wasm.gz` to the backend canister and update the module hash in `FrontendDeployModal`.
+
 ### npm audit warnings
 
 Vulnerabilities from dev dependencies are false positives, we only aim to fix warnings from `npm audit --production`.

package.json

@@ -4,13 +4,17 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@dfinity/agent": "^2.0.0",
-    "@dfinity/candid": "^2.0.0",
-    "@dfinity/principal": "^2.0.0",
+    "@dfinity/agent": "^2.1.3",
+    "@dfinity/candid": "^2.1.3",
+    "@dfinity/identity": "^2.1.3",
+    "@dfinity/principal": "^2.1.3",
     "@monaco-editor/react": "4.6.0",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
+    "@webcontainer/api": "^1.2.4",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
     "lodash.debounce": "^4.0.8",
     "motoko": "^3.8.1",
     "prettier-plugin-motoko": "^0.9.4",
@@ -31,14 +35,14 @@
     "@types/node": "^20.14.2",
     "@vitejs/plugin-react": "^4.3.1",
     "comlink": "^4.4.1",
+    "dotenv": "^16.3.1",
     "http-proxy-middleware": "^3.0.2",
     "husky": "^9.1.5",
     "lint-staged": "^15.2.10",
     "mo-dev": "^0.13.0",
     "prettier": "^3.3.3",
     "typescript": "^5.5.4",
     "vite": "^5.4.3",
-    "dotenv": "^16.3.1",
     "vite-plugin-environment": "^1.1.3",
     "vite-plugin-top-level-await": "^1.4.4",
     "vite-plugin-wasm": "^3.3.0"

public/.ic-assets.json5

@@ -0,0 +1,14 @@
+[
+  {
+    "match": "**/*",
+    "headers": {
+      "Cross-Origin-Embedder-Policy": "credentialless",
+      "Cross-Origin-Opener-Policy": "same-origin",
+      "Content-Security-Policy": "frame-src *; frame-ancestors 'self'"
+    }
+  },
+  {
+    "match": ".well-known",
+    "ignore": false
+  }
+]