Safenetwork Git Portal Discussion

Almost exactly what I said :grinning_face_with_smiling_eyes:

8 Likes

Fantastic, but the view on Github icon probably needs to be removed eh, top right corner xD .

While we’re testing and showing this off on the web is good to keep links such as to the code to attract attention and people interested in using the code. Those can be removed once we deploy on Safe. Step by step!

7 Likes

That looks brilliant!

2 update threads in one night too!

7 Likes

Looks sleek and simple! Really like it, hope to see more. :star_struck:

Btw, nice logo :wink::wink:

4 Likes

:christmas_tree: Git Portal Christmas Update :christmas_tree:

Git Portal got a new look!

Here it is, a working proof-of-concept for a decentralised alternative to GitHub running from static storage, and later Safe Network (or any static hosting or p2p storage such as Solid or IPFS etc). It isn’t feature complete yet so you can’t create and edit issues in the UI, but you can see ones which have been created automatically for “New” repositories on the Issues tab.

@Miguelo is busy with Christmas so has asked me to do the announcement, but the credit for this fantastic UI is his. In a very short time he’s transformed the look and operation of the UI into something that really looks the part as well as demonstrating the key features needed. To get this look he used Tailwind CSS building on the Svelte framework with Go/Wasm backend, plus his own customisations.

Can you see which repository he’s cloned for display, and a who gets mentioned in the Commits tab! Nice touch :smiley:

Thank you @Nigel for your vocal support and for providing the Safe Git logo which appears at the top left. :pray:

Try Git Portal

Anyone can try the demo out by visiting http://gitch.happybeing.com/. Be patient for the first time loading takes a little while (you may need to refresh if you’ve visited this link before). Once the red message goes away you are set.

  • Create Repository: To start, enter a repository name under “Create repository” and click “Create” to make the new repository. This is instant, and lets you browse the files in the .git directory, or view the commits (none yet) or Issues (a few are created automatically).

  • Clone Repository: To clone from github you need to use a proxy as described in the README. If you just want to do a quick test, click on the gear :gear: icon and enter the following proxy URL: https://cors.isomorphic-git.org/. That’s handy for testing but not for regular use. Then click “Clone” and wait while it fetches the data. For large repositories this can take quite a while, so one has been entered for you to try, which should complete in under a minute.

  • Upload Repository: You can choose a repository directory to upload, but be aware this will fail for large repositories at the moment. It works for repositories up to about 2,000 files, but fails if they have 10,000 (including all the commits etc in .git). Again, uploading can take a while so be patient!

Issues

If you think something went wrong or just want to see what’s going on under the hood, open the browser console (Ctrl-Shift-I in Firefox or Chrome/Chromium). Any issues, please report here or on happyborg/github.

Help!

As always, help is welcome. We are looking into further UI and functional improvements for the proof-of-concept, and also for the next step which may involve more JavaScript and a move from Go/Wasm to Rust/Wasm.

This a chance contribute to something you want to happen by either using what you know or learning something new. We’ll help you get going or with learning as you go.

29 Likes

That looks fantastic! Amazing design work @Miguelo - really slick. Looking forward to more amazing @happybeing creations in the New Year. Happy Christmas all. The future’s bright folks!

12 Likes

@Miguelo @happybeing amazing work all around!

10 Likes

I’ve re-written the whole of the OP so please take a look if you would like more than is included in the Christmas update above. Link to OP: Safenetwork Git Portal Discussion

6 Likes

Mini update

Happy new year all. :champagne: Ok a bit late, but I’ve been busy :sunglasses:

Wasm/Wasi

Right now I’m researching using Wasm/WASI in the browser. If you are interested in this you can follow progress here: GitHub - happybeing/svelte-wasi-with-rust: Svelte Rust/WASI in Browser Example. What is there right now just has a hello world app compiled to WASI, running in the browser, in a Svelte app.

I’ll be adding some Rust soon to see if I can access the same filesystem from JS and Rust in the browser (although you don’t have to use the browser as WASM runs on most platforms).

This is in aid of switching away from Go to Rust for Safe Git because Go has a 12MB runtime and in general Rust is the go to language for secure, reliable applications. So my aim is to compile Rust to WASI (target wasm32-wasi) and run it in the browser.

Over the holidays I was looking at wasm-git which is libgit2 compiled to WASM using Emscripten (not WASI), and I had that running in the browser (after enhancing it a bit).

So I now have several options of the core git features, and will only have to write the git-bug compatible stuff in Rust in the short term.

15 Likes

7 Likes

Mini Git Portal Update

I have an exciting (to me anyway :grimacing:) update on my research for the Safe Git Portal. I’ve been researching options to build apps using both JavaScript and Rust Web Assembly in the browser while sharing a common filesystem and today I cracked it. :tada:

First I looked at Emscripten, and as part of that added a feature to wasm-git (which is libgit2 compiled to WASM). The feature (async http transports) was needed in order to make it usable in a Safe web app. That fixed, it looked hard to get Rust and Emscripten to play so I moved to look at using WasmerJS/WASI instead of Emscripten.

As of today I have a working Svelte WasmerJS/WASI app with the ability to use Rust WASM compiled for WASI (target wasm32-wasi) and using wasm-bindgen to make it easy to pass variables between JavaScript and Rust.

Or to put it in ‘human’: a really cool way to build stuff in the browser (and ideal for fast, web apps with Rust/Web Assembly on Safe). It’s taken me days to get this working and today it flies!

Now published here: GitHub - happybeing/svelte-wasi-with-rust: Svelte Rust/WASI in Browser Example

19 Likes

Ive broken it…

.....
 Compiling serde v1.0.120
   Compiling unicode-width v0.1.8
   Compiling wasm-bindgen v0.2.69
   Compiling unicode-segmentation v1.7.1
error[E0463]: can't find crate for `core`
  |
  = note: the `wasm32-wasi` target may not be installed

error: aborting due to previous error

For more information about this error, try `rustc --explain E0463`.
error: could not compile `unicode-width`

To learn more, run the command again with --verbose.
warning: build failed, waiting for other jobs to finish...
error: build failed
error Command failed with exit code 101.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 101.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Versions:

➜  svelte-wasi-with-rust git:(main) rustc -V
rustc 1.49.0 (e1884a8e3 2020-12-29)
➜  svelte-wasi-with-rust git:(main) yarn -v
1.22.5
2 Likes

Thank you Willie, the incantation (which I need to add to the README) is:

rustup target add wasm32-wasi
1 Like

OK gets further this time

      Compiling structopt-derive v0.2.18
   Compiling wasm-bindgen-backend v0.2.69
   Compiling wasm-bindgen-macro-support v0.2.69
   Compiling structopt v0.2.18
   Compiling wasm-bindgen-macro v0.2.69
   Compiling js-sys v0.3.46
   Compiling wasi-example v0.1.0 (/home/willie/projects/maidsafe/svelte-wasi-with-rust/src/rust-wasi-example)
warning: unused variable: `x`
   --> src/main.rs:188:31
    |
188 | pub fn imported_type_by_value(x: SomeJsType) {
    |                               ^ help: if this is intentional, prefix it with an underscore: `_x`
    |
    = note: `#[warn(unused_variables)]` on by default

warning: unused variable: `x`
   --> src/main.rs:193:36
    |
193 | pub fn imported_type_by_shared_ref(x: &SomeJsType) {
    |                                    ^ help: if this is intentional, prefix it with an underscore: `_x`

warning: unused variable: `x`
   --> src/main.rs:205:34
    |
205 | pub fn take_option_imported_type(x: Option<SomeJsType>) {
    |                                  ^ help: if this is intentional, prefix it with an underscore: `_x`

warning: 3 warnings emitted

        Finished dev [unoptimized + debuginfo] target(s) in 29.36s
    /bin/bash: wasm-bindgen: command not found
    error Command failed with exit code 127.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Warnings are fine.

Another pre-requisite is the wasm-bindgen-cli:

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

Try:

yarn dev-wasm-bindgen

Then:

yarn dev

If all’s good, visit http://localhost:8080

1 Like

Yes I was fairly sure I had that …

➜  svelte-wasi-with-rust git:(main) curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
info: downloading wasm-pack
info: existing wasm-pack installation found at `/home/willie/.cargo/bin/wasm-pack`
info: would you like to overwrite this file? [y/N]: y
info: successfully installed wasm-pack to `/home/willie/.cargo/bin/wasm-pack`
➜  svelte-wasi-with-rust git:(main) yarn dev-wasm-bindgen
yarn run v1.22.5
warning package.json: No license field
$ yarn dev-wasm && wasm-bindgen src/rust-wasi-example/target/wasm32-wasi/debug/wasi-example.wasm --debug --keep-debug  --out-dir . && yarn wbg-to-wasi && mv *.wasm public/wasm/ && mv wasi-* src && yarn dev-wasm
warning package.json: No license field
$ cd src/rust-wasi-example/ && cargo build --target=wasm32-wasi && mkdir -p ../../public/wasm && cp target/wasm32-wasi/debug/wasi-example.wasm ../../public/wasm/
warning: unused variable: `x`
   --> src/main.rs:188:31
    |
188 | pub fn imported_type_by_value(x: SomeJsType) {
    |                               ^ help: if this is intentional, prefix it with an underscore: `_x`
    |
    = note: `#[warn(unused_variables)]` on by default

warning: unused variable: `x`
   --> src/main.rs:193:36
    |
193 | pub fn imported_type_by_shared_ref(x: &SomeJsType) {
    |                                    ^ help: if this is intentional, prefix it with an underscore: `_x`

warning: unused variable: `x`
   --> src/main.rs:205:34
    |
205 | pub fn take_option_imported_type(x: Option<SomeJsType>) {
    |                                  ^ help: if this is intentional, prefix it with an underscore: `_x`

warning: 3 warnings emitted

    Finished dev [unoptimized + debuginfo] target(s) in 0.03s
/bin/bash: wasm-bindgen: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

No, you’re missing it: wasm-bindgen: command not found

This https://stackoverflow.com/questions/61767863/wasm-bindgen-command-not-found-even-though-wasm-pack-is-installed-0-8-1 helped get me further.

So I ran cargo install wasm-bindgen-cli and looking at localhost:8080 is now more interesting…

Stilll get an error though

Should yarn && yarn dev-wasm-bindgen && yarn-dev not end with yarn dev rather than yarn-dev?

svelte-wasi-with-rust git:(main) yarn dev                                 
yarn run v1.22.5
warning package.json: No license field
$ webpack-dev-server --watch-content-base --content-base public
ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /home/willie/projects/maidsafe/svelte-wasi-with-rust/public
✖ 「wdm」: Hash: f1982142690d0d4c8aac
Version: webpack 4.44.2
Time: 1302ms
Built at: 21/01/2021 20:35:33
        Asset     Size  Chunks                   Chunk Names
    bundle.js  836 KiB  bundle  [emitted]        bundle
bundle.js.map  941 KiB  bundle  [emitted] [dev]  bundle
Entrypoint bundle = bundle.js bundle.js.map
[1] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {bundle} [built]
[./node_modules/@wasmer/wasi/lib/bindings/browser.js] 784 bytes {bundle} [built]
[./node_modules/@wasmer/wasi/lib/index.esm.js] 48.5 KiB {bundle} [built]
[./node_modules/@wasmer/wasmfs/lib/index.esm.js] 130 KiB {bundle} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {bundle} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {bundle} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {bundle} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {bundle} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {bundle} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {bundle} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {bundle} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {bundle} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {bundle} [built]
[./src/App.svelte] 11.5 KiB {bundle} [built]
[./src/main.js] 139 bytes {bundle} [built]
    + 53 hidden modules

ERROR in ./src/App.svelte
Module not found: Error: Can't resolve './wasi-example_bg_wasi_test' in '/home/willie/projects/maidsafe/svelte-wasi-with-rust/src'
 @ ./src/App.svelte 187:34-71
 @ ./src/main.js
 @ multi ./src/main.js
ℹ 「wdm」: Failed to compile.
2 Likes

That’s a good find, not sure how this didn’t get pushed! Anyway, if you edit App.svelte and remove the ‘_test’ from the following, you should be ok:

Yes, good spot!

1 Like