Skip to content

Commit

Permalink
docs: Update frontend configs to latest versions (#2117)
Browse files Browse the repository at this point in the history
  • Loading branch information
FabianLars authored May 10, 2024
1 parent 507739a commit 9260ca6
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 65 deletions.
26 changes: 17 additions & 9 deletions src/content/docs/start/Frontend Configuration/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.

<CardGrid>
<LinkCard title="Next.js" href="/start/frontend-configuration/nextjs" />
<LinkCard title="Nuxt" href="/start/frontend-configuration/nuxt" />
<LinkCard title="Qwik" href="/start/frontend-configuration/qwik" />
<LinkCard title="Svelte" href="/start/frontend-configuration/svelte" />
<LinkCard title="Vite" href="/start/frontend-configuration/vite" />
<LinkCard title="SvelteKit" href="/start/frontend-configuration/sveltekit" />
<LinkCard
title="Vite (recommended)"
href="/start/frontend-configuration/vite"
/>
<LinkCard title="Webpack" href="/start/frontend-configuration/webpack" />
</CardGrid>

Expand All @@ -51,3 +51,11 @@ Below is a checklist of common scenarios needed to integrate a frontend with Tau
<LinkCard title="Trunk" href="/start/frontend-configuration/trunk" />
<LinkCard title="Yew" href="/start/frontend-configuration/yew" />
</CardGrid>

<br />

:::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.

:::
68 changes: 35 additions & 33 deletions src/content/docs/start/Frontend Configuration/nextjs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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!

<CommandTabs
npm="npm install --save-dev internal-ip"
yarn="yarn add -D internal-ip"
pnpm="pnpm add -D internal-ip"
npm="npm install --save-dev internal-ip@7.0.0"
yarn="yarn add -D internal-ip@7.0.0"
pnpm="pnpm add -D internal-ip@7.0.0"
/>

2. Update Tauri configuration:
Expand All @@ -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"
}
}
```
Expand All @@ -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"
}
}
```
Expand All @@ -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"
}
}
```
Expand All @@ -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;
```
14 changes: 7 additions & 7 deletions src/content/docs/start/Frontend Configuration/nuxt.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

Expand All @@ -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"
}
}
```
Expand All @@ -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"
}
}
```
Expand All @@ -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"
}
}
```
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Svelte
title: SvelteKit
i18nReady: true
---

Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/start/Frontend Configuration/trunk.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
13 changes: 0 additions & 13 deletions src/content/docs/start/prerequisites.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -298,23 +298,10 @@ $VERSION = Get-ChildItem -Path "$env:LocalAppData\Android\Sdk\ndk"

5. Add the Android targets with `rustup`:

<Tabs>
<TabItem label="Linux and macOS" class="content">

```sh
rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android
```

</TabItem>
<TabItem label="Windows">

```ps
rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android
```

</TabItem>
</Tabs>

Next: [Setup for iOS](#ios) or [Create a project](/start/create-project).

### iOS
Expand Down

0 comments on commit 9260ca6

Please sign in to comment.