diff --git a/astro.config.mjs b/astro.config.mjs
index ac9bfcea2f..bb97b40dfc 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -91,6 +91,10 @@ export default defineConfig({
label: 'Create a Project',
link: '/2/guide/create/',
},
+ {
+ label: 'Frontend Configuration',
+ link: '/2/guide/frontend/',
+ },
{
label: 'Upgrade & Migrate',
link: '2/guide/upgrade-migrate',
diff --git a/src/content/docs/2/guide/create/index.mdx b/src/content/docs/2/guide/create/index.mdx
index 34d8979ace..f586448c3d 100644
--- a/src/content/docs/2/guide/create/index.mdx
+++ b/src/content/docs/2/guide/create/index.mdx
@@ -62,12 +62,11 @@ Follow along with the prompts to choose your project name, frontend language, pa
:::tip[Not sure what to choose?]
-We use [SolidJS](https://www.solidjs.com) throughout the Tauri documentation and examples. For the easiest way to follow along we recommend the following:
+We recommend starting with the vanilla template (HTML, CSS, and JavaScript without a frontend framework) to get started. You can always [integrate a frontend framework](/2/guide/create/existing-project) later.
- Choose which language to use for your frontend: `TypeScript / JavaScript`
- Choose your package manager: `pnpm`
- {/* TODO: Change phrasing in CTA from UI to frontend and Solid to SolidJS */}
-- Choose your UI template: `Solid`
+- Choose your UI template: `Vanilla`
- Choose your UI flavor: `TypeScript`
:::
@@ -76,58 +75,33 @@ We use [SolidJS](https://www.solidjs.com) throughout the Tauri documentation and
After `create-tauri-app` has complete you can navigate into your project's folder, install dependencies, then use the [Tauri CLI](/2/reference/cli) to start the development server:
-
-
+import CommandTabs from '@components/CommandTabs.astro';
- ```sh
- cd my-tauri-app
+
-
- ```sh
- cd my-tauri-app
+ npm run tauri dev"
+ yarn="cd my-tauri-app
yarn install
- yarn tauri dev
- ```
-
-
-
-
- ```sh
- cd my-tauri-app
+ yarn tauri dev"
+ pnpm="cd my-tauri-app
pnpm install
- pnpm tauri dev
- ```
-
-
-
+ pnpm tauri dev"
+ cargo="cd my-tauri-app
+ cargo tauri dev"
+/>
- ```sh
- cd my-tauri-app
- cargo tauri dev
- ```
-
-
-
-
-You'll now see a new window open with your app running:
-
-TODO: Image of app here
+You'll now see a new window open with your app running.
**Congratulations!** You've made your Tauri app! 🚀
-
+## Next Steps
+- [Add and Configure a Frontend Framework](/2/guide/frontend)
- [Tauri Command Line Interface (CLI) Reference](/2/reference/cli)
- [Learn how to build your Tauri app](/2/guide/build)
- [Discover additional features and recipes to extend Tauri](/2/guide/list)
-
-
List to best practices, blog posts, etc.
diff --git a/src/content/docs/2/guide/frontend/index.mdx b/src/content/docs/2/guide/frontend/index.mdx
new file mode 100644
index 0000000000..cfd18ee3b0
--- /dev/null
+++ b/src/content/docs/2/guide/frontend/index.mdx
@@ -0,0 +1,50 @@
+---
+title: Frontend Configuration
+i18nReady: true
+---
+
+import { LinkCard, CardGrid } from '@astrojs/starlight/components';
+
+Tauri is frontend agnostic and supports most frontend frameworks out of the box. However, sometimes a framework need a bit of extra configuration to integrate with Tauri. Below is a list of frameworks with recommended configurations.
+
+If a framework is not listed then it may work with Tauri with no additional configuration needed or it could have not been documented yet. Any contributions to add a framework that may require additional configuration are welcome to help others in the Tauri community.
+
+:::tip[Framework Not Listed?]
+
+Don't see a framework listed? It may work with Tauri without any additional configuration required. Read the [configuration checklist](#configuration-checklist) for any common configurations to check for.
+
+:::
+
+## JavaScript
+
+
+
+
+
+
+
+
+
+
+## Rust
+
+
+
+
+
+
+
+
+## Configuration Checklist
+
+Conceptually Tauri acts as a static web host. You need to provide Tauri with a folder containing some mix of HTML, CSS, Javascript and possibly WASM that can be served to the webview Tauri provides.
+
+Below is a checklist of common scenarios needed to integrate a frontend with Tauri:
+
+{/* TODO: Link to core concept of SSG/SSR, etc. */}
+{/* TODO: Link to mobile development server guide */}
+{/* TODO: Concept of how to do a client-server relationship? */}
+
+- Use static site generation (SSG). Tauri doesn't officially support server based alternatives (such as SSR).
+- For mobile development, a development server of some kind is necessary that can host the frontend on your internal IP.
+- Use a proper client-server relationship between your app and your API's (no hybrid solutions with SSR).
diff --git a/src/content/docs/2/guide/frontend/leptos.mdx b/src/content/docs/2/guide/frontend/leptos.mdx
new file mode 100644
index 0000000000..87986abf7e
--- /dev/null
+++ b/src/content/docs/2/guide/frontend/leptos.mdx
@@ -0,0 +1,7 @@
+---
+title: Leptos
+---
+
+import Stub from '@components/Stub.astro';
+
+
diff --git a/src/content/docs/2/guide/frontend/nextjs.mdx b/src/content/docs/2/guide/frontend/nextjs.mdx
new file mode 100644
index 0000000000..b8049f551a
--- /dev/null
+++ b/src/content/docs/2/guide/frontend/nextjs.mdx
@@ -0,0 +1,103 @@
+---
+title: Next.js
+i18nReady: true
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import CommandTabs from '@components/CommandTabs.astro';
+
+Next.js is a React framework. Learn more about Next.js at https://nextjs.org. This guide is accurate as of Next.js 13.4.19.
+
+## Checklist
+
+- Use static exports by setting `output: 'export'`. Tauri doesn't support server-based solutions.
+- Use `internal-ip` for mobile compatibility so you can configure `assetPrefix`. This is required so that the server properly resolves assets.
+- Use `out/` as `distDir` in `tauri.conf.json`.
+
+## Example Configuration
+
+1. Install `internal-ip` for mobile development:
+
+
+
+2. Update Tauri configuration:
+
+
+
+
+```json
+// tauri.conf.json
+{
+ "build": {
+ "beforeDevCommand": "npm run dev",
+ "beforeBuildCommand": "npm run build",
+ "devPath": "http://localhost:3000",
+ "distDir": "../dist"
+ }
+}
+```
+
+
+
+
+```json
+// tauri.conf.json
+{
+ "build": {
+ "beforeDevCommand": "yarn dev",
+ "beforeBuildCommand": "yarn generate",
+ "devPath": "http://localhost:3000",
+ "distDir": "../dist"
+ }
+}
+```
+
+
+
+
+```json
+// tauri.conf.json
+{
+ "build": {
+ "beforeDevCommand": "pnpm dev",
+ "beforeBuildCommand": "pnpm generate",
+ "devPath": "http://localhost:3000",
+ "distDir": "../dist"
+ }
+}
+```
+
+
+
+
+3. Update Next.js configuration:
+
+```ts
+// next.conf.ts
+const isProd = process.env.NODE_ENV === 'production';
+module.exports = async (phase, { defaultConfig }) => {
+ let internalHost = null;
+ // In dev mode we use the internal-ip to serve the assets
+ if (!isProd) {
+ const { internalIpV4 } = await import('internal-ip');
+ internalHost = await internalIpV4();
+ }
+ const nextConfig = {
+ // Ensure Next.js uses SSG instead of SSR
+ // https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
+ output: 'export',
+ // Note: This experimental feature is required to use NextJS Image in SSG mode.
+ // See https://nextjs.org/docs/messages/export-image-api for different workarounds.
+ images: {
+ unoptimized: true,
+ },
+ // Configure assetPrefix or else the server won't properly resolve your assets.
+ assetPrefix: isProd ? null : `http://${internalHost}:3000`,
+ };
+ return nextConfig;
+};
+```
diff --git a/src/content/docs/2/guide/frontend/nuxt.mdx b/src/content/docs/2/guide/frontend/nuxt.mdx
new file mode 100644
index 0000000000..fd5c64e0cf
--- /dev/null
+++ b/src/content/docs/2/guide/frontend/nuxt.mdx
@@ -0,0 +1,101 @@
+---
+title: Nuxt
+i18nReady: true
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+Learn more about Nuxt at https://nuxt.com. This guide is accurate as of Nuxt 3.7.
+
+## Checklist
+
+- Use SSG by setting `ssr: false`. Tauri doesn't support server based solutions.
+- Set host to `0.0.0.0`.
+- Use `dist/` as `distDir` in `tauri.conf.json`.
+- Compile using `nuxi generate`.
+- (Optional): Disable telemetry by setting `telemetry: false` in `nuxt.config.ts`.
+
+## Example Configuration
+
+1. Update Tauri configuration:
+
+
+
+
+```json
+// tauri.conf.json
+{
+ "build": {
+ "beforeDevCommand": "npm run dev",
+ "beforeBuildCommand": "npm run generate",
+ "devPath": "http://localhost:3000",
+ "distDir": "../dist"
+ }
+}
+```
+
+
+
+
+```json
+// tauri.conf.json
+{
+ "build": {
+ "beforeDevCommand": "yarn dev",
+ "beforeBuildCommand": "yarn generate",
+ "devPath": "http://localhost:3000",
+ "distDir": "../dist"
+ }
+}
+```
+
+
+
+
+```json
+// tauri.conf.json
+{
+ "build": {
+ "beforeDevCommand": "pnpm dev",
+ "beforeBuildCommand": "pnpm generate",
+ "devPath": "http://localhost:3000",
+ "distDir": "../dist"
+ }
+}
+```
+
+
+
+
+2. Update Nuxt configuration:
+
+```ts
+export default defineNuxtConfig({
+ // (optional) Enable the Nuxt devtools
+ devtools: { enabled: true },
+ // Enable SSG
+ ssr: false,
+ vite: {
+ // Better support for Tauri CLI output
+ clearScreen: false,
+ // Enable environment variables
+ // Additional environment variables can be found at
+ // https://tauri.app/2/reference/environment-variables/
+ envPrefix: ['VITE_', 'TAURI_'],
+ server: {
+ // Tauri requires a consistent port
+ strictPort: true,
+ // Enables the development server to be discoverable by other devices for mobile development
+ host: '0.0.0.0',
+ hmr: {
+ // Use websocket for mobile hot reloading
+ protocol: 'ws',
+ // Make sure it's available on the network
+ host: '0.0.0.0',
+ // Use a specific port for hmr
+ port: 5183,
+ },
+ },
+ },
+});
+```
diff --git a/src/content/docs/2/guide/frontend/qwik.mdx b/src/content/docs/2/guide/frontend/qwik.mdx
new file mode 100644
index 0000000000..758566d764
--- /dev/null
+++ b/src/content/docs/2/guide/frontend/qwik.mdx
@@ -0,0 +1,7 @@
+---
+title: Qwik
+---
+
+import Stub from '@components/Stub.astro';
+
+
diff --git a/src/content/docs/2/guide/frontend/svelte.mdx b/src/content/docs/2/guide/frontend/svelte.mdx
new file mode 100644
index 0000000000..e94db0fc8e
--- /dev/null
+++ b/src/content/docs/2/guide/frontend/svelte.mdx
@@ -0,0 +1,7 @@
+---
+title: Svelte
+---
+
+import Stub from '@components/Stub.astro';
+
+
diff --git a/src/content/docs/2/guide/frontend/sycamore.mdx b/src/content/docs/2/guide/frontend/sycamore.mdx
new file mode 100644
index 0000000000..4560770065
--- /dev/null
+++ b/src/content/docs/2/guide/frontend/sycamore.mdx
@@ -0,0 +1,7 @@
+---
+title: Sycamore
+---
+
+import Stub from '@components/Stub.astro';
+
+
diff --git a/src/content/docs/2/guide/frontend/trunk.mdx b/src/content/docs/2/guide/frontend/trunk.mdx
new file mode 100644
index 0000000000..f338afb14a
--- /dev/null
+++ b/src/content/docs/2/guide/frontend/trunk.mdx
@@ -0,0 +1,48 @@
+---
+title: Trunk
+i18nReady: true
+---
+
+Trunk is a WASM web application bundler for Rust. Learn more about Trunk at https://trunkrs.dev. This guide is accurate as of Trunk 0.17.5.
+
+:::caution[Note on Mobile Support]
+
+Tauri mobile development is not currently possible with the official version of Trunk. If developing for mobile you will need to use https://github.com/amrbashir/trunk until https://github.com/thedodd/trunk/pull/494 and https://github.com/thedodd/trunk/pull/500 are merged and released.
+
+You will need to use `cargo install --git https://github.com/amrbashir/trunk` when installing Trunk and then set `serve.ws_protocol = "ws"` in `Trunk.toml`.
+
+:::
+
+## Checklist
+
+- Use SSG, Tauri doesn't officially support server based solutions.
+- Use `address = "0.0.0.0"` so that the webserver is available on the network for mobile development.
+- Enable `withGlobalTauri` to ensure that Tauri APIs are available in the `window.__TAURI__` variable and can be imported using `wasm-bindgen`.
+
+## Example Configuration
+
+1. Update Tauri configuration:
+
+```json
+// tauri.conf.json
+{
+ "build": {
+ "beforeDevCommand": "trunk serve",
+ "beforeBuildCommand": "trunk build",
+ "devPath": "http://localhost:8080",
+ "distDir": "../dist",
+ "withGlobalTauri": true
+ }
+}
+```
+
+2. Update Trunk configuration:
+
+```toml
+# Trunk.toml
+[watch]
+ignore = ["./src-tauri"]
+
+[serve]
+address = "0.0.0.0"
+```
diff --git a/src/content/docs/2/guide/frontend/vite.mdx b/src/content/docs/2/guide/frontend/vite.mdx
new file mode 100644
index 0000000000..40abceaf01
--- /dev/null
+++ b/src/content/docs/2/guide/frontend/vite.mdx
@@ -0,0 +1,7 @@
+---
+title: Vite
+---
+
+import Stub from '@components/Stub.astro';
+
+
diff --git a/src/content/docs/2/guide/frontend/webpack.mdx b/src/content/docs/2/guide/frontend/webpack.mdx
new file mode 100644
index 0000000000..59c7da461b
--- /dev/null
+++ b/src/content/docs/2/guide/frontend/webpack.mdx
@@ -0,0 +1,7 @@
+---
+title: Webpack
+---
+
+import Stub from '@components/Stub.astro';
+
+
diff --git a/src/content/docs/2/guide/frontend/yew.mdx b/src/content/docs/2/guide/frontend/yew.mdx
new file mode 100644
index 0000000000..66d54db990
--- /dev/null
+++ b/src/content/docs/2/guide/frontend/yew.mdx
@@ -0,0 +1,7 @@
+---
+title: Yew
+---
+
+import Stub from '@components/Stub.astro';
+
+
diff --git a/src/content/docs/2/reference/environment-variables.mdx b/src/content/docs/2/reference/environment-variables.mdx
new file mode 100644
index 0000000000..35beb18940
--- /dev/null
+++ b/src/content/docs/2/reference/environment-variables.mdx
@@ -0,0 +1,11 @@
+---
+title: Environment Variables
+---
+
+import Stub from '@components/Stub.astro';
+
+
+
+Integrate https://github.com/tauri-apps/tauri/blob/dev/tooling/cli/ENVIRONMENT_VARIABLES.md into this page.
+
+