Getting Started with Go Wails: Replacing Your Electron App

If you're looking for a way to build a sleek desktop application with modern web-like interfaces while avoiding the resource-heavy nature of Electron, Wails is an excellent alternative. Built for developers familiar with Go, Wails allows you to combine Go's efficiency and performance with the aesthetic flexibility of web technologies. In this post, we’ll explore how to get started with Wails and build a simple desktop application.

Why Choose Wails Over Electron?

Before diving in, let’s understand why Wails is a great alternative:

1. Lightweight: Unlike Electron, which bundles an entire Chromium browser, Wails leverages native webview libraries, keeping app sizes smaller and memory usage lower.

2. Performance: Go's speed and efficient resource handling provide a robust backend for your app.

3. Easy-to-Use API: Wails makes it seamless to call Go methods from your frontend and vice versa.

4. Native Look and Feel: Wails uses the platform’s native webview, ensuring your app feels at home on any OS.

Step 1: Install Wails

Ensure you have Go (v1.20+) installed. If not, download it from the official Go website.

To install Wails, use the following command:

bash

Copy code

go install github.com/wailsapp/wails/v2/cmd/wails@latest

Verify the installation by running:

bash

Copy code

wails doctor

This checks your environment and ensures everything is set up correctly.

Step 2: Create a New Wails Project

Create a new Wails project using the init command:

bash

Copy code

wails init

You’ll be prompted to choose a template. Select one based on your frontend framework preference:

• React (TypeScript or JavaScript)

• Svelte

• Vue

• Plain HTML/CSS/JS

For this example, let’s go with React (TypeScript).

Step 3: Explore the Project Structure

Your project will have two main directories:

• frontend: Contains the React application. Here, you’ll design the UI and add interactivity.

• backend: A Go package where you’ll implement the core application logic.

Key files include:

• main.go: The entry point for the Go application.

• frontend/src/App.tsx: The main React component.

Step 4: Build Your Backend

Open main.go and define some backend functionality. For instance, a simple greeting function:

go

Copy code

package main import ( "context" "github.com/wailsapp/wails/v2" ) type App struct{} func NewApp() *App { return &App{} } // Greet returns a greeting message func (a *App) Greet(name string) string { return "Hello, " + name + "!" } func main() { app := NewApp() err := wails.Run(&wails.Options{ Title: "Wails Example", Width: 800, Height: 600, Resizable: true, Bind: []interface{}{app}, }) if err != nil { println("Error:", err.Error()) } }

The Bind option allows the frontend to call the Greet method.

Step 5: Build the Frontend

In the frontend/src/App.tsx file, add a simple form to interact with the backend:

tsx

Copy code

import React, { useState } from "react"; import { invoke } from "@wailsapp/runtime"; const App: React.FC = () => { const [name, setName] = useState(""); const [greeting, setGreeting] = useState(""); const handleGreet = async () => { const result = await invoke("Greet", { name }); setGreeting(result); }; return ( <div style={{ padding: "20px" }}> <h1>Welcome to Wails!</h1> <input type="text" placeholder="Enter your name" value={name} onChange={(e) => setName(e.target.value)} style={{ padding: "10px", marginRight: "10px" }} /> <button onClick={handleGreet} style={{ padding: "10px" }}> Greet Me </button> {greeting && <p>{greeting}</p>} </div> ); }; export default App;

Step 6: Run Your Application

Start the Wails development server:

bash

Copy code

wails dev

This compiles your Go backend and serves your React frontend in a development environment. Any changes to the code will automatically reload the app.

Step 7: Build for Production

Once your app is ready for production, use:

bash

Copy code

wails build

This generates an executable for your platform (e.g., .exe for Windows, .app for macOS).

Conclusion

Wails offers a lightweight, efficient, and user-friendly alternative to Electron, especially for developers already familiar with Go. Its integration with modern frontend frameworks and seamless Go bindings makes it ideal for building desktop apps that are both performant and visually appealing.

Start migrating your Electron apps to Wails today and enjoy the benefits of a lighter, faster desktop experience. 🚀