diff --git a/mkdocs-website/docs/en/getting-started/next-steps.md b/mkdocs-website/docs/en/getting-started/next-steps.md index 5a43bce3b..590be0365 100644 --- a/mkdocs-website/docs/en/getting-started/next-steps.md +++ b/mkdocs-website/docs/en/getting-started/next-steps.md @@ -1,12 +1,13 @@ # Next Steps -Now that you have Wails installed, you can start exploring the alpha version. +Now that you have created your first application, you can start exploring the other features that v3 alpha provides. + + +## Examples The best place to start is the `examples` directory in the Wails repository. This contains a number of examples that you can run and play with. -## Running an example - To run an example, you can simply use: ```shell @@ -15,25 +16,5 @@ go run . in the example directory. -The status of the examples is on the [roadmap](../roadmap.md). - -## Creating a new project - -To create a new project, you can use the `wails3 init` command. This will create -a new project in the current directory. - -Wails3 uses [Task](https://taskfile.dev) as its build system by default, -although there is no reason why you can't use your own build system, or use -`go build` directly. Wails has the task build system built in and can be run -using `wails3 task`. - -If you look through the `Taskfile.yaml` file, you will see that there are a -number of tasks defined. The most important one is the `build` task. This is the -task that is run when you use `wails3 build`. - -The task file is unlikely to be complete and is subject to change over time. - -## Building a project - -To build a project, you can use the `wails3 build` command. This is a shortcut -for `wails3 task build`. +!!! note + Some examples may not work during alpha development. diff --git a/mkdocs-website/docs/en/getting-started/your-first-app.md b/mkdocs-website/docs/en/getting-started/your-first-app.md new file mode 100644 index 000000000..5144fc019 --- /dev/null +++ b/mkdocs-website/docs/en/getting-started/your-first-app.md @@ -0,0 +1,80 @@ +# Your First Application + +Creating your first application with Wails v3 Alpha is an exciting journey into the world of modern desktop app development. This guide will walk you through the process of creating a basic application, showcasing the power and simplicity of Wails. + +## Prerequisites + +Before you begin, ensure you have the following installed: + +- Go (version 1.21 or later) +- Node.js (LTS version) +- Wails v3 Alpha (see the [installation guide](/getting-started/installation) for instructions) + +## Step 1: Creating a New Project + +Open your terminal and run the following command to create a new Wails project: + +`wails3 init -n myfirstapp` + +This command creates a new directory called `myfirstapp` with all the necessary files. + +## Step 2: Exploring the Project Structure + +Navigate to the `myfirstapp` directory. You'll find several files and folders: + +- `build`: Contains files used by the build process. +- `frontend`: Contains your web frontend code. +- `go.mod` & `go.sum`: Go module files. +- `main.go`: The entry point for your Wails application. +- `Taskfile.yml`: Defines all the tasks used by the build system. Learn more at the [Task](https://taskfile.dev/) website. + +Take a moment to explore these files and familiarize yourself with the structure. + +!!! note + Although Wails v3 uses [Task](https://taskfile.dev/) as its default build system, there is nothing stopping you from using `make` or any other alternative build system. + +## Step 3: Building Your Application + +To build your application, execute: + +`wails3 build` + +This command compiles a debug version of your application and saves it in a new `bin` directory. +You can run this like you would any normal application: + + +=== "Mac" + + `./bin/myfirstapp` + +=== "Windows" + + `bin\myfirstapp.exe` + +=== "Linux" + + `./bin/myfirstapp` + +You'll see a simple UI, the starting point for your application. As it is the debug version, you'll also see logs in the console window. This is useful for debugging purposes. + +## Step 4: Making Changes + +Now, let's make a small change: + +1. Open `frontend/main.js`. +2. Change the line that has `