Add project structure guide (#3432)

Author: Legend-Master

astro.config.mjs

@@ -100,6 +100,7 @@ export default defineConfig({
                     'start',
                     'start/prerequisites',
                     'start/create-project',
+                    'start/project-structure',
                     // {
                     //   label: 'What is Tauri?',
                     //   // translations: {

src/content/docs/security/capabilities.mdx

@@ -102,7 +102,7 @@ Inline capabilities can be mixed with pre-defined capabilities.
 
 By default, all commands that you registered in your app
 (using the
-[`tauri::Builder::.invoke_handler`](https://docs.rs/tauri/2.0.0/tauri/struct.Builder.html#method.invoke_handler)
+[`tauri::Builder::invoke_handler`](https://docs.rs/tauri/2.0.0/tauri/struct.Builder.html#method.invoke_handler)
 function)
 are allowed to be used by all the windows and webviews of the app.
 To change that, consider using
@@ -216,7 +216,7 @@ to higher privileged windows.
 ## Schema Files
 
 Tauri generates JSON schemas with all the permissions available to
-your application, allowing autocompletion in your IDE.
+your application through `tauri-build`, allowing autocompletion in your IDE.
 To use a schema, set the `$schema` property in your configuration file
 (either .json or .toml) to one of the platform-specific schemas
 located in the `gen/schemas` directory. Usually
@@ -232,12 +232,12 @@ Simplified example of an example Tauri application directory structure:
 tauri-app
 ├── index.html
 ├── package.json
-├── src
-├── src-tauri
+├── src/
+├── src-tauri/
 │   ├── Cargo.toml
-│   ├── capabilities
-│      └── <identifier>.json/toml
-│   ├── src
+│   ├── capabilities/
+│   │  └── <identifier>.json/toml
+│   ├── src/
 │   ├── tauri.conf.json
 ```
 

src/content/docs/start/create-project.mdx

@@ -5,7 +5,7 @@ sidebar:
 i18nReady: true
 ---
 
-import { Card, Steps } from '@astrojs/starlight/components';
+import { Steps } from '@astrojs/starlight/components';
 
 import Cta from '@fragments/cta.mdx';
 
@@ -222,7 +222,8 @@ The following example assumes you are creating a new project. If you've already
 
 ## Next Steps
 
+- [Learn about the project layout and what each file does](/start/project-structure/)
 - [Add and Configure a Frontend Framework](/start/frontend/)
 - [Tauri Command Line Interface (CLI) Reference](/reference/cli/)
-- [Learn how to build your Tauri app](/develop/)
+- [Learn how to develop your Tauri app](/develop/)
 - [Discover additional features to extend Tauri](/plugin/)

src/content/docs/start/index.mdx

@@ -7,13 +7,13 @@ sidebar:
 
 Tauri is a framework for building tiny, fast binaries for all major desktop and mobile platforms. Developers can integrate any frontend framework that compiles to HTML, JavaScript, and CSS for building their user experience while leveraging languages such as Rust, Swift, and Kotlin for backend logic when needed.
 
-Get started building with [`create-tauri-app`](https://github.com/tauri-apps/create-tauri-app) by using one of the below commands. Be sure to follow the [prerequisites guide](/start/prerequisites/) to install all of the dependencies required by Tauri and then view the [Frontend Configuration guides](/start/frontend/) for recommended frontend configurations.
+Get started building with [`create-tauri-app`](https://github.com/tauri-apps/create-tauri-app) by using one of the below commands. Be sure to follow the [prerequisites guide](/start/prerequisites/) to install all of the dependencies required by Tauri. For a more detailed walk through, see [Create a Project](/start/create-project/#using-create-tauri-app)
 
 import Cta from '../_fragments/cta.mdx';
 
 <Cta />
 
-After you've created your first app you can explore the different features and recipes of Tauri in the [List of Features & Recipes](/plugin/).
+After you've created your first app, take a look at [Project Structure](/start/project-structure/) to understand what each file does.
 
 Or explore the project setups and features from the examples ([tauri](https://github.com/tauri-apps/tauri/tree/dev/examples) | [plugins-workspace](https://github.com/tauri-apps/plugins-workspace/tree/v2/examples/api))
 

src/content/docs/start/project-structure.mdx

@@ -0,0 +1,58 @@
+---
+title: Project Structure
+i18nReady: true
+---
+
+A Tauri project is usually made of 2 parts, a Rust project and a JavaScript project (optional),
+and typically the setup looks something like this:
+
+```
+.
+├── package.json
+├── index.html
+├── src/
+│   ├── main.js
+├── src-tauri/
+│   ├── Cargo.toml
+│   ├── Cargo.lock
+│   ├── build.rs
+│   ├── tauri.conf.json
+│   ├── src/
+│   │   ├── main.rs
+│   │   └── lib.rs
+│   ├── icons/
+│   │   ├── icon.png
+│   │   ├── icon.icns
+│   │   └── icon.ico
+│   └── capabilities/
+│       └── default.json
+```
+
+In this case, the JavaScript project is at the top level, and the Rust project is inside `src-tauri/`,
+the Rust project is a normal [Cargo project](https://doc.rust-lang.org/cargo/guide/project-layout.html) with some extra files:
+
+- `tauri.conf.json` is the main configuration file for Tauri, it contains everything from the application identifier to dev server url,
+  this file is also a marker for the [Tauri CLI](/reference/cli/) to find the Rust project,
+  to learn more about it, see [Tauri Config](/develop/configuration-files/#tauri-config)
+- `capabilities/` directory is the default folder Tauri reads [capability files](/security/capabilities/) from (in short, you need to allow commands here to use them in your JavaScript code),
+  to learn more about it, see [Security](/security/)
+- `icons/` directory is the default output directory of the [`tauri icon`](/reference/cli/#icon) command, it's usually referenced in `tauri.conf.json > bundle > icon` and used for the app's icons
+- `build.rs` contains `tauri_build::build()` which is used for tauri's build system
+- `src/lib.rs` contains the Rust code and the mobile entry point (the function marked with `#[cfg_attr(mobile, tauri::mobile_entry_point)]`),
+  the reason we don't write directly in `main.rs` is because we compile your app to a library in mobile builds and load them through the platform frameworks
+- `src/main.rs` is the main entry point for the desktop, and we run `tauri_app_lib::run()` in `main` to use the same entry point as mobile,
+  so to keep it simple, don't modify this file, modify `lib.rs` instead
+
+Tauri works similar to a static web host, and the way it builds is that you would compile your JavaScript project to static files first,
+and then compile the Rust project that will bundle those static files in,
+so the JavaScript project setup is basically the same as if you were to build a static website,
+to learn more, see [Frontend Configuration](/start/frontend/)
+
+If you want to work with Rust code only, simply remove everything else and use the `src-tauri/` folder as your top level project or as a member of your Rust workspace
+
+## Next Steps
+
+- [Add and Configure a Frontend Framework](/start/frontend/)
+- [Tauri Command Line Interface (CLI) Reference](/reference/cli/)
+- [Learn how to develop your Tauri app](/develop/)
+- [Discover additional features to extend Tauri](/plugin/)