Go is an extraordinary language commonly used for APIs and/or libraries. When someone thinks about graphical interfaces, he/she will probably use a built-in web server. However, there is a different approach that is gaining popularity. Wails is a technology that allows you to wrap both Go code and a web frontend into a single binary, making things simpler.
The purpose of this article is to get you acquainted with Wails by walking you through a simple example to show the CPU status in a graphical way. With this example, you will be able to understand the basic concepts and will have a new tool as an additional option whenever you need to build something similar.
What is Wails?
Wails is a framework that lets you write desktop apps using Go. The difference between Wails and other tools is that it exposes Go code to the frontend as functions that return promises. Wails is capable of this through a binding mechanism, which will be explained further on.
Wails provides the ability to wrap both Go code and a web frontend into a single binary. The Wails Command Line Interface makes this process easier because it handles project creation, compilation, and bundling.
- Go v1.12 or above
PATH environment variable should include the path to your ~/go/bin directory. You should also ensure Go modules are enabled with:
echo “export GO111MODULE=on” >> ~/.bashrc npm gcc + libraries (xcode-select --install)
Let’s Build an Application
We will build a desktop app using React and Go. It will be a very simple app to display the CPU usage of our machine in real-time.
How to Create a Project
For our example, we are going to use React. This will generate the following project structure and files:
If we want to run the code we just generated:
- To run the React front end:
~/Documents/GoCode/wails/cpustats-react/frontend:$ npm start
- To run the backend:
~/Documents/GoCode/wails/cpustats-react:$ wails serve
The application will run in the web browser at http://localhost:3000/. We will learn how to build it later. For testing and debugging purposes, we can code and check in the browser.
So now, how do we start reaping the benefits of using Wails for our project?
Binding Go Methods
Above, look at the method called basic. You will have to use the wails.CreateApp method with the desired configuration and then you will have to use the Bind() method to expose the method to the frontend.
Suppose you have a struct created in Go with the following method: GetCPUUsage. What this method does is use the gopsutil library to obtain the percentage of the machine’s CPU.
To bind an event you will use WailsInit. This is a method you will declare in the Go code. Look at how we declare an event called cpu_usage. The event will call the GetCPUUsage method every second.
In order to visualize the CPU usage graphically and with a radial bar, we use React graphs. To declare them, use the react-apexcharts library.
Building the project
The command used to build the project is wails build.
This will create our executable file: cpustats-react.
In addition, you can package the app using wails build -p.
This will generate an .app file, and in Mac, it will look like this:
The image for the app can be modified as well, by changing the appicon.png image.
When running, the desktop app will look like the following image. The CPU usage will be updated every second on the screen to reflect the corresponding percentage.
- Official Wails app page https://wails.app/
- Go CPU package https://godoc.org/github.com/shirou/gopsutil/cpu
- React charts library https://apexcharts.com/docs/react-charts/
After reviewing this simple example, we can conclude: