---
sidebar_position: 2
---

# Creating a Project

## Project Generation

Now that the CLI is installed, you can generate a new project by using the `wails init` command.

Pick your favourite framework:

<!-- @formatter:off -->

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

<Tabs
    defaultValue="Svelte"
    values={[
        {label: "Svelte", value: "Svelte"},
 {label: "React", value: "React"},
 {label: "Vue", value: "Vue"},
 {label: "Preact", value: "Preact"},
 {label: "Lit", value: "Lit"},
 {label: "Vanilla", value: "Vanilla"},
 ]}
>
<TabItem value="Svelte">
    Generate a <a href={"https://svelte.dev/"}>Svelte</a> project using Javascript with:<br/><br/>

    wails init -n myproject -t svelte
If you would rather use Typescript:<br/>

    wails init -n myproject -t svelte-ts

</TabItem>
<TabItem value="React">
    Generate a <a href={"https://reactjs.org/"}>React</a> project using Javascript with:<br/><br/>

    wails init -n myproject -t react
If you would rather use Typescript:<br/>

    wails init -n myproject -t react-ts

</TabItem>
<TabItem value="Vue">
    <a href={"https://vuejs.org/"}>Vue</a>用のJavascriptプロジェクトを生成する場合:<br/><br/>

    wails init -n myproject -t vue

Typescriptプロジェクトを生成する場合:<br/>

    wails init -n myproject -t vue-ts

</TabItem>
<TabItem value="Preact">
    <a href={"https://preactjs.com/"}>Preact</a>用のJavascriptプロジェクトを生成する場合:<br/><br/>

    wails init -n myproject -t preact

Typescriptプロジェクトを生成する場合:<br/>

    wails init -n myproject -t preact-ts

</TabItem>
<TabItem value="Lit">
    <a href={"https://lit.dev/"}>Lit</a>用のJavascriptプロジェクトを生成する場合:<br/><br/>

    wails init -n myproject -t lit

Typescriptプロジェクトを生成する場合:<br/>

    wails init -n myproject -t lit-ts

</TabItem>
<TabItem value="Vanilla">
    Vanilla用のJavascriptプロジェクトを生成する場合:<br/><br/>

    wails init -n myproject -t vanilla

Typescriptプロジェクトを生成する場合:<br/>

    wails init -n myproject -t vanilla-ts

</TabItem>
</Tabs>

<!-- @formatter:on -->

<hr />

There are also [community templates](../community/templates.mdx) available that offer different capabilities and frameworks.

To see the other options available, you can run `wails init -help`. More details can be found in the [CLI Reference](../reference/cli.mdx#init).

## Project Layout

Wails projects have the following layout:

```
.
├── build/
│   ├── appicon.png
│   ├── darwin/
│   └── windows/
├── frontend/
├── go.mod
├── go.sum
├── main.go
└── wails.json
```

### Project structure rundown

- `/main.go` - The main application
- `/frontend/` - Frontend project files
- `/build/` - Project build directory
- `/build/appicon.png` - The application icon
- `/build/darwin/` - Mac specific project files
- `/build/windows/` - Windows specific project files
- `/wails.json` - The project configuration
- `/go.mod` - Go module file
- `/go.sum` - Go module checksum file

The `frontend` directory has nothing specific to Wails and can be any frontend project of your choosing.

The `build` directory is used during the build process. These files may be updated to customise your builds. If files are removed from the build directory, default versions will be regenerated.

The default module name in `go.mod` is "changeme". You should change this to something more appropriate.