5
0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-02 06:19:43 +08:00

Add helloworld tutorial

This commit is contained in:
Lea Anthony 2022-07-10 15:07:42 +10:00
parent 7a63464997
commit 55ec688331
No known key found for this signature in database
GPG Key ID: 33DAF7BB90A58405
5 changed files with 118 additions and 1 deletions

View File

@ -181,7 +181,6 @@ func initProject(options *templates.Options, quiet bool) error {
// Output stats
elapsed := time.Since(start)
options.Logger.Println("")
options.Logger.Println("Project Name: " + options.ProjectName)
options.Logger.Println("Project Directory: " + options.TargetDir)
options.Logger.Println("Project Template: " + options.TemplateName)

View File

@ -0,0 +1,4 @@
{
"label": "Tutorials",
"position": 70
}

View File

@ -0,0 +1,114 @@
---
sidebar_position: 10
---
# Hello World
The aim of this tutorial is to get you up and running with the most basic
application using Wails. You will be able to:
- Create a new Wails application
- Build the application
- Run the application
:::note
This tutorial uses Windows as the target platform. Output will vary slightly
depending on your operating system.
:::
## Create a new Wails application
To create a new Wails application using the default vanilla JS template,
you need to run the following command:
```bash
wails init -n helloworld
```
You should see something similar to the following:
```
Wails CLI v2.0.0
Initialising Project 'helloworld'
---------------------------------
Project Name: helloworld
Project Directory: C:\Users\leaan\tutorial\helloworld
Project Template: vanilla
Template Support: https://wails.io
Initialised project 'helloworld' in 232ms.
```
This will create a new directory called `helloworld` in the current directory.
In this directory, you will find a number of files:
```
build/ - Contains the build files + compiled application
frontend/ - Contains the frontend files
app.go - Contains the application code
main.go - The main program with the application configuration
wails.json - The project configuration file
go.mod - The go module file
go.sum - The go module checksum file
```
## Build the application
To build the application, change to the new `helloworld` project directory and run the following command:
```bash
wails build
```
You should see something like the following:
```
Wails CLI v2.0.0
App Type: desktop
Platforms: windows/amd64
Compiler: C:\Users\leaan\go\go1.18.3\bin\go.exe
Build Mode: Production
Skip Frontend: false
Compress: false
Package: true
Clean Build Dir: false
LDFlags: ""
Tags: []
Race Detector: false
Building target: windows/amd64
------------------------------
- Installing frontend dependencies: Done.
- Compiling frontend: Done.
- Generating bundle assets: Done.
- Compiling application: Done.
Built 'C:\Users\leaan\tutorial\helloworld\build\bin\helloworld.exe' in 10.616s.
```
This has compiled the application and saved it in the `build/bin` directory.
## Run the application
If we view the `build/bin` directory in Windows Explorer, we should see our project binary:
<div class="text--center">
<img src="/img/helloworld-app-icon.png" width="134px"/>
</div>
<br/>
We can run it by simply double-clicking the `helloworld.exe` file.
On Mac, Wails generates a `helloworld.app` file which can be run by double-clicking it.
On Linux, you can run the application using `./helloworld` from the `build/bin` directory.
You should see the application working as expected:
<div class="text--center">
<img src="/img/windows-default-app.png" width="50%"
style={{"box-shadow": "rgb(255 255 255 / 20%) 0px 1px 2px 0px, rgb(104 104 104) 0px 1px 5px 0px"}}/>
</div>
<br/>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 374 KiB