diff --git a/src/content/docs/start/Frontend Configuration/index.mdx b/src/content/docs/start/Frontend Configuration/index.mdx
index a5bf5216cd..7056caccb6 100644
--- a/src/content/docs/start/Frontend Configuration/index.mdx
+++ b/src/content/docs/start/Frontend Configuration/index.mdx
@@ -12,12 +12,6 @@ Tauri is frontend agnostic and supports most frontend frameworks out of the box.
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](/start/frontend-configuration/#configuration-checklist) for any common configurations to check for.
-
-:::
-
## 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.
@@ -28,18 +22,24 @@ Below is a checklist of common scenarios needed to integrate a frontend with Tau
{/* 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).
+- Use static site generation (SSG), single-page applications (SPA), or classic multi-page apps (MPA). Tauri does not natively 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).
## JavaScript
+{/* TODO: Help me with the wording here lol */}
+For most projects we recommend [Vite](https://vitejs.dev/) for SPA frameworks such as React, Vue, Svelte, and Solid, but also for plain JavaScript or TypeScript projects. Most other guides listed here show how to use Meta-Frameworks as they are typically designed for SSR and therefore require special configuration.
+
-
-
+
+
@@ -51,3 +51,11 @@ Below is a checklist of common scenarios needed to integrate a frontend with Tau
+
+
+
+:::tip[Framework Not Listed?]
+
+Don't see a framework listed? It may work with Tauri without any additional configuration required. Read the [configuration checklist](/start/frontend-configuration/#configuration-checklist) for any common configurations to check for.
+
+:::
diff --git a/src/content/docs/start/Frontend Configuration/nextjs.mdx b/src/content/docs/start/Frontend Configuration/nextjs.mdx
index b8049f551a..37afa95725 100644
--- a/src/content/docs/start/Frontend Configuration/nextjs.mdx
+++ b/src/content/docs/start/Frontend Configuration/nextjs.mdx
@@ -6,22 +6,22 @@ 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.
+Next.js is a React framework. Learn more about Next.js at https://nextjs.org. This guide is accurate as of Next.js 14.2.3.
## 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`.
+- Use `out/` as `frontendDist` in `tauri.conf.json`.
## Example Configuration
-1. Install `internal-ip` for mobile development:
+1. Install `internal-ip` version 7 for mobile development. Version 8.0.0 does **not** work!
2. Update Tauri configuration:
@@ -35,8 +35,8 @@ Next.js is a React framework. Learn more about Next.js at https://nextjs.org. Th
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
- "devPath": "http://localhost:3000",
- "distDir": "../dist"
+ "devUrl": "http://localhost:3000",
+ "frontendDist": "../dist"
}
}
```
@@ -50,8 +50,8 @@ Next.js is a React framework. Learn more about Next.js at https://nextjs.org. Th
"build": {
"beforeDevCommand": "yarn dev",
"beforeBuildCommand": "yarn generate",
- "devPath": "http://localhost:3000",
- "distDir": "../dist"
+ "devUrl": "http://localhost:3000",
+ "frontendDist": "../dist"
}
}
```
@@ -65,8 +65,8 @@ Next.js is a React framework. Learn more about Next.js at https://nextjs.org. Th
"build": {
"beforeDevCommand": "pnpm dev",
"beforeBuildCommand": "pnpm generate",
- "devPath": "http://localhost:3000",
- "distDir": "../dist"
+ "devUrl": "http://localhost:3000",
+ "frontendDist": "../dist"
}
}
```
@@ -77,27 +77,29 @@ Next.js is a React framework. Learn more about Next.js at https://nextjs.org. Th
3. Update Next.js configuration:
```ts
-// next.conf.ts
+// next.conf.mjs
+/** @type {import('next').NextConfig} */
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;
+
+let internalHost = null;
+
+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 feature is required to use the Next.js Image component 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`,
};
+
+export default nextConfig;
```
diff --git a/src/content/docs/start/Frontend Configuration/nuxt.mdx b/src/content/docs/start/Frontend Configuration/nuxt.mdx
index fd5c64e0cf..498a6f1d39 100644
--- a/src/content/docs/start/Frontend Configuration/nuxt.mdx
+++ b/src/content/docs/start/Frontend Configuration/nuxt.mdx
@@ -11,7 +11,7 @@ Learn more about Nuxt at https://nuxt.com. This guide is accurate as of Nuxt 3.7
- 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`.
+- Use `dist/` as `frontendDist` in `tauri.conf.json`.
- Compile using `nuxi generate`.
- (Optional): Disable telemetry by setting `telemetry: false` in `nuxt.config.ts`.
@@ -28,8 +28,8 @@ Learn more about Nuxt at https://nuxt.com. This guide is accurate as of Nuxt 3.7
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run generate",
- "devPath": "http://localhost:3000",
- "distDir": "../dist"
+ "devUrl": "http://localhost:3000",
+ "frontendDist": "../dist"
}
}
```
@@ -43,8 +43,8 @@ Learn more about Nuxt at https://nuxt.com. This guide is accurate as of Nuxt 3.7
"build": {
"beforeDevCommand": "yarn dev",
"beforeBuildCommand": "yarn generate",
- "devPath": "http://localhost:3000",
- "distDir": "../dist"
+ "devUrl": "http://localhost:3000",
+ "frontendDist": "../dist"
}
}
```
@@ -58,8 +58,8 @@ Learn more about Nuxt at https://nuxt.com. This guide is accurate as of Nuxt 3.7
"build": {
"beforeDevCommand": "pnpm dev",
"beforeBuildCommand": "pnpm generate",
- "devPath": "http://localhost:3000",
- "distDir": "../dist"
+ "devUrl": "http://localhost:3000",
+ "frontendDist": "../dist"
}
}
```
diff --git a/src/content/docs/start/Frontend Configuration/sveltekit.mdx b/src/content/docs/start/Frontend Configuration/sveltekit.mdx
index 5c7a5ff25a..341625a1f9 100644
--- a/src/content/docs/start/Frontend Configuration/sveltekit.mdx
+++ b/src/content/docs/start/Frontend Configuration/sveltekit.mdx
@@ -1,5 +1,5 @@
---
-title: Svelte
+title: SvelteKit
i18nReady: true
---
diff --git a/src/content/docs/start/Frontend Configuration/trunk.mdx b/src/content/docs/start/Frontend Configuration/trunk.mdx
index 944dc68d3c..a72cc7b3ed 100644
--- a/src/content/docs/start/Frontend Configuration/trunk.mdx
+++ b/src/content/docs/start/Frontend Configuration/trunk.mdx
@@ -22,8 +22,8 @@ Trunk is a WASM web application bundler for Rust. Learn more about Trunk at http
"build": {
"beforeDevCommand": "trunk serve",
"beforeBuildCommand": "trunk build",
- "devPath": "http://localhost:8080",
- "distDir": "../dist"
+ "devUrl": "http://localhost:8080",
+ "frontendDist": "../dist"
},
"app": {
"withGlobalTauri": true
diff --git a/src/content/docs/start/prerequisites.mdx b/src/content/docs/start/prerequisites.mdx
index a2a39ac463..d2cb5a81ae 100644
--- a/src/content/docs/start/prerequisites.mdx
+++ b/src/content/docs/start/prerequisites.mdx
@@ -298,23 +298,10 @@ $VERSION = Get-ChildItem -Path "$env:LocalAppData\Android\Sdk\ndk"
5. Add the Android targets with `rustup`:
-
-
-
```sh
rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android
```
-
-
-
- ```ps
- rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android
- ```
-
-
-
-
Next: [Setup for iOS](#ios) or [Create a project](/start/create-project).
### iOS