Setting Up a Desktop Project with Wails, React, and Vite: A Step-by-Step Guide

INTRODUCTION

In this article, I’ll walk you through how to quickly set up a desktop project using Wails, React, and Vite.

Wails uses Go for the backend and any front-end framework of your choosing. For this article, we will stick with React.

PREREQUISITES

To be able to successfully run this project on your machine, you need to install the following:

• Go: You need to have Go 1.18 or above. Check here to download Go on your machine. You can check if Go is installed on your machine by running the command

go version

• Node: You need to have node 15 or above. Check here to download the latest version of node. By installing node, npm is also installed. You can check if node is installed by running

node -–version

and check if npm is installed by running

npm -–version

• Wails CLI: You can install the wails CLI by running the command

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

SETTING UP THE DEVELOPMENT ENVIRONMENT

Let us create a React project by running the following command:

wails init -n myproject -t react

If you get an error saying “wails not found”, then you are probably missing “go/bin” in your path. You can add it to your path by running the command export PATH=$PATH:~/.bin:~/go/bin

Your terminal should look like the above if your project was run successfully.

Your folder structure should look like the above. You can make changes to the frontend of your application by editing the files in your “frontend” folder.

RUNNING YOUR APPLICATION

Now, we need to start our project. We have to change directory by running the command cd myproject to make sure we are in the newly created project folder. Then, run

wails dev

An icon will pop up and your project will be running successfully!