mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-03 01:13:03 +08:00

* docs: update changelog * feat: update website config * feat(website): add formatting configuration * docs: fix image resource paths and format documents * feat(website): update community guide page Co-authored-by: Lea Anthony <lea.anthony@gmail.com>
98 lines
3.6 KiB
Plaintext
98 lines
3.6 KiB
Plaintext
# 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](../reference/cli.mdx#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:
|
|
|
|
```shell title=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 / Dir | Description |
|
|
| --------------- | -------------------------------------------- |
|
|
| NEXTSTEPS.md | Instructions on how to complete the template |
|
|
| README.md | The README published with the template |
|
|
| app.tmpl.go | `app.go` template file |
|
|
| frontend/ | The directory containing frontend assets |
|
|
| go.mod.tmpl | `go.mod` template file |
|
|
| main.tmpl.go | `main.go` template file |
|
|
| template.json | The template metadata |
|
|
| wails.tmpl.json | `wails.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:
|
|
|
|
```shell
|
|
> 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:
|
|
|
|
<div className="text--center">
|
|
<img
|
|
src={require("@site/static/img/vue3-template.png").default}
|
|
width="50%"
|
|
/>
|
|
</div>
|
|
|
|
## 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](../community/templates.mdx) page
|
|
- Announce the template on the [Template Announcement](https://github.com/wailsapp/wails/discussions/825) discussion board
|