# 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:

```mdx-code-block
<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