Skip to content
This repository has been archived by the owner on Apr 22, 2024. It is now read-only.

yukithm/go-wasm-qrcode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

go-wasm-qrcode

A sample project that uses WebAssembly by Go.

Wasm:

  • Go

Front-end app:

  • TypeScript
  • React
    • Create-React-App
    • Material-UI

TODO

  • Provides and use decralation file (.d.ts)

Requirement

  • Go (>= 1.16)
  • Node.js (>= 14.15.0)
  • Yarn

and UNIX like shell environment which can use make and some commands used in Makefile.

Project layouts

.
├── app         ... front-end app
│   ├── build   ... production build
│   ├── public  ... public assets
│   └── src     ... front-end codes
└── wasm        ... WebAssembly codes

Run application

make run builds wasm binary and run app by yarn start.

# build wasm and run development app
make run

Windows (PowerShell)

# build wasm
cd wasm
$Env:GOOS = "js"
$Env:GOARCH = "wasm"
go build -o qrcode.wasm

# copy .wasm into app's assets directory
cp qrcode.wasm ../app/public

# go to app dir
cd ../app

# install dependencies
yarn

# run
yarn start

Windows (cmd.exe)

# build wasm
cd wasm
set GOOS=js
set GOARCH=wasm
go build -o qrcode.wasm

# copy .wasm into app's assets directory
copy qrcode.wasm ..\app\public

# go to app dir
cd ..\app

# install dependencies
yarn

# run
yarn start

Inside

WebAssembly part (./wasm)

wasm directory contains WebAssembly code that provides generateQRCode() function. wasm directory is Go project.

cd wasm

Build

# build
make

or just use go build.

GOOS=js GOARCH=wasm go build -o qrcode.wasm
Windows (PowerShell)
# build
$Env:GOOS = "js"
$Env:GOARCH = "wasm"
go build -o qrcode.wasm
Windows (cmd.exe)
# build
set GOOS=js
set GOARCH=wasm
go build -o qrcode.wasm

Run standalone web server

# run instant web server
make run-server

or use your favorite web server.

# Node.js
npx http-server -p 8080 -c-1

# Python3
python3 -m http.server 8080

Open http://localhost:8080/wasm_exec.html

If you can't see a QR Code image, open browser's developer tools panel and check Content-Type of qrcode.wasm. .wasm files must be application/wasm, not application/octet-stream. Try to use another web server that handle .wasm MIME type correctly.

Front-end app part (./app)

app directory contains front-end application code that uses qrcode.wasm built at previous part. app directory is CRA (Create-React-App) project with TypeScript.

cd app

Install dependencies

# install dependencies
yarn

Copy qrcode.wasm

Copy qrcode.wasm that was built at wasm part.

# copy .wasm into public directory
cp ../wasm/qrcode.wasm ./public/

Run

# run development app
yarn start

Build production application

# build
yarn build

# deploy ./build dir

License

MIT

Author

Yuki (@yukithm)

About

WebAssembly sample project by Go and React.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published