Tutorial: Adding a GUI to Golang

This article explains how to write cross platform applications in Go using Electron as a web based GUI.

Preface

Go has become very popular for writing cloud based- and command-line applications. With the help of Electron, Go can easily be extended to write graphical powered desktop application while having the power of all your cpu cores in the background (in contrast to nodejs). While most of us have experience in writing HTML/JS/CSS this sounds like the perfect fit for “web loving” developers.

With the lately rewritten Electron API abstraction gotron , which is a wrapper around Electrons BrowserWindow striving for the same API, it is no longer needed to touch nodejs.

In the next sections we want to show you how to get started with your first Electron application powered by gotron.

Prerequisites

* go1.11 with modules enabled
* nodejs
* npm

Getting Started

Create a new Go project and add gotron as a dependency

go get https://github.com/Equanox/gotron

Create a file named main.go and copy & paste the following code..

Build your application using go build and start the created executable.

go build -o ./run
./run

Gotron will download Electron (only needed on first execution) and stores it in a directory called .gotron. On success this window must appear…

Gotron default application

As a default a basic application is injected, which is the purple window you see above.

Provide your own UI

Having a default UI is nice, though it’s certainly not what you want. To display a custom UI the only thing gotron needs, is a path to a directory containing a index.html.

Lets’s create a folder named webapp in the same directory where your main.go is located and add a index.html .

mkdir webapp
cd webapp
touch index.html

Copy the code below into your index.html.

you are

Tell gotron to use this directory by changing line 9 in your main.go to

window, err := gotron.New("webapp")

This will tell gotron to copy the contents of webapp into .gotron/assets, which is passed to Electron on startup. Now type

go build -o ./run
./run

and the window below appears.

index.html

Javascript

To use javascript create a file inside webapp named index.js and import it from your index.html using script tags.

<script type="text/javascript" src="./index.js"></script>

Be aware that your javascript code runs in a nodejs environment so it might be necessary to guard your imports. Read more about it in this stack-overflow-post .

Building an Executable

To bundle your Go program with Electron use a cli app named gotron-builder. Download the executable from https://github.com/Equanox/gotron/releases and make sure it is in your PATH.

When ready, use it in the same directory where your main.go is located. Just type

gotron-builder

This will build your Electron application using your web application located in .gotron/assets. It will also take care of building your executable from main.go.

When finished a dist directory appears inside yourapp looking propably like this

yourapp
| main.go
| -dist
|  | -linux-unpacked (name depends on your platform)
|  |  | yourapp (This is your executable)
|  |  | - elctronjs
|  |  |   | ~~~
|  |  |   | ~~~

Now start your application using the executable in ./dist/linux-unpacked/yourapp .

Cross Compilation

You can also cross compile your application to Windows or MacOs.

gotron-builder --win     // windows (wine required)
gotron-builder --macos   // macos
gotron-builder --linux   // linux

As electron-builder is used to pack Electron keep an eye for querks of cross compilation of Electron here .

Conclusion

In this tutorial we showed you how to control and deploy a GUI on top of Go. With purity of gotron’s api and with gotron-builder as your bundler it has become much simpler to deploy your apps to Windows, MacOS and Linux while using the power of GO/HTML/JS/CSS. Feel free to give it a try and keep us in the loop if you create your next GUI Application based on gotron.