DEV Community

Alex Pliutau
Alex Pliutau

Posted on

Building Desktop App in Go using Wails


This post is a text version of packagemain #6: Building Desktop App in Go using Wails video.

As we all know, Go is mostly used to build APIs, web backends, CLI tools. But what's interesting is that Go can be used in places we were not expecting to see it.

For example, we can build a Desktop App with Go and Vue.js using Wails framework.

This framework is new and still in beta, but I was surprised how easy it was to develop, build and package an app with it.

Wails provides the ability to wrap both Go code and a web frontend into a single binary. The Wails CLI makes this easy for you, by handling project creation, compilation, and bundling.


We will build a very simple app to display CPU Usage of my machine in real time. And if you have time and like Wails, you can come up with something more creative and complex.


Wails CLI can be installed with go get. After installation, you should set it up using wails setup command.

go get
wails setup

Then let's bootstrap our project with the name cpustats:

wails init
cd cpustats

Our project consists of Go backend and Vue.js frontend. main.go will be our entrypoint, in which we can include any other dependencies, there is also go.mod file to manage them. frontend folder contains Vue.js components, webpack and CSS.


There are 2 main components to share data between Backend and Frontend: Binding and Events.

Binding is a single method that allows you to expose (bind) your Go code to the frontend.

Also, Wails provides a unified Events system similar to Javascript's native events system. This means that any event that is sent from either Go or Javascript can be picked up by either side. Data may be passed along with any event. This allows you to do neat things like have background processes running in Go and notifying the frontend of any updates.


Let's develop a backend part first, to get CPU Usage and send it to the frontend using bind method.

We will create a new package and define a type which I'll expose (bind) to the frontend.


package sys

import (


// Stats .
type Stats struct {
    log *wails.CustomLogger

// CPUUsage .
type CPUUsage struct {
    Average int `json:"avg"`

// WailsInit .
func (s *Stats) WailsInit(runtime *wails.Runtime) error {
    s.log = runtime.Log.New("Stats")
    return nil

// GetCPUUsage .
func (s *Stats) GetCPUUsage() *CPUUsage {
    percent, err := cpu.Percent(1*time.Second, false)
    if err != nil {
        s.log.Errorf("unable to get cpu stats: %s", err.Error())
        return nil

    return &CPUUsage{
        Average: int(math.Round(percent[0])),

If your struct has a WailsInit method, Wails will call it at startup. This allows you to do some initialisation before the main application is launched.

Import sys package in main.go and bind Stats instance to frontend:

package main

import (

func main() {
    js := mewn.String("./frontend/dist/app.js")
    css := mewn.String("./frontend/dist/app.css")

    stats := &sys.Stats{}

    app := wails.CreateApp(&wails.AppConfig{
        Width:  512,
        Height: 512,
        Title:  "CPU Usage",
        JS:     js,
        CSS:    css,
        Colour: "#131313",


We bind the stats instance from Go, which can be used in frontend by callind window.backend.Stats. If we want to call a function GetCPUUsage() it will return us a Promise.

window.backend.Stats.GetCPUUsage().then(cpu_usage => {

To build the whole project into single binary we should run wails build, -d flag can be added to build a debuggable version. It will create a binary with a name matching the project name.

Let's test if it works by simply displaying the CPU Usage value on the screen:

wails build -d


We sent CPU Usage value to frontend using Binding, now let's try different approach, let's create a timer on Backend which will send CPU Usage values in the background using Events approach. Then we can subscribe to the event in Javascript.

In Go we can do it in WailsInit function:

func (s *Stats) WailsInit(runtime *wails.Runtime) error {
    s.log = runtime.Log.New("Stats")

    go func() {
        for {
            runtime.Events.Emit("cpu_usage", s.GetCPUUsage())
            time.Sleep(1 * time.Second)

    return nil

In Vue.js we can subscribe to this event when component is mounted (or any other place):

mounted: function() {"cpu_usage", cpu_usage => {
        if (cpu_usage) {

Gauge Bar

It would be nice to display CPU Usage with a gauge bar, so we will include a third party dependency for that, simply by using npm:

npm install --save apexcharts
npm install --save vue-apexcharts

Then import it to main.js file:

import VueApexCharts from 'vue-apexcharts'

Vue.component('apexchart', VueApexCharts)

Now we can display our CPU Usage using apexcharts, and update the values of the component by receiving an event from Backend:

  <apexchart type="radialBar" :options="options" :series="series"></apexchart>

export default {
  data() {
    return {
      series: [0],
      options: {
        labels: ['CPU Usage']
  mounted: function() {"cpu_usage", cpu_usage => {
      if (cpu_usage) {
        this.series = [ cpu_usage.avg ];

To change styles we can directly modify the src/assets/css/main.css or define them in components.

Final Build and Run

wails build -d



I really enjoyed working with Wails, and the Events concept makes it really easy to control your application's state.

Check it out at or on Github at

Full code for this article on GitHub

Top comments (6)

erielmejias99 profile image
Eriel Mejias

But you have to rebuild your Vue app to test... Another way??

waseemakhtar profile image
Mohammad Waseem Akhtar

Enjoyed knowing and reading

haruanm profile image
Haruan Justino

Loved to know this framework.

donvitocodes profile image

Cool stuff! Just curious and for comparison, is there any similar project to this?

alyson profile image
aly quey

Awesome :)

consciousness_dev profile image
Ario Setiawan

I hope this project will go on...this brilliant...