Skip to main content
Version: Next Version 🚧

Templates

Wails generates projects from pre-created templates. In v1, this was a difficult to maintain set of projects that were subject to going out of date. In v2, to empower the community, a couple of new features have been added for templates:

  • Ability to generate projects from Remote Templates
  • Tooling to help create your own templates

Creating Templates​

To create a template, you can use the wails generate template command. To generate a default template, run:

wails generate template -name mytemplate

This creates the directory "mytemplate" with default files:

mytemplate/
.
|-- NEXTSTEPS.md
|-- README.md
|-- app.tmpl.go
|-- frontend
|   `-- dist
|       |-- assets
|       |   |-- fonts
|       |   |   |-- OFL.txt
|       |   |   `-- nunito-v16-latin-regular.woff2
|       |   `-- images
|       |       `-- logo-dark.svg
|       |-- index.html
|       |-- main.css
|       `-- main.js
|-- go.mod.tmpl
|-- main.tmpl.go
|-- template.json
`-- wails.tmpl.json

Template Overview​

The default template consists of the following files and directories:

Filename / DirDescription
NEXTSTEPS.mdInstructions on how to complete the template
README.mdThe README published with the template
app.tmpl.goapp.go template file
frontend/The directory containing frontend assets
go.mod.tmplgo.mod template file
main.tmpl.gomain.go template file
template.jsonThe template metadata
wails.tmpl.jsonwails.json template file

At this point it is advisable to follow the steps in NEXTSTEPS.md.

Creating a Template from an Existing Project​

It's possible to create a template from an existing frontend project by passing the path to the project when generating the template. We will now walk through how to create a Vue 3 template:

  • Install the vue cli: npm install -g @vue/cli
  • Create the default project: vue create vue3-base
    • Select Default (Vue 3) ([Vue 3] babel, eslint)
  • After the project has been generated, run:
> wails generate template -name wails-vue3-template -frontend .\vue3-base\
Extracting base template files...
Migrating existing project files to frontend directory...
Updating package.json data...
Renaming package.json -> package.tmpl.json...
Updating package-lock.json data...
Renaming package-lock.json -> package-lock.tmpl.json...
  • The template may now be customised as specified in the NEXTSTEPS.md file
  • Once the files are ready, it can be tested by running: wails init -n my-vue3-project -t .\wails-vue3-template\
  • To test the new project, run: cd my-vue3-project then wails build
  • Once the project has compiled, run it: .\build\bin\my-vue3-project.exe
  • You should have a fully functioning Vue3 application:

Publishing Templates​

Publishing a template is simply pushing the files to GitHub. The following best practice is encouraged:

  • Remove any unwanted files and directories (such as .git) from your frontend directory
  • Ensure that template.json is complete, especially helpurl
  • Push the files to GitHub
  • Create a PR on the Community Templates page
  • Announce the template on the Template Announcement discussion board