Today I was playing around with web assembly in Go, and I was a little disapointed by the lack of tooling available to ease the process of compiling go code for the browser. Don't get me wrong, the go compiler is excellent but that's all it is: a compiler. Having used cargo-web to build rust web assembly projects, having to manually compile my sass, go, and copy and paste some JavaScript to load it was a bit of a pain.

And so, I created go-wasm . It's a very simple program that is meant to make your life developing web assembly apps a bit easier. It's not a framework, nor is it meant to replace one, it's just supposed to make the process of going from Go code to a working webpage a bit easier.

Just as an example, here are the steps necessary to make Go work in the browser:

Compile the program with GOOS=js GOARCH=wasm

Write (or probably copy and paste) some JavaScript to load the Go code

Throw together an HTML page and add the JS file in a <script> tag

That's really all that's necessary. However realistically you'll probably want to use some CSS, in which case a SASS or LESS compiler is a nice touch.

go-wasm will do all this for you, and throw in an HTTP server (cause why not?).

So how does it work?

To start, install it. go get github.com/swissChili/go-wasm and go install github.com/swissChili/go-wasm is all it takes.

note: make sure $GOPATH/bin is in your path!

Then, make a wasm.yml file with the configuration for your project. Here's a bare-bones example.



# directory to use as static dir for HTML static : static # Go files to build source : wasm.go # Directory to read raw, uncompiled CSS from cssdir : css # CSS-preprocessor commands csscomp : # OUTPUT and INPUT are placeholders for the args to use sass : sass INPUT OUTPUT scss : sass INPUT OUTPUT less : lessc INPUT OUTPUT # Output dir for compiled, static HTML, CSS, JS and wasm # docs is nice because you can use it with GH-pages output : docs

Alright! The setup is done, now it's time to write some code. I'm not going to go very in depth because this isn't a web assembly guide, but I'll cover the basics.



$ touch wasm.go $ mkdir css $ touch css/main.sass $ mkdir static $ touch static/index.html

The go program is pretty minimal, just adds a heading to the page and prints something to the console



// wasm.go package main import ( "syscall/js" ) func main () { js . Global () . Get ( "document" ) . Call ( "getElementById" , "main" ) . Set ( "innerHTML" , `<h1>Hello, World</h1>` ) println ( "Hello There" ) }

And, of course we need an HTML page.



<!-- static/index.html --> <!doctype html> <html> <head> <link rel="stylesheet" href="main.css" /> </head> <body> <div id="main"> <!--Stuff will be rendered here--> </div> <script src="index.js"></script> </body> </html>

Make sure to include index.js ! This is generated automatically and takes care of mounting the go program.

Alright! This is all that we need! Now just build the project and serve it



$ go-wasm Copying Static :: static -> docs Building Go :: wasm.go Generating JS :: docs/index.js Serving :: docs on :8080

Alright! It works! Just open up localhost:8080 in a browser and take it all in.

However there's one thing missing, a style sheet.



/* css/main.sass */ h1 color : red

And, of course add the <link rel="stylesheet" href="main.css"> to index.html and you're good to go! The server doesn't auto reload, but I'll probably implement that sooner or later.

Sass, scss and less stylesheets are compiled to css files with the same name, so main.sass should be include as main.css in the HTML.

Alright, I hope someone found this useful or at least mildly interesting. I'm new to this site and this is the first thing I've written here. Have a wonderful day folks.