Home

Awesome

Handy Tools: Written in Golang + WebAssembly + Vue.js

This application is mainly meant to test & demo how to use WebAssembly with Go.

The key steps include:

A live demo can be found at https://handytools.xd-deng.com

开发这个应用的主要目的是测试、学习以及展示如何在Go中使用WebAssembly。

关键步骤包括:

Demo请移步https://handytools.xd-deng.com

Commands to Build and Run

# Compile wasm file
cd wasm
GOARCH=wasm GOOS=js go build -o index.wasm wasm_main.go
cd ..

# Copy the wasm_exec.js file from GOROOT, to double-ensure consistency
cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" static/js/wasm_exec.js

# Start the service
go run main.go

Build & Run with Docker

docker build -t xddeng/handytools-wasm .
docker run -p 8000:8000 xddeng/handytools-wasm

Check in Browser Console

Once the application is running, you can open the corresponding link in your browser (or directly visit the demo https://handytools.xd-deng.com) and open the console as well.

The functions we create in wasm/wasm_main.go and expose in the main() function are accessible in the browser console, and we can invoke them in exactly the same way how we invoke JavaScript functions.

<p align="center"> <img src="/static/images/handytools_console.png" alt="drawing" width="80%"/> </p>

Reference