From 51b6d0e5df16136357e77e99faac8eca1665be41 Mon Sep 17 00:00:00 2001 From: Simon Hyll Date: Wed, 16 Aug 2023 18:21:26 +0200 Subject: [PATCH 01/41] feat: working on some mobile docs --- src/content/docs/2/guide/develop.mdx | 53 ++++++- src/content/docs/2/guide/framework/nextjs.mdx | 63 ++++++++ src/content/docs/2/guide/framework/nuxt.mdx | 136 ++++++++++++++++++ src/content/docs/2/guide/framework/qwik.mdx | 136 ++++++++++++++++++ src/content/docs/2/guide/framework/svelte.mdx | 136 ++++++++++++++++++ src/content/docs/2/guide/framework/trunk.mdx | 136 ++++++++++++++++++ src/content/docs/2/guide/framework/vite.mdx | 136 ++++++++++++++++++ .../docs/2/guide/framework/webpack.mdx | 136 ++++++++++++++++++ 8 files changed, 928 insertions(+), 4 deletions(-) create mode 100644 src/content/docs/2/guide/framework/nextjs.mdx create mode 100644 src/content/docs/2/guide/framework/nuxt.mdx create mode 100644 src/content/docs/2/guide/framework/qwik.mdx create mode 100644 src/content/docs/2/guide/framework/svelte.mdx create mode 100644 src/content/docs/2/guide/framework/trunk.mdx create mode 100644 src/content/docs/2/guide/framework/vite.mdx create mode 100644 src/content/docs/2/guide/framework/webpack.mdx diff --git a/src/content/docs/2/guide/develop.mdx b/src/content/docs/2/guide/develop.mdx index 2b82a7c7f6..162c5ed8bf 100644 --- a/src/content/docs/2/guide/develop.mdx +++ b/src/content/docs/2/guide/develop.mdx @@ -2,10 +2,55 @@ title: Develop --- -import Stub from '@components/Stub.astro'; +import { LinkCard, CardGrid } from '@astrojs/starlight/components'; - +## Framework Configuration -- `pnpm tauri [android|ios] dev [--open]` +Tauri is frontend agnostic, but sometimes frameworks need a bit of extra attention for them to integrate +nicely with Tauri. The frameworks listed below are by no means a list of officially supported frameworks, +if your framework isn't listed it can most likely be made to work with Tauri as well. - +### Node.js + + + + + + + + + + +### Rust + + + + diff --git a/src/content/docs/2/guide/framework/nextjs.mdx b/src/content/docs/2/guide/framework/nextjs.mdx new file mode 100644 index 0000000000..1b0c93ee55 --- /dev/null +++ b/src/content/docs/2/guide/framework/nextjs.mdx @@ -0,0 +1,63 @@ +--- +title: Next.js +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +Next.js is a meta framework for React. To set up a Next.js project as a frontend for Tauri make sure you go through the checklist below. + +## Checklist + +- Use static exports, Tauri doesn't officially support server based solutions. +- Use `internal-ip` for mobile compatibility so you can configure `assetPrefix` so that the server properly resolves your assets. +- Use `out/` as `distDir` in `tauri.conf.json`. + +## Example configuration + + + +```sh +npm install --save-dev internal-ip +``` + + +```sh +yarn add -D internal-ip +``` + + + +```sh +pnpm add -D internal-ip +``` + + + + +```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 + output: 'export', + // Helps you identify issues + reactStrictMode: true, + // Faster minification + swcMinify: true, + // 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/framework/nuxt.mdx b/src/content/docs/2/guide/framework/nuxt.mdx new file mode 100644 index 0000000000..d8cf5952ef --- /dev/null +++ b/src/content/docs/2/guide/framework/nuxt.mdx @@ -0,0 +1,136 @@ +--- +title: Nuxt +--- + +import { Tabs, TabItem, Card } from '@astrojs/starlight/components'; + +In order for your mobile device to connect to your frontend you will need +to configure it to be hosted on your internal IP. This is your IP on the network, something +along the lines of `192.168.1.123`. + +## Node.js + +For Node.js based frameworks you can use the `internal-ip` package to automatically detect +your internal IP. Note that some frameworks support this functionality out of the box, so you +might not need to add the package. + + + +```sh +npm install -D internal-ip +``` + + +```sh +yarn add -D internal-ip +``` + + + +```sh +pnpm add -D internal-ip +``` + + + + +### Vite + +For Vite, you need to change your configuration to be defined using the defineConfig helper with an async closure. Then, resolve the internal IP address and set it to the server object. + +```ts +import { defineConfig } from 'vite'; +import { internalIpV4 } from 'internal-ip'; + +// https://vitejs.dev/config/ +export default defineConfig(async () => { + const host = await internalIpV4(); + + /** @type {import('vite').UserConfig} */ + const config = { + server: { + host: '0.0.0.0', // listen on all addresses + port: 5173, + strictPort: true, + hmr: { + protocol: 'ws', + host, + port: 5183, + }, + }, + }; + + return config; +}); +``` + +### Next.js + +For Next.js, you need to configure the assetPrefix to use the internal IP so the server properly resolves your assets. + +```ts +const isProd = process.env.NODE_ENV === 'production'; +module.exports = async (phase, { defaultConfig }) => { + let internalHost = null; + if (!isProd) { + const { internalIpV4 } = await import('internal-ip'); + internalHost = await internalIpV4(); + } + /** + * @type {import('next').NextConfig} + */ + const nextConfig = { + reactStrictMode: true, + swcMinify: true, + // 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, + }, + assetPrefix: isProd ? null : `http://${internalHost}:3000`, + }; + return nextConfig; +}; +``` + +Currently, there is no configuration option to configure Next.js to use the internal IP address, only the CLI allows changing it. So you need to append --hostname $HOST to the beforeDevCommand. + +### Webpack + +Webpack has a built-in option to use the local IP address as the host for the development server. + +```ts +export default { + devServer: { + host: 'local-ipv4', + }, +}; +``` + +## Rust + +### Trunk + +The official version of Trunk unfortunately doesn't work very well for mobile development. +The good news however is that one of the core Tauri members have created a fork of Trunk +with some fixes. + + + + +```sh +cargo install --git https://github.com/amrbashir/trunk +``` + + + + +```sh +# TODO: Is there a binstall option for this? +``` + + + + + +TODO: You also need to configure Trunk but I forgot the options for it. diff --git a/src/content/docs/2/guide/framework/qwik.mdx b/src/content/docs/2/guide/framework/qwik.mdx new file mode 100644 index 0000000000..edc20d7cbd --- /dev/null +++ b/src/content/docs/2/guide/framework/qwik.mdx @@ -0,0 +1,136 @@ +--- +title: Qwik +--- + +import { Tabs, TabItem, Card } from '@astrojs/starlight/components'; + +In order for your mobile device to connect to your frontend you will need +to configure it to be hosted on your internal IP. This is your IP on the network, something +along the lines of `192.168.1.123`. + +## Node.js + +For Node.js based frameworks you can use the `internal-ip` package to automatically detect +your internal IP. Note that some frameworks support this functionality out of the box, so you +might not need to add the package. + + + +```sh +npm install -D internal-ip +``` + + +```sh +yarn add -D internal-ip +``` + + + +```sh +pnpm add -D internal-ip +``` + + + + +### Vite + +For Vite, you need to change your configuration to be defined using the defineConfig helper with an async closure. Then, resolve the internal IP address and set it to the server object. + +```ts +import { defineConfig } from 'vite'; +import { internalIpV4 } from 'internal-ip'; + +// https://vitejs.dev/config/ +export default defineConfig(async () => { + const host = await internalIpV4(); + + /** @type {import('vite').UserConfig} */ + const config = { + server: { + host: '0.0.0.0', // listen on all addresses + port: 5173, + strictPort: true, + hmr: { + protocol: 'ws', + host, + port: 5183, + }, + }, + }; + + return config; +}); +``` + +### Next.js + +For Next.js, you need to configure the assetPrefix to use the internal IP so the server properly resolves your assets. + +```ts +const isProd = process.env.NODE_ENV === 'production'; +module.exports = async (phase, { defaultConfig }) => { + let internalHost = null; + if (!isProd) { + const { internalIpV4 } = await import('internal-ip'); + internalHost = await internalIpV4(); + } + /** + * @type {import('next').NextConfig} + */ + const nextConfig = { + reactStrictMode: true, + swcMinify: true, + // 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, + }, + assetPrefix: isProd ? null : `http://${internalHost}:3000`, + }; + return nextConfig; +}; +``` + +Currently, there is no configuration option to configure Next.js to use the internal IP address, only the CLI allows changing it. So you need to append --hostname $HOST to the beforeDevCommand. + +### Webpack + +Webpack has a built-in option to use the local IP address as the host for the development server. + +```ts +export default { + devServer: { + host: 'local-ipv4', + }, +}; +``` + +## Rust + +### Trunk + +The official version of Trunk unfortunately doesn't work very well for mobile development. +The good news however is that one of the core Tauri members have created a fork of Trunk +with some fixes. + + + + +```sh +cargo install --git https://github.com/amrbashir/trunk +``` + + + + +```sh +# TODO: Is there a binstall option for this? +``` + + + + + +TODO: You also need to configure Trunk but I forgot the options for it. diff --git a/src/content/docs/2/guide/framework/svelte.mdx b/src/content/docs/2/guide/framework/svelte.mdx new file mode 100644 index 0000000000..777ea0ab70 --- /dev/null +++ b/src/content/docs/2/guide/framework/svelte.mdx @@ -0,0 +1,136 @@ +--- +title: Svelte +--- + +import { Tabs, TabItem, Card } from '@astrojs/starlight/components'; + +In order for your mobile device to connect to your frontend you will need +to configure it to be hosted on your internal IP. This is your IP on the network, something +along the lines of `192.168.1.123`. + +## Node.js + +For Node.js based frameworks you can use the `internal-ip` package to automatically detect +your internal IP. Note that some frameworks support this functionality out of the box, so you +might not need to add the package. + + + +```sh +npm install -D internal-ip +``` + + +```sh +yarn add -D internal-ip +``` + + + +```sh +pnpm add -D internal-ip +``` + + + + +### Vite + +For Vite, you need to change your configuration to be defined using the defineConfig helper with an async closure. Then, resolve the internal IP address and set it to the server object. + +```ts +import { defineConfig } from 'vite'; +import { internalIpV4 } from 'internal-ip'; + +// https://vitejs.dev/config/ +export default defineConfig(async () => { + const host = await internalIpV4(); + + /** @type {import('vite').UserConfig} */ + const config = { + server: { + host: '0.0.0.0', // listen on all addresses + port: 5173, + strictPort: true, + hmr: { + protocol: 'ws', + host, + port: 5183, + }, + }, + }; + + return config; +}); +``` + +### Next.js + +For Next.js, you need to configure the assetPrefix to use the internal IP so the server properly resolves your assets. + +```ts +const isProd = process.env.NODE_ENV === 'production'; +module.exports = async (phase, { defaultConfig }) => { + let internalHost = null; + if (!isProd) { + const { internalIpV4 } = await import('internal-ip'); + internalHost = await internalIpV4(); + } + /** + * @type {import('next').NextConfig} + */ + const nextConfig = { + reactStrictMode: true, + swcMinify: true, + // 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, + }, + assetPrefix: isProd ? null : `http://${internalHost}:3000`, + }; + return nextConfig; +}; +``` + +Currently, there is no configuration option to configure Next.js to use the internal IP address, only the CLI allows changing it. So you need to append --hostname $HOST to the beforeDevCommand. + +### Webpack + +Webpack has a built-in option to use the local IP address as the host for the development server. + +```ts +export default { + devServer: { + host: 'local-ipv4', + }, +}; +``` + +## Rust + +### Trunk + +The official version of Trunk unfortunately doesn't work very well for mobile development. +The good news however is that one of the core Tauri members have created a fork of Trunk +with some fixes. + + + + +```sh +cargo install --git https://github.com/amrbashir/trunk +``` + + + + +```sh +# TODO: Is there a binstall option for this? +``` + + + + + +TODO: You also need to configure Trunk but I forgot the options for it. diff --git a/src/content/docs/2/guide/framework/trunk.mdx b/src/content/docs/2/guide/framework/trunk.mdx new file mode 100644 index 0000000000..667ad07e0a --- /dev/null +++ b/src/content/docs/2/guide/framework/trunk.mdx @@ -0,0 +1,136 @@ +--- +title: Trunk +--- + +import { Tabs, TabItem, Card } from '@astrojs/starlight/components'; + +In order for your mobile device to connect to your frontend you will need +to configure it to be hosted on your internal IP. This is your IP on the network, something +along the lines of `192.168.1.123`. + +## Node.js + +For Node.js based frameworks you can use the `internal-ip` package to automatically detect +your internal IP. Note that some frameworks support this functionality out of the box, so you +might not need to add the package. + + + +```sh +npm install -D internal-ip +``` + + +```sh +yarn add -D internal-ip +``` + + + +```sh +pnpm add -D internal-ip +``` + + + + +### Vite + +For Vite, you need to change your configuration to be defined using the defineConfig helper with an async closure. Then, resolve the internal IP address and set it to the server object. + +```ts +import { defineConfig } from 'vite'; +import { internalIpV4 } from 'internal-ip'; + +// https://vitejs.dev/config/ +export default defineConfig(async () => { + const host = await internalIpV4(); + + /** @type {import('vite').UserConfig} */ + const config = { + server: { + host: '0.0.0.0', // listen on all addresses + port: 5173, + strictPort: true, + hmr: { + protocol: 'ws', + host, + port: 5183, + }, + }, + }; + + return config; +}); +``` + +### Next.js + +For Next.js, you need to configure the assetPrefix to use the internal IP so the server properly resolves your assets. + +```ts +const isProd = process.env.NODE_ENV === 'production'; +module.exports = async (phase, { defaultConfig }) => { + let internalHost = null; + if (!isProd) { + const { internalIpV4 } = await import('internal-ip'); + internalHost = await internalIpV4(); + } + /** + * @type {import('next').NextConfig} + */ + const nextConfig = { + reactStrictMode: true, + swcMinify: true, + // 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, + }, + assetPrefix: isProd ? null : `http://${internalHost}:3000`, + }; + return nextConfig; +}; +``` + +Currently, there is no configuration option to configure Next.js to use the internal IP address, only the CLI allows changing it. So you need to append --hostname $HOST to the beforeDevCommand. + +### Webpack + +Webpack has a built-in option to use the local IP address as the host for the development server. + +```ts +export default { + devServer: { + host: 'local-ipv4', + }, +}; +``` + +## Rust + +### Trunk + +The official version of Trunk unfortunately doesn't work very well for mobile development. +The good news however is that one of the core Tauri members have created a fork of Trunk +with some fixes. + + + + +```sh +cargo install --git https://github.com/amrbashir/trunk +``` + + + + +```sh +# TODO: Is there a binstall option for this? +``` + + + + + +TODO: You also need to configure Trunk but I forgot the options for it. diff --git a/src/content/docs/2/guide/framework/vite.mdx b/src/content/docs/2/guide/framework/vite.mdx new file mode 100644 index 0000000000..7bf302a0d3 --- /dev/null +++ b/src/content/docs/2/guide/framework/vite.mdx @@ -0,0 +1,136 @@ +--- +title: Vite +--- + +import { Tabs, TabItem, Card } from '@astrojs/starlight/components'; + +In order for your mobile device to connect to your frontend you will need +to configure it to be hosted on your internal IP. This is your IP on the network, something +along the lines of `192.168.1.123`. + +## Node.js + +For Node.js based frameworks you can use the `internal-ip` package to automatically detect +your internal IP. Note that some frameworks support this functionality out of the box, so you +might not need to add the package. + + + +```sh +npm install -D internal-ip +``` + + +```sh +yarn add -D internal-ip +``` + + + +```sh +pnpm add -D internal-ip +``` + + + + +### Vite + +For Vite, you need to change your configuration to be defined using the defineConfig helper with an async closure. Then, resolve the internal IP address and set it to the server object. + +```ts +import { defineConfig } from 'vite'; +import { internalIpV4 } from 'internal-ip'; + +// https://vitejs.dev/config/ +export default defineConfig(async () => { + const host = await internalIpV4(); + + /** @type {import('vite').UserConfig} */ + const config = { + server: { + host: '0.0.0.0', // listen on all addresses + port: 5173, + strictPort: true, + hmr: { + protocol: 'ws', + host, + port: 5183, + }, + }, + }; + + return config; +}); +``` + +### Next.js + +For Next.js, you need to configure the assetPrefix to use the internal IP so the server properly resolves your assets. + +```ts +const isProd = process.env.NODE_ENV === 'production'; +module.exports = async (phase, { defaultConfig }) => { + let internalHost = null; + if (!isProd) { + const { internalIpV4 } = await import('internal-ip'); + internalHost = await internalIpV4(); + } + /** + * @type {import('next').NextConfig} + */ + const nextConfig = { + reactStrictMode: true, + swcMinify: true, + // 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, + }, + assetPrefix: isProd ? null : `http://${internalHost}:3000`, + }; + return nextConfig; +}; +``` + +Currently, there is no configuration option to configure Next.js to use the internal IP address, only the CLI allows changing it. So you need to append --hostname $HOST to the beforeDevCommand. + +### Webpack + +Webpack has a built-in option to use the local IP address as the host for the development server. + +```ts +export default { + devServer: { + host: 'local-ipv4', + }, +}; +``` + +## Rust + +### Trunk + +The official version of Trunk unfortunately doesn't work very well for mobile development. +The good news however is that one of the core Tauri members have created a fork of Trunk +with some fixes. + + + + +```sh +cargo install --git https://github.com/amrbashir/trunk +``` + + + + +```sh +# TODO: Is there a binstall option for this? +``` + + + + + +TODO: You also need to configure Trunk but I forgot the options for it. diff --git a/src/content/docs/2/guide/framework/webpack.mdx b/src/content/docs/2/guide/framework/webpack.mdx new file mode 100644 index 0000000000..54ef3c0ae6 --- /dev/null +++ b/src/content/docs/2/guide/framework/webpack.mdx @@ -0,0 +1,136 @@ +--- +title: Webpack +--- + +import { Tabs, TabItem, Card } from '@astrojs/starlight/components'; + +In order for your mobile device to connect to your frontend you will need +to configure it to be hosted on your internal IP. This is your IP on the network, something +along the lines of `192.168.1.123`. + +## Node.js + +For Node.js based frameworks you can use the `internal-ip` package to automatically detect +your internal IP. Note that some frameworks support this functionality out of the box, so you +might not need to add the package. + + + +```sh +npm install -D internal-ip +``` + + +```sh +yarn add -D internal-ip +``` + + + +```sh +pnpm add -D internal-ip +``` + + + + +### Vite + +For Vite, you need to change your configuration to be defined using the defineConfig helper with an async closure. Then, resolve the internal IP address and set it to the server object. + +```ts +import { defineConfig } from 'vite'; +import { internalIpV4 } from 'internal-ip'; + +// https://vitejs.dev/config/ +export default defineConfig(async () => { + const host = await internalIpV4(); + + /** @type {import('vite').UserConfig} */ + const config = { + server: { + host: '0.0.0.0', // listen on all addresses + port: 5173, + strictPort: true, + hmr: { + protocol: 'ws', + host, + port: 5183, + }, + }, + }; + + return config; +}); +``` + +### Next.js + +For Next.js, you need to configure the assetPrefix to use the internal IP so the server properly resolves your assets. + +```ts +const isProd = process.env.NODE_ENV === 'production'; +module.exports = async (phase, { defaultConfig }) => { + let internalHost = null; + if (!isProd) { + const { internalIpV4 } = await import('internal-ip'); + internalHost = await internalIpV4(); + } + /** + * @type {import('next').NextConfig} + */ + const nextConfig = { + reactStrictMode: true, + swcMinify: true, + // 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, + }, + assetPrefix: isProd ? null : `http://${internalHost}:3000`, + }; + return nextConfig; +}; +``` + +Currently, there is no configuration option to configure Next.js to use the internal IP address, only the CLI allows changing it. So you need to append --hostname $HOST to the beforeDevCommand. + +### Webpack + +Webpack has a built-in option to use the local IP address as the host for the development server. + +```ts +export default { + devServer: { + host: 'local-ipv4', + }, +}; +``` + +## Rust + +### Trunk + +The official version of Trunk unfortunately doesn't work very well for mobile development. +The good news however is that one of the core Tauri members have created a fork of Trunk +with some fixes. + + + + +```sh +cargo install --git https://github.com/amrbashir/trunk +``` + + + + +```sh +# TODO: Is there a binstall option for this? +``` + + + + + +TODO: You also need to configure Trunk but I forgot the options for it. From b5271a66d28c43b95208b45a1777fa063b934540 Mon Sep 17 00:00:00 2001 From: Simon Hyll Date: Mon, 21 Aug 2023 18:13:55 +0200 Subject: [PATCH 02/41] docs: committing current state --- src/content/docs/2/guide/develop.mdx | 17 +- src/content/docs/2/guide/framework/leptos.mdx | 60 ++++++ src/content/docs/2/guide/framework/nextjs.mdx | 43 +++- src/content/docs/2/guide/framework/nuxt.mdx | 191 ++++++++---------- src/content/docs/2/guide/framework/qwik.mdx | 103 ++-------- src/content/docs/2/guide/framework/svelte.mdx | 103 ++-------- .../docs/2/guide/framework/sycamore.mdx | 60 ++++++ src/content/docs/2/guide/framework/trunk.mdx | 146 ++++--------- src/content/docs/2/guide/framework/vite.mdx | 103 ++-------- .../docs/2/guide/framework/webpack.mdx | 103 ++-------- src/content/docs/2/guide/framework/yew.mdx | 60 ++++++ 11 files changed, 412 insertions(+), 577 deletions(-) create mode 100644 src/content/docs/2/guide/framework/leptos.mdx create mode 100644 src/content/docs/2/guide/framework/sycamore.mdx create mode 100644 src/content/docs/2/guide/framework/yew.mdx diff --git a/src/content/docs/2/guide/develop.mdx b/src/content/docs/2/guide/develop.mdx index 162c5ed8bf..d889329ba5 100644 --- a/src/content/docs/2/guide/develop.mdx +++ b/src/content/docs/2/guide/develop.mdx @@ -10,7 +10,7 @@ Tauri is frontend agnostic, but sometimes frameworks need a bit of extra attenti nicely with Tauri. The frameworks listed below are by no means a list of officially supported frameworks, if your framework isn't listed it can most likely be made to work with Tauri as well. -### Node.js +### Javascript + + + diff --git a/src/content/docs/2/guide/framework/leptos.mdx b/src/content/docs/2/guide/framework/leptos.mdx new file mode 100644 index 0000000000..58a830cd72 --- /dev/null +++ b/src/content/docs/2/guide/framework/leptos.mdx @@ -0,0 +1,60 @@ +--- +title: Leptos +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +Leptos is a Rust based frontend framework. + +## Checklist + +- Use SSG, Tauri doesn't officially support server based solutions. +- Use `0.0.0.0` so that your device can detect your frontend. +- Use the fork of Trunk made by one of the Tauri core member which contains a couple of fixes to it. Hopefully we can get these merged upstream eventually. + +## Example configuration + + + + +```sh +cargo install --git https://github.com/amrbashir/trunk +``` + + + + +```sh +cargo binstall --git https://github.com/amrbashir/trunk +``` + + + + +```json +// tauri.conf.json +{ + "build": { + "beforeDevCommand": "trunk serve", + "beforeBuildCommand": "trunk build", + "devPath": "http://localhost:1420", + "distDir": "../dist", + "withGlobalTauri": true + } +} +``` + +```toml +# Trunk.toml +[build] +target = "./index.html" + +[watch] +ignore = ["./src-tauri"] + +[serve] +address = "0.0.0.0" +port = 1420 +open = false +ws_protocol = "ws" +``` diff --git a/src/content/docs/2/guide/framework/nextjs.mdx b/src/content/docs/2/guide/framework/nextjs.mdx index 1b0c93ee55..391cede7f4 100644 --- a/src/content/docs/2/guide/framework/nextjs.mdx +++ b/src/content/docs/2/guide/framework/nextjs.mdx @@ -8,7 +8,7 @@ Next.js is a meta framework for React. To set up a Next.js project as a frontend ## Checklist -- Use static exports, Tauri doesn't officially support server based solutions. +- Use static exports by setting `output: 'export'`, Tauri doesn't officially support server based solutions. - Use `internal-ip` for mobile compatibility so you can configure `assetPrefix` so that the server properly resolves your assets. - Use `out/` as `distDir` in `tauri.conf.json`. @@ -16,14 +16,42 @@ Next.js is a meta framework for React. To set up a Next.js project as a frontend + ```sh npm install --save-dev internal-ip ``` + +```json +// tauri.conf.json +{ + "build": { + "beforeDevCommand": "npm run dev", + "beforeBuildCommand": "npm run build", + "devPath": "http://localhost:3000", + "distDir": "../dist" + } +} +``` + + ```sh yarn add -D internal-ip ``` + +```json +// tauri.conf.json +{ + "build": { + "beforeDevCommand": "yarn dev", + "beforeBuildCommand": "yarn generate", + "devPath": "http://localhost:3000", + "distDir": "../dist" + } +} +``` + @@ -31,10 +59,23 @@ yarn add -D internal-ip pnpm add -D internal-ip ``` +```json +// tauri.conf.json +{ + "build": { + "beforeDevCommand": "pnpm dev", + "beforeBuildCommand": "pnpm generate", + "devPath": "http://localhost:3000", + "distDir": "../dist" + } +} +``` + ```ts +// next.conf.ts const isProd = process.env.NODE_ENV === 'production'; module.exports = async (phase, { defaultConfig }) => { let internalHost = null; diff --git a/src/content/docs/2/guide/framework/nuxt.mdx b/src/content/docs/2/guide/framework/nuxt.mdx index d8cf5952ef..c2465bb9f4 100644 --- a/src/content/docs/2/guide/framework/nuxt.mdx +++ b/src/content/docs/2/guide/framework/nuxt.mdx @@ -2,135 +2,102 @@ title: Nuxt --- -import { Tabs, TabItem, Card } from '@astrojs/starlight/components'; +import { Tabs, TabItem } from '@astrojs/starlight/components'; -In order for your mobile device to connect to your frontend you will need -to configure it to be hosted on your internal IP. This is your IP on the network, something -along the lines of `192.168.1.123`. +Nuxt is a meta framework for Vue. To set up a Nuxt project as a frontend for Tauri make sure you go through the checklist below. -## Node.js +## Checklist -For Node.js based frameworks you can use the `internal-ip` package to automatically detect -your internal IP. Note that some frameworks support this functionality out of the box, so you -might not need to add the package. +- Use SSG by setting `ssr: false`, Tauri doesn't officially support server based solutions. +- Set host to `0.0.0.0`. +- Use `dist/` as `distDir` in `tauri.conf.json`. +- Compile using `nuxi generate` + +## Example configuration - -```sh -npm install -D internal-ip + + +```json +// tauri.conf.json +{ + "build": { + "beforeDevCommand": "npm run dev", + "beforeBuildCommand": "npm run generate", + "devPath": "http://localhost:3000", + "distDir": "../dist" + } +} ``` - - -```sh -yarn add -D internal-ip + + + + +```json +// tauri.conf.json +{ + "build": { + "beforeDevCommand": "yarn dev", + "beforeBuildCommand": "yarn generate", + "devPath": "http://localhost:3000", + "distDir": "../dist" + } +} ``` - - - -```sh -pnpm add -D internal-ip + + + + +```json +// tauri.conf.json +{ + "build": { + "beforeDevCommand": "pnpm dev", + "beforeBuildCommand": "pnpm generate", + "devPath": "http://localhost:3000", + "distDir": "../dist" + } +} ``` - - + + -### Vite - -For Vite, you need to change your configuration to be defined using the defineConfig helper with an async closure. Then, resolve the internal IP address and set it to the server object. - ```ts -import { defineConfig } from 'vite'; -import { internalIpV4 } from 'internal-ip'; - -// https://vitejs.dev/config/ -export default defineConfig(async () => { - const host = await internalIpV4(); - - /** @type {import('vite').UserConfig} */ - const config = { +export default defineNuxtConfig({ + // (optional) Enable the Nuxt devtools + devtools: { enabled: true }, + // Enable SSG + ssr: false, + // (optional) Disable telemetry + telemetry: false, + vite: { + // Better support for Tauri CLI output + clearScreen: false, + // Enable envbironment variables + envPrefix: ['VITE_', 'TAURI_'], + build: { + // (optional) Support modern browsers + target: 'es2022', + // (optional) Don't minify for debug builds + minify: !process.env.TAURI_DEBUG ? 'esbuild' : false, + // (optional) Produce sourcemaps for debug builds + sourcemap: !!process.env.TAURI_DEBUG, + }, server: { - host: '0.0.0.0', // listen on all addresses - port: 5173, + // Tauri expects a specific port, panic if it can't be bound strictPort: true, + // Make sure your mobile device can find you + host: '0.0.0.0', hmr: { + // Use websocket for mobile hot reloading protocol: 'ws', - host, + // Make sure it's available on the network + host: '0.0.0.0', + // Use a specific port for hmr port: 5183, }, }, - }; - - return config; -}); -``` - -### Next.js - -For Next.js, you need to configure the assetPrefix to use the internal IP so the server properly resolves your assets. - -```ts -const isProd = process.env.NODE_ENV === 'production'; -module.exports = async (phase, { defaultConfig }) => { - let internalHost = null; - if (!isProd) { - const { internalIpV4 } = await import('internal-ip'); - internalHost = await internalIpV4(); - } - /** - * @type {import('next').NextConfig} - */ - const nextConfig = { - reactStrictMode: true, - swcMinify: true, - // 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, - }, - assetPrefix: isProd ? null : `http://${internalHost}:3000`, - }; - return nextConfig; -}; -``` - -Currently, there is no configuration option to configure Next.js to use the internal IP address, only the CLI allows changing it. So you need to append --hostname $HOST to the beforeDevCommand. - -### Webpack - -Webpack has a built-in option to use the local IP address as the host for the development server. - -```ts -export default { - devServer: { - host: 'local-ipv4', }, -}; -``` - -## Rust - -### Trunk - -The official version of Trunk unfortunately doesn't work very well for mobile development. -The good news however is that one of the core Tauri members have created a fork of Trunk -with some fixes. - - - - -```sh -cargo install --git https://github.com/amrbashir/trunk -``` - - - - -```sh -# TODO: Is there a binstall option for this? +}); ``` - - - - - -TODO: You also need to configure Trunk but I forgot the options for it. diff --git a/src/content/docs/2/guide/framework/qwik.mdx b/src/content/docs/2/guide/framework/qwik.mdx index edc20d7cbd..fb229e7fbe 100644 --- a/src/content/docs/2/guide/framework/qwik.mdx +++ b/src/content/docs/2/guide/framework/qwik.mdx @@ -2,22 +2,22 @@ title: Qwik --- -import { Tabs, TabItem, Card } from '@astrojs/starlight/components'; +import { Tabs, TabItem } from '@astrojs/starlight/components'; -In order for your mobile device to connect to your frontend you will need -to configure it to be hosted on your internal IP. This is your IP on the network, something -along the lines of `192.168.1.123`. +Next.js is a meta framework for React. To set up a Next.js project as a frontend for Tauri make sure you go through the checklist below. -## Node.js +## Checklist -For Node.js based frameworks you can use the `internal-ip` package to automatically detect -your internal IP. Note that some frameworks support this functionality out of the box, so you -might not need to add the package. +- Use static exports, Tauri doesn't officially support server based solutions. +- Use `internal-ip` for mobile compatibility so you can configure `assetPrefix` so that the server properly resolves your assets. +- Use `out/` as `distDir` in `tauri.conf.json`. + +## Example configuration ```sh -npm install -D internal-ip +npm install --save-dev internal-ip ``` @@ -34,103 +34,30 @@ pnpm add -D internal-ip -### Vite - -For Vite, you need to change your configuration to be defined using the defineConfig helper with an async closure. Then, resolve the internal IP address and set it to the server object. - -```ts -import { defineConfig } from 'vite'; -import { internalIpV4 } from 'internal-ip'; - -// https://vitejs.dev/config/ -export default defineConfig(async () => { - const host = await internalIpV4(); - - /** @type {import('vite').UserConfig} */ - const config = { - server: { - host: '0.0.0.0', // listen on all addresses - port: 5173, - strictPort: true, - hmr: { - protocol: 'ws', - host, - port: 5183, - }, - }, - }; - - return config; -}); -``` - -### Next.js - -For Next.js, you need to configure the assetPrefix to use the internal IP so the server properly resolves your assets. - ```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(); } - /** - * @type {import('next').NextConfig} - */ const nextConfig = { + // Ensure Next.js uses SSG instead of SSR + output: 'export', + // Helps you identify issues reactStrictMode: true, + // Faster minification swcMinify: true, // 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; }; ``` - -Currently, there is no configuration option to configure Next.js to use the internal IP address, only the CLI allows changing it. So you need to append --hostname $HOST to the beforeDevCommand. - -### Webpack - -Webpack has a built-in option to use the local IP address as the host for the development server. - -```ts -export default { - devServer: { - host: 'local-ipv4', - }, -}; -``` - -## Rust - -### Trunk - -The official version of Trunk unfortunately doesn't work very well for mobile development. -The good news however is that one of the core Tauri members have created a fork of Trunk -with some fixes. - - - - -```sh -cargo install --git https://github.com/amrbashir/trunk -``` - - - - -```sh -# TODO: Is there a binstall option for this? -``` - - - - - -TODO: You also need to configure Trunk but I forgot the options for it. diff --git a/src/content/docs/2/guide/framework/svelte.mdx b/src/content/docs/2/guide/framework/svelte.mdx index 777ea0ab70..bd8e327968 100644 --- a/src/content/docs/2/guide/framework/svelte.mdx +++ b/src/content/docs/2/guide/framework/svelte.mdx @@ -2,22 +2,22 @@ title: Svelte --- -import { Tabs, TabItem, Card } from '@astrojs/starlight/components'; +import { Tabs, TabItem } from '@astrojs/starlight/components'; -In order for your mobile device to connect to your frontend you will need -to configure it to be hosted on your internal IP. This is your IP on the network, something -along the lines of `192.168.1.123`. +Next.js is a meta framework for React. To set up a Next.js project as a frontend for Tauri make sure you go through the checklist below. -## Node.js +## Checklist -For Node.js based frameworks you can use the `internal-ip` package to automatically detect -your internal IP. Note that some frameworks support this functionality out of the box, so you -might not need to add the package. +- Use static exports, Tauri doesn't officially support server based solutions. +- Use `internal-ip` for mobile compatibility so you can configure `assetPrefix` so that the server properly resolves your assets. +- Use `out/` as `distDir` in `tauri.conf.json`. + +## Example configuration ```sh -npm install -D internal-ip +npm install --save-dev internal-ip ``` @@ -34,103 +34,30 @@ pnpm add -D internal-ip -### Vite - -For Vite, you need to change your configuration to be defined using the defineConfig helper with an async closure. Then, resolve the internal IP address and set it to the server object. - -```ts -import { defineConfig } from 'vite'; -import { internalIpV4 } from 'internal-ip'; - -// https://vitejs.dev/config/ -export default defineConfig(async () => { - const host = await internalIpV4(); - - /** @type {import('vite').UserConfig} */ - const config = { - server: { - host: '0.0.0.0', // listen on all addresses - port: 5173, - strictPort: true, - hmr: { - protocol: 'ws', - host, - port: 5183, - }, - }, - }; - - return config; -}); -``` - -### Next.js - -For Next.js, you need to configure the assetPrefix to use the internal IP so the server properly resolves your assets. - ```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(); } - /** - * @type {import('next').NextConfig} - */ const nextConfig = { + // Ensure Next.js uses SSG instead of SSR + output: 'export', + // Helps you identify issues reactStrictMode: true, + // Faster minification swcMinify: true, // 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; }; ``` - -Currently, there is no configuration option to configure Next.js to use the internal IP address, only the CLI allows changing it. So you need to append --hostname $HOST to the beforeDevCommand. - -### Webpack - -Webpack has a built-in option to use the local IP address as the host for the development server. - -```ts -export default { - devServer: { - host: 'local-ipv4', - }, -}; -``` - -## Rust - -### Trunk - -The official version of Trunk unfortunately doesn't work very well for mobile development. -The good news however is that one of the core Tauri members have created a fork of Trunk -with some fixes. - - - - -```sh -cargo install --git https://github.com/amrbashir/trunk -``` - - - - -```sh -# TODO: Is there a binstall option for this? -``` - - - - - -TODO: You also need to configure Trunk but I forgot the options for it. diff --git a/src/content/docs/2/guide/framework/sycamore.mdx b/src/content/docs/2/guide/framework/sycamore.mdx new file mode 100644 index 0000000000..192363a629 --- /dev/null +++ b/src/content/docs/2/guide/framework/sycamore.mdx @@ -0,0 +1,60 @@ +--- +title: Sycamore +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +Sycamore is a Rust based frontend framework. + +## Checklist + +- Use SSG, Tauri doesn't officially support server based solutions. +- Use `0.0.0.0` so that your device can detect your frontend. +- Use the fork of Trunk made by one of the Tauri core member which contains a couple of fixes to it. Hopefully we can get these merged upstream eventually. + +## Example configuration + + + + +```sh +cargo install --git https://github.com/amrbashir/trunk +``` + + + + +```sh +cargo binstall --git https://github.com/amrbashir/trunk +``` + + + + +```json +// tauri.conf.json +{ + "build": { + "beforeDevCommand": "trunk serve", + "beforeBuildCommand": "trunk build", + "devPath": "http://localhost:1420", + "distDir": "../dist", + "withGlobalTauri": true + } +} +``` + +```toml +# Trunk.toml +[build] +target = "./index.html" + +[watch] +ignore = ["./src-tauri"] + +[serve] +address = "0.0.0.0" +port = 1420 +open = false +ws_protocol = "ws" +``` diff --git a/src/content/docs/2/guide/framework/trunk.mdx b/src/content/docs/2/guide/framework/trunk.mdx index 667ad07e0a..85222aa7fc 100644 --- a/src/content/docs/2/guide/framework/trunk.mdx +++ b/src/content/docs/2/guide/framework/trunk.mdx @@ -2,135 +2,59 @@ title: Trunk --- -import { Tabs, TabItem, Card } from '@astrojs/starlight/components'; +import { Tabs, TabItem } from '@astrojs/starlight/components'; -In order for your mobile device to connect to your frontend you will need -to configure it to be hosted on your internal IP. This is your IP on the network, something -along the lines of `192.168.1.123`. +Trunk is a tool for compiling and running Rust based frontends. Make sure you go through the checklist below to set Trunk up for your project. -## Node.js +## Checklist -For Node.js based frameworks you can use the `internal-ip` package to automatically detect -your internal IP. Note that some frameworks support this functionality out of the box, so you -might not need to add the package. +- Use SSG, Tauri doesn't officially support server based solutions. +- Use `0.0.0.0` so that your device can detect your frontend. +- Use the fork of Trunk made by one of the Tauri core member which contains a couple of fixes to it. Hopefully we can get these merged upstream eventually. + +## Example configuration - -```sh -npm install -D internal-ip -``` - - + + ```sh -yarn add -D internal-ip +cargo install --git https://github.com/amrbashir/trunk ``` + - + ```sh -pnpm add -D internal-ip +cargo binstall --git https://github.com/amrbashir/trunk ``` -### Vite - -For Vite, you need to change your configuration to be defined using the defineConfig helper with an async closure. Then, resolve the internal IP address and set it to the server object. - -```ts -import { defineConfig } from 'vite'; -import { internalIpV4 } from 'internal-ip'; - -// https://vitejs.dev/config/ -export default defineConfig(async () => { - const host = await internalIpV4(); - - /** @type {import('vite').UserConfig} */ - const config = { - server: { - host: '0.0.0.0', // listen on all addresses - port: 5173, - strictPort: true, - hmr: { - protocol: 'ws', - host, - port: 5183, - }, - }, - }; - - return config; -}); -``` - -### Next.js - -For Next.js, you need to configure the assetPrefix to use the internal IP so the server properly resolves your assets. - -```ts -const isProd = process.env.NODE_ENV === 'production'; -module.exports = async (phase, { defaultConfig }) => { - let internalHost = null; - if (!isProd) { - const { internalIpV4 } = await import('internal-ip'); - internalHost = await internalIpV4(); +```json +// tauri.conf.json +{ + "build": { + "beforeDevCommand": "trunk serve", + "beforeBuildCommand": "trunk build", + "devPath": "http://localhost:1420", + "distDir": "../dist", + "withGlobalTauri": true } - /** - * @type {import('next').NextConfig} - */ - const nextConfig = { - reactStrictMode: true, - swcMinify: true, - // 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, - }, - assetPrefix: isProd ? null : `http://${internalHost}:3000`, - }; - return nextConfig; -}; -``` - -Currently, there is no configuration option to configure Next.js to use the internal IP address, only the CLI allows changing it. So you need to append --hostname $HOST to the beforeDevCommand. - -### Webpack - -Webpack has a built-in option to use the local IP address as the host for the development server. - -```ts -export default { - devServer: { - host: 'local-ipv4', - }, -}; +} ``` -## Rust - -### Trunk +```toml +# Trunk.toml +[build] +target = "./index.html" -The official version of Trunk unfortunately doesn't work very well for mobile development. -The good news however is that one of the core Tauri members have created a fork of Trunk -with some fixes. +[watch] +ignore = ["./src-tauri"] - - - -```sh -cargo install --git https://github.com/amrbashir/trunk +[serve] +address = "0.0.0.0" +port = 1420 +open = false +ws_protocol = "ws" ``` - - - - -```sh -# TODO: Is there a binstall option for this? -``` - - - - - -TODO: You also need to configure Trunk but I forgot the options for it. diff --git a/src/content/docs/2/guide/framework/vite.mdx b/src/content/docs/2/guide/framework/vite.mdx index 7bf302a0d3..9daf569524 100644 --- a/src/content/docs/2/guide/framework/vite.mdx +++ b/src/content/docs/2/guide/framework/vite.mdx @@ -2,22 +2,22 @@ title: Vite --- -import { Tabs, TabItem, Card } from '@astrojs/starlight/components'; +import { Tabs, TabItem } from '@astrojs/starlight/components'; -In order for your mobile device to connect to your frontend you will need -to configure it to be hosted on your internal IP. This is your IP on the network, something -along the lines of `192.168.1.123`. +Next.js is a meta framework for React. To set up a Next.js project as a frontend for Tauri make sure you go through the checklist below. -## Node.js +## Checklist -For Node.js based frameworks you can use the `internal-ip` package to automatically detect -your internal IP. Note that some frameworks support this functionality out of the box, so you -might not need to add the package. +- Use static exports, Tauri doesn't officially support server based solutions. +- Use `internal-ip` for mobile compatibility so you can configure `assetPrefix` so that the server properly resolves your assets. +- Use `out/` as `distDir` in `tauri.conf.json`. + +## Example configuration ```sh -npm install -D internal-ip +npm install --save-dev internal-ip ``` @@ -34,103 +34,30 @@ pnpm add -D internal-ip -### Vite - -For Vite, you need to change your configuration to be defined using the defineConfig helper with an async closure. Then, resolve the internal IP address and set it to the server object. - -```ts -import { defineConfig } from 'vite'; -import { internalIpV4 } from 'internal-ip'; - -// https://vitejs.dev/config/ -export default defineConfig(async () => { - const host = await internalIpV4(); - - /** @type {import('vite').UserConfig} */ - const config = { - server: { - host: '0.0.0.0', // listen on all addresses - port: 5173, - strictPort: true, - hmr: { - protocol: 'ws', - host, - port: 5183, - }, - }, - }; - - return config; -}); -``` - -### Next.js - -For Next.js, you need to configure the assetPrefix to use the internal IP so the server properly resolves your assets. - ```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(); } - /** - * @type {import('next').NextConfig} - */ const nextConfig = { + // Ensure Next.js uses SSG instead of SSR + output: 'export', + // Helps you identify issues reactStrictMode: true, + // Faster minification swcMinify: true, // 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; }; ``` - -Currently, there is no configuration option to configure Next.js to use the internal IP address, only the CLI allows changing it. So you need to append --hostname $HOST to the beforeDevCommand. - -### Webpack - -Webpack has a built-in option to use the local IP address as the host for the development server. - -```ts -export default { - devServer: { - host: 'local-ipv4', - }, -}; -``` - -## Rust - -### Trunk - -The official version of Trunk unfortunately doesn't work very well for mobile development. -The good news however is that one of the core Tauri members have created a fork of Trunk -with some fixes. - - - - -```sh -cargo install --git https://github.com/amrbashir/trunk -``` - - - - -```sh -# TODO: Is there a binstall option for this? -``` - - - - - -TODO: You also need to configure Trunk but I forgot the options for it. diff --git a/src/content/docs/2/guide/framework/webpack.mdx b/src/content/docs/2/guide/framework/webpack.mdx index 54ef3c0ae6..7a7643e553 100644 --- a/src/content/docs/2/guide/framework/webpack.mdx +++ b/src/content/docs/2/guide/framework/webpack.mdx @@ -2,22 +2,22 @@ title: Webpack --- -import { Tabs, TabItem, Card } from '@astrojs/starlight/components'; +import { Tabs, TabItem } from '@astrojs/starlight/components'; -In order for your mobile device to connect to your frontend you will need -to configure it to be hosted on your internal IP. This is your IP on the network, something -along the lines of `192.168.1.123`. +Next.js is a meta framework for React. To set up a Next.js project as a frontend for Tauri make sure you go through the checklist below. -## Node.js +## Checklist -For Node.js based frameworks you can use the `internal-ip` package to automatically detect -your internal IP. Note that some frameworks support this functionality out of the box, so you -might not need to add the package. +- Use static exports, Tauri doesn't officially support server based solutions. +- Use `internal-ip` for mobile compatibility so you can configure `assetPrefix` so that the server properly resolves your assets. +- Use `out/` as `distDir` in `tauri.conf.json`. + +## Example configuration ```sh -npm install -D internal-ip +npm install --save-dev internal-ip ``` @@ -34,103 +34,30 @@ pnpm add -D internal-ip -### Vite - -For Vite, you need to change your configuration to be defined using the defineConfig helper with an async closure. Then, resolve the internal IP address and set it to the server object. - -```ts -import { defineConfig } from 'vite'; -import { internalIpV4 } from 'internal-ip'; - -// https://vitejs.dev/config/ -export default defineConfig(async () => { - const host = await internalIpV4(); - - /** @type {import('vite').UserConfig} */ - const config = { - server: { - host: '0.0.0.0', // listen on all addresses - port: 5173, - strictPort: true, - hmr: { - protocol: 'ws', - host, - port: 5183, - }, - }, - }; - - return config; -}); -``` - -### Next.js - -For Next.js, you need to configure the assetPrefix to use the internal IP so the server properly resolves your assets. - ```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(); } - /** - * @type {import('next').NextConfig} - */ const nextConfig = { + // Ensure Next.js uses SSG instead of SSR + output: 'export', + // Helps you identify issues reactStrictMode: true, + // Faster minification swcMinify: true, // 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; }; ``` - -Currently, there is no configuration option to configure Next.js to use the internal IP address, only the CLI allows changing it. So you need to append --hostname $HOST to the beforeDevCommand. - -### Webpack - -Webpack has a built-in option to use the local IP address as the host for the development server. - -```ts -export default { - devServer: { - host: 'local-ipv4', - }, -}; -``` - -## Rust - -### Trunk - -The official version of Trunk unfortunately doesn't work very well for mobile development. -The good news however is that one of the core Tauri members have created a fork of Trunk -with some fixes. - - - - -```sh -cargo install --git https://github.com/amrbashir/trunk -``` - - - - -```sh -# TODO: Is there a binstall option for this? -``` - - - - - -TODO: You also need to configure Trunk but I forgot the options for it. diff --git a/src/content/docs/2/guide/framework/yew.mdx b/src/content/docs/2/guide/framework/yew.mdx new file mode 100644 index 0000000000..958aa62df3 --- /dev/null +++ b/src/content/docs/2/guide/framework/yew.mdx @@ -0,0 +1,60 @@ +--- +title: Yew +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +Yew is a Rust based frontend framework. + +## Checklist + +- Use SSG, Tauri doesn't officially support server based solutions. +- Use `0.0.0.0` so that your device can detect your frontend. +- Use the fork of Trunk made by one of the Tauri core member which contains a couple of fixes to it. Hopefully we can get these merged upstream eventually. + +## Example configuration + + + + +```sh +cargo install --git https://github.com/amrbashir/trunk +``` + + + + +```sh +cargo binstall --git https://github.com/amrbashir/trunk +``` + + + + +```json +// tauri.conf.json +{ + "build": { + "beforeDevCommand": "trunk serve", + "beforeBuildCommand": "trunk build", + "devPath": "http://localhost:1420", + "distDir": "../dist", + "withGlobalTauri": true + } +} +``` + +```toml +# Trunk.toml +[build] +target = "./index.html" + +[watch] +ignore = ["./src-tauri"] + +[serve] +address = "0.0.0.0" +port = 1420 +open = false +ws_protocol = "ws" +``` From be87d73d5dd93277491af8f495c1e9c159a41716 Mon Sep 17 00:00:00 2001 From: Simon Hyll Date: Tue, 22 Aug 2023 00:52:54 +0200 Subject: [PATCH 03/41] working on it --- src/content/docs/2/guide/develop.mdx | 65 +++++-------------- .../2/guide/framework/frontend-agnostic.mdx | 21 ++++++ .../framework/{svelte.mdx => sveltekit.mdx} | 2 +- 3 files changed, 37 insertions(+), 51 deletions(-) create mode 100644 src/content/docs/2/guide/framework/frontend-agnostic.mdx rename src/content/docs/2/guide/framework/{svelte.mdx => sveltekit.mdx} (98%) diff --git a/src/content/docs/2/guide/develop.mdx b/src/content/docs/2/guide/develop.mdx index d889329ba5..cbae8ad91d 100644 --- a/src/content/docs/2/guide/develop.mdx +++ b/src/content/docs/2/guide/develop.mdx @@ -10,62 +10,27 @@ Tauri is frontend agnostic, but sometimes frameworks need a bit of extra attenti nicely with Tauri. The frameworks listed below are by no means a list of officially supported frameworks, if your framework isn't listed it can most likely be made to work with Tauri as well. + + ### Javascript - - - - - - + + + + + + ### Rust - - - - + + + + diff --git a/src/content/docs/2/guide/framework/frontend-agnostic.mdx b/src/content/docs/2/guide/framework/frontend-agnostic.mdx new file mode 100644 index 0000000000..b054573f45 --- /dev/null +++ b/src/content/docs/2/guide/framework/frontend-agnostic.mdx @@ -0,0 +1,21 @@ +--- +title: Frontend agnostic +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +Tauri has no opinion on what frontend framework you pick or what languages you use. However, that doesn't mean that +Tauri doesn't have any demands on it. + +Within web development the concept of frontend agnosticism is more commonly referred to as static web hosting. That is, +you compile your website once and can then put it into any http framework capable of serving a folder. Examples of this +is for example Apache and Nginx. + +For all intents and purposes you can think of Tauri as a static web host, and you have 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. + +## Checklist + +- Use static site generation (SSG). Tauri doesn't officially support any server based alternatives (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. So no hybrid solutions with SSR. diff --git a/src/content/docs/2/guide/framework/svelte.mdx b/src/content/docs/2/guide/framework/sveltekit.mdx similarity index 98% rename from src/content/docs/2/guide/framework/svelte.mdx rename to src/content/docs/2/guide/framework/sveltekit.mdx index bd8e327968..c6468b23da 100644 --- a/src/content/docs/2/guide/framework/svelte.mdx +++ b/src/content/docs/2/guide/framework/sveltekit.mdx @@ -1,5 +1,5 @@ --- -title: Svelte +title: SvelteKit --- import { Tabs, TabItem } from '@astrojs/starlight/components'; From e523dc0d2bb3644051fa3d65c13c5c4db6df3f1d Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 12:39:34 +0100 Subject: [PATCH 04/41] Move to create section Signed-off-by: Lorenzo Lewis --- .../create/frontend-configuration/index.mdx | 35 +++++++++++++++++++ src/content/docs/2/guide/develop.mdx | 33 ----------------- 2 files changed, 35 insertions(+), 33 deletions(-) create mode 100644 src/content/docs/2/guide/create/frontend-configuration/index.mdx diff --git a/src/content/docs/2/guide/create/frontend-configuration/index.mdx b/src/content/docs/2/guide/create/frontend-configuration/index.mdx new file mode 100644 index 0000000000..7516d06c69 --- /dev/null +++ b/src/content/docs/2/guide/create/frontend-configuration/index.mdx @@ -0,0 +1,35 @@ +--- +title: Frontend Configuration +--- + +import { LinkCard, CardGrid } from '@astrojs/starlight/components'; + +Tauri is frontend agnostic and supports most frontend frameworks out of the box. But sometimes frameworks 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 could either 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 is welcome to help others in the Tauri community integrate with that framework. + +:::tip[Framework Not Listed?] + +Don't see a framework listed? It may work with Tauri without any additional configuration required. Read the [frontend configuration guide](/2/guide/create/frontend-configuration) for any common configurations to look out for. + +::: + +## JavaScript + + + + + + + + + + +## Rust + + + + + + + diff --git a/src/content/docs/2/guide/develop.mdx b/src/content/docs/2/guide/develop.mdx index cbae8ad91d..a37a0a5da4 100644 --- a/src/content/docs/2/guide/develop.mdx +++ b/src/content/docs/2/guide/develop.mdx @@ -1,36 +1,3 @@ --- title: Develop --- - -import { LinkCard, CardGrid } from '@astrojs/starlight/components'; - -## Framework Configuration - -Tauri is frontend agnostic, but sometimes frameworks need a bit of extra attention for them to integrate -nicely with Tauri. The frameworks listed below are by no means a list of officially supported frameworks, -if your framework isn't listed it can most likely be made to work with Tauri as well. - - - -### Javascript - - - - - - - - - - -### Rust - - - - - - - From 14859f8bb6f0662af8c0f273af9c92673b2cbf41 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 12:39:46 +0100 Subject: [PATCH 05/41] Switch to commandtabs component, update copy Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/create/index.mdx | 58 +++++++---------------- 1 file changed, 16 insertions(+), 42 deletions(-) diff --git a/src/content/docs/2/guide/create/index.mdx b/src/content/docs/2/guide/create/index.mdx index 34d8979ace..c8728fa7ab 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 a Frontend Framework](/2/guide/create/frontend-configuration) - [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. From 4255415abe388baf5d6587ff840d050ec61194a4 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 12:47:16 +0100 Subject: [PATCH 06/41] shift some files around Signed-off-by: Lorenzo Lewis --- .../create/frontend-configuration/index.mdx | 35 -------------- .../docs/2/guide/create/frontend/index.mdx | 48 +++++++++++++++++++ .../{framework => create/frontend}/leptos.mdx | 0 .../{framework => create/frontend}/nextjs.mdx | 0 .../{framework => create/frontend}/nuxt.mdx | 0 .../{framework => create/frontend}/qwik.mdx | 0 .../frontend}/sveltekit.mdx | 0 .../frontend}/sycamore.mdx | 0 .../{framework => create/frontend}/trunk.mdx | 0 .../{framework => create/frontend}/vite.mdx | 0 .../frontend}/webpack.mdx | 0 .../{framework => create/frontend}/yew.mdx | 0 src/content/docs/2/guide/create/index.mdx | 2 +- .../2/guide/framework/frontend-agnostic.mdx | 21 -------- 14 files changed, 49 insertions(+), 57 deletions(-) delete mode 100644 src/content/docs/2/guide/create/frontend-configuration/index.mdx create mode 100644 src/content/docs/2/guide/create/frontend/index.mdx rename src/content/docs/2/guide/{framework => create/frontend}/leptos.mdx (100%) rename src/content/docs/2/guide/{framework => create/frontend}/nextjs.mdx (100%) rename src/content/docs/2/guide/{framework => create/frontend}/nuxt.mdx (100%) rename src/content/docs/2/guide/{framework => create/frontend}/qwik.mdx (100%) rename src/content/docs/2/guide/{framework => create/frontend}/sveltekit.mdx (100%) rename src/content/docs/2/guide/{framework => create/frontend}/sycamore.mdx (100%) rename src/content/docs/2/guide/{framework => create/frontend}/trunk.mdx (100%) rename src/content/docs/2/guide/{framework => create/frontend}/vite.mdx (100%) rename src/content/docs/2/guide/{framework => create/frontend}/webpack.mdx (100%) rename src/content/docs/2/guide/{framework => create/frontend}/yew.mdx (100%) delete mode 100644 src/content/docs/2/guide/framework/frontend-agnostic.mdx diff --git a/src/content/docs/2/guide/create/frontend-configuration/index.mdx b/src/content/docs/2/guide/create/frontend-configuration/index.mdx deleted file mode 100644 index 7516d06c69..0000000000 --- a/src/content/docs/2/guide/create/frontend-configuration/index.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Frontend Configuration ---- - -import { LinkCard, CardGrid } from '@astrojs/starlight/components'; - -Tauri is frontend agnostic and supports most frontend frameworks out of the box. But sometimes frameworks 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 could either 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 is welcome to help others in the Tauri community integrate with that framework. - -:::tip[Framework Not Listed?] - -Don't see a framework listed? It may work with Tauri without any additional configuration required. Read the [frontend configuration guide](/2/guide/create/frontend-configuration) for any common configurations to look out for. - -::: - -## JavaScript - - - - - - - - - - -## Rust - - - - - - - diff --git a/src/content/docs/2/guide/create/frontend/index.mdx b/src/content/docs/2/guide/create/frontend/index.mdx new file mode 100644 index 0000000000..223128148c --- /dev/null +++ b/src/content/docs/2/guide/create/frontend/index.mdx @@ -0,0 +1,48 @@ +--- +title: Frontend Configuration +--- + +import { LinkCard, CardGrid } from '@astrojs/starlight/components'; + +Tauri is frontend agnostic and supports most frontend frameworks out of the box. But sometimes frameworks 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 could either 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 is welcome to help others in the Tauri community integrate with that framework. + +:::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 + +For all intents and purposes you can think of Tauri as a static web host, and you have 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. + +{/* 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 any server based alternatives (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/framework/leptos.mdx b/src/content/docs/2/guide/create/frontend/leptos.mdx similarity index 100% rename from src/content/docs/2/guide/framework/leptos.mdx rename to src/content/docs/2/guide/create/frontend/leptos.mdx diff --git a/src/content/docs/2/guide/framework/nextjs.mdx b/src/content/docs/2/guide/create/frontend/nextjs.mdx similarity index 100% rename from src/content/docs/2/guide/framework/nextjs.mdx rename to src/content/docs/2/guide/create/frontend/nextjs.mdx diff --git a/src/content/docs/2/guide/framework/nuxt.mdx b/src/content/docs/2/guide/create/frontend/nuxt.mdx similarity index 100% rename from src/content/docs/2/guide/framework/nuxt.mdx rename to src/content/docs/2/guide/create/frontend/nuxt.mdx diff --git a/src/content/docs/2/guide/framework/qwik.mdx b/src/content/docs/2/guide/create/frontend/qwik.mdx similarity index 100% rename from src/content/docs/2/guide/framework/qwik.mdx rename to src/content/docs/2/guide/create/frontend/qwik.mdx diff --git a/src/content/docs/2/guide/framework/sveltekit.mdx b/src/content/docs/2/guide/create/frontend/sveltekit.mdx similarity index 100% rename from src/content/docs/2/guide/framework/sveltekit.mdx rename to src/content/docs/2/guide/create/frontend/sveltekit.mdx diff --git a/src/content/docs/2/guide/framework/sycamore.mdx b/src/content/docs/2/guide/create/frontend/sycamore.mdx similarity index 100% rename from src/content/docs/2/guide/framework/sycamore.mdx rename to src/content/docs/2/guide/create/frontend/sycamore.mdx diff --git a/src/content/docs/2/guide/framework/trunk.mdx b/src/content/docs/2/guide/create/frontend/trunk.mdx similarity index 100% rename from src/content/docs/2/guide/framework/trunk.mdx rename to src/content/docs/2/guide/create/frontend/trunk.mdx diff --git a/src/content/docs/2/guide/framework/vite.mdx b/src/content/docs/2/guide/create/frontend/vite.mdx similarity index 100% rename from src/content/docs/2/guide/framework/vite.mdx rename to src/content/docs/2/guide/create/frontend/vite.mdx diff --git a/src/content/docs/2/guide/framework/webpack.mdx b/src/content/docs/2/guide/create/frontend/webpack.mdx similarity index 100% rename from src/content/docs/2/guide/framework/webpack.mdx rename to src/content/docs/2/guide/create/frontend/webpack.mdx diff --git a/src/content/docs/2/guide/framework/yew.mdx b/src/content/docs/2/guide/create/frontend/yew.mdx similarity index 100% rename from src/content/docs/2/guide/framework/yew.mdx rename to src/content/docs/2/guide/create/frontend/yew.mdx diff --git a/src/content/docs/2/guide/create/index.mdx b/src/content/docs/2/guide/create/index.mdx index c8728fa7ab..3172eefa41 100644 --- a/src/content/docs/2/guide/create/index.mdx +++ b/src/content/docs/2/guide/create/index.mdx @@ -97,7 +97,7 @@ You'll now see a new window open with your app running. ## Next Steps -- [Add a Frontend Framework](/2/guide/create/frontend-configuration) +- [Add and Configure a Frontend Framework](/2/guide/create/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) diff --git a/src/content/docs/2/guide/framework/frontend-agnostic.mdx b/src/content/docs/2/guide/framework/frontend-agnostic.mdx deleted file mode 100644 index b054573f45..0000000000 --- a/src/content/docs/2/guide/framework/frontend-agnostic.mdx +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Frontend agnostic ---- - -import { Tabs, TabItem } from '@astrojs/starlight/components'; - -Tauri has no opinion on what frontend framework you pick or what languages you use. However, that doesn't mean that -Tauri doesn't have any demands on it. - -Within web development the concept of frontend agnosticism is more commonly referred to as static web hosting. That is, -you compile your website once and can then put it into any http framework capable of serving a folder. Examples of this -is for example Apache and Nginx. - -For all intents and purposes you can think of Tauri as a static web host, and you have 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. - -## Checklist - -- Use static site generation (SSG). Tauri doesn't officially support any server based alternatives (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. So no hybrid solutions with SSR. From 1c994fa8d54a31ce5b51dc32811a3ba1115b1f76 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 13:00:26 +0100 Subject: [PATCH 07/41] move docs Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/create/index.mdx | 2 +- .../2/guide/{create => }/frontend/index.mdx | 20 +++++++++---------- .../2/guide/{create => }/frontend/leptos.mdx | 0 .../2/guide/{create => }/frontend/nextjs.mdx | 0 .../2/guide/{create => }/frontend/nuxt.mdx | 0 .../2/guide/{create => }/frontend/qwik.mdx | 0 .../guide/{create => }/frontend/sveltekit.mdx | 0 .../guide/{create => }/frontend/sycamore.mdx | 0 .../2/guide/{create => }/frontend/trunk.mdx | 0 .../2/guide/{create => }/frontend/vite.mdx | 0 .../2/guide/{create => }/frontend/webpack.mdx | 0 .../2/guide/{create => }/frontend/yew.mdx | 0 12 files changed, 11 insertions(+), 11 deletions(-) rename src/content/docs/2/guide/{create => }/frontend/index.mdx (71%) rename src/content/docs/2/guide/{create => }/frontend/leptos.mdx (100%) rename src/content/docs/2/guide/{create => }/frontend/nextjs.mdx (100%) rename src/content/docs/2/guide/{create => }/frontend/nuxt.mdx (100%) rename src/content/docs/2/guide/{create => }/frontend/qwik.mdx (100%) rename src/content/docs/2/guide/{create => }/frontend/sveltekit.mdx (100%) rename src/content/docs/2/guide/{create => }/frontend/sycamore.mdx (100%) rename src/content/docs/2/guide/{create => }/frontend/trunk.mdx (100%) rename src/content/docs/2/guide/{create => }/frontend/vite.mdx (100%) rename src/content/docs/2/guide/{create => }/frontend/webpack.mdx (100%) rename src/content/docs/2/guide/{create => }/frontend/yew.mdx (100%) diff --git a/src/content/docs/2/guide/create/index.mdx b/src/content/docs/2/guide/create/index.mdx index 3172eefa41..f586448c3d 100644 --- a/src/content/docs/2/guide/create/index.mdx +++ b/src/content/docs/2/guide/create/index.mdx @@ -97,7 +97,7 @@ You'll now see a new window open with your app running. ## Next Steps -- [Add and Configure a Frontend Framework](/2/guide/create/frontend) +- [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) diff --git a/src/content/docs/2/guide/create/frontend/index.mdx b/src/content/docs/2/guide/frontend/index.mdx similarity index 71% rename from src/content/docs/2/guide/create/frontend/index.mdx rename to src/content/docs/2/guide/frontend/index.mdx index 223128148c..fe9a0521af 100644 --- a/src/content/docs/2/guide/create/frontend/index.mdx +++ b/src/content/docs/2/guide/frontend/index.mdx @@ -17,21 +17,21 @@ Don't see a framework listed? It may work with Tauri without any additional conf ## JavaScript - - - - - - + + + + + + ## Rust - - - - + + + + ## Configuration Checklist diff --git a/src/content/docs/2/guide/create/frontend/leptos.mdx b/src/content/docs/2/guide/frontend/leptos.mdx similarity index 100% rename from src/content/docs/2/guide/create/frontend/leptos.mdx rename to src/content/docs/2/guide/frontend/leptos.mdx diff --git a/src/content/docs/2/guide/create/frontend/nextjs.mdx b/src/content/docs/2/guide/frontend/nextjs.mdx similarity index 100% rename from src/content/docs/2/guide/create/frontend/nextjs.mdx rename to src/content/docs/2/guide/frontend/nextjs.mdx diff --git a/src/content/docs/2/guide/create/frontend/nuxt.mdx b/src/content/docs/2/guide/frontend/nuxt.mdx similarity index 100% rename from src/content/docs/2/guide/create/frontend/nuxt.mdx rename to src/content/docs/2/guide/frontend/nuxt.mdx diff --git a/src/content/docs/2/guide/create/frontend/qwik.mdx b/src/content/docs/2/guide/frontend/qwik.mdx similarity index 100% rename from src/content/docs/2/guide/create/frontend/qwik.mdx rename to src/content/docs/2/guide/frontend/qwik.mdx diff --git a/src/content/docs/2/guide/create/frontend/sveltekit.mdx b/src/content/docs/2/guide/frontend/sveltekit.mdx similarity index 100% rename from src/content/docs/2/guide/create/frontend/sveltekit.mdx rename to src/content/docs/2/guide/frontend/sveltekit.mdx diff --git a/src/content/docs/2/guide/create/frontend/sycamore.mdx b/src/content/docs/2/guide/frontend/sycamore.mdx similarity index 100% rename from src/content/docs/2/guide/create/frontend/sycamore.mdx rename to src/content/docs/2/guide/frontend/sycamore.mdx diff --git a/src/content/docs/2/guide/create/frontend/trunk.mdx b/src/content/docs/2/guide/frontend/trunk.mdx similarity index 100% rename from src/content/docs/2/guide/create/frontend/trunk.mdx rename to src/content/docs/2/guide/frontend/trunk.mdx diff --git a/src/content/docs/2/guide/create/frontend/vite.mdx b/src/content/docs/2/guide/frontend/vite.mdx similarity index 100% rename from src/content/docs/2/guide/create/frontend/vite.mdx rename to src/content/docs/2/guide/frontend/vite.mdx diff --git a/src/content/docs/2/guide/create/frontend/webpack.mdx b/src/content/docs/2/guide/frontend/webpack.mdx similarity index 100% rename from src/content/docs/2/guide/create/frontend/webpack.mdx rename to src/content/docs/2/guide/frontend/webpack.mdx diff --git a/src/content/docs/2/guide/create/frontend/yew.mdx b/src/content/docs/2/guide/frontend/yew.mdx similarity index 100% rename from src/content/docs/2/guide/create/frontend/yew.mdx rename to src/content/docs/2/guide/frontend/yew.mdx From 4335461165cd42e3dae8025de6b36f02d2a72d63 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 13:00:33 +0100 Subject: [PATCH 08/41] add to sidebar Signed-off-by: Lorenzo Lewis --- astro.config.mjs | 4 ++++ 1 file changed, 4 insertions(+) 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', From 2fbe542bee28bf5d8078cfd572fa804afd7f8e38 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 13:05:12 +0100 Subject: [PATCH 09/41] tweaks Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/leptos.mdx | 8 +++++--- src/content/docs/2/guide/frontend/nextjs.mdx | 8 ++++---- src/content/docs/2/guide/frontend/nuxt.mdx | 8 ++++---- src/content/docs/2/guide/frontend/qwik.mdx | 6 +++--- src/content/docs/2/guide/frontend/sycamore.mdx | 2 +- src/content/docs/2/guide/frontend/yew.mdx | 2 +- 6 files changed, 18 insertions(+), 16 deletions(-) diff --git a/src/content/docs/2/guide/frontend/leptos.mdx b/src/content/docs/2/guide/frontend/leptos.mdx index 58a830cd72..661a2b22d8 100644 --- a/src/content/docs/2/guide/frontend/leptos.mdx +++ b/src/content/docs/2/guide/frontend/leptos.mdx @@ -4,15 +4,17 @@ title: Leptos import { Tabs, TabItem } from '@astrojs/starlight/components'; -Leptos is a Rust based frontend framework. +Leptos is a Rust-based frontend framework. ## Checklist - Use SSG, Tauri doesn't officially support server based solutions. - Use `0.0.0.0` so that your device can detect your frontend. -- Use the fork of Trunk made by one of the Tauri core member which contains a couple of fixes to it. Hopefully we can get these merged upstream eventually. +- Use the fork of Trunk made by one of the Tauri core member which contains a couple of fixes to it. -## Example configuration +{/* TODO: Hopefully we can get these merged upstream eventually. */} + +## Example Configuration diff --git a/src/content/docs/2/guide/frontend/nextjs.mdx b/src/content/docs/2/guide/frontend/nextjs.mdx index 391cede7f4..da65abcd0c 100644 --- a/src/content/docs/2/guide/frontend/nextjs.mdx +++ b/src/content/docs/2/guide/frontend/nextjs.mdx @@ -4,15 +4,15 @@ title: Next.js import { Tabs, TabItem } from '@astrojs/starlight/components'; -Next.js is a meta framework for React. To set up a Next.js project as a frontend for Tauri make sure you go through the checklist below. +Next.js is a meta-framework for React. ## Checklist -- Use static exports by setting `output: 'export'`, Tauri doesn't officially support server based solutions. -- Use `internal-ip` for mobile compatibility so you can configure `assetPrefix` so that the server properly resolves your assets. +- 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 +## Example Configuration diff --git a/src/content/docs/2/guide/frontend/nuxt.mdx b/src/content/docs/2/guide/frontend/nuxt.mdx index c2465bb9f4..9fc3930a4e 100644 --- a/src/content/docs/2/guide/frontend/nuxt.mdx +++ b/src/content/docs/2/guide/frontend/nuxt.mdx @@ -4,16 +4,16 @@ title: Nuxt import { Tabs, TabItem } from '@astrojs/starlight/components'; -Nuxt is a meta framework for Vue. To set up a Nuxt project as a frontend for Tauri make sure you go through the checklist below. +Nuxt is a meta-framework for Vue. ## Checklist -- Use SSG by setting `ssr: false`, Tauri doesn't officially support server based solutions. +- 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` +- Compile using `nuxi generate`. -## Example configuration +## Example Configuration diff --git a/src/content/docs/2/guide/frontend/qwik.mdx b/src/content/docs/2/guide/frontend/qwik.mdx index fb229e7fbe..454d2f7888 100644 --- a/src/content/docs/2/guide/frontend/qwik.mdx +++ b/src/content/docs/2/guide/frontend/qwik.mdx @@ -8,11 +8,11 @@ Next.js is a meta framework for React. To set up a Next.js project as a frontend ## Checklist -- Use static exports, Tauri doesn't officially support server based solutions. -- Use `internal-ip` for mobile compatibility so you can configure `assetPrefix` so that the server properly resolves your assets. +- Use static exports, 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 +## Example Configuration diff --git a/src/content/docs/2/guide/frontend/sycamore.mdx b/src/content/docs/2/guide/frontend/sycamore.mdx index 192363a629..8a2ada3597 100644 --- a/src/content/docs/2/guide/frontend/sycamore.mdx +++ b/src/content/docs/2/guide/frontend/sycamore.mdx @@ -4,7 +4,7 @@ title: Sycamore import { Tabs, TabItem } from '@astrojs/starlight/components'; -Sycamore is a Rust based frontend framework. +Sycamore is a Rust-based frontend framework. ## Checklist diff --git a/src/content/docs/2/guide/frontend/yew.mdx b/src/content/docs/2/guide/frontend/yew.mdx index 958aa62df3..28588cfa98 100644 --- a/src/content/docs/2/guide/frontend/yew.mdx +++ b/src/content/docs/2/guide/frontend/yew.mdx @@ -4,7 +4,7 @@ title: Yew import { Tabs, TabItem } from '@astrojs/starlight/components'; -Yew is a Rust based frontend framework. +Yew is a Rust-based frontend framework. ## Checklist From 99b013f063f2a8f03690e76c8b0da1d4daa32166 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 13:05:53 +0100 Subject: [PATCH 10/41] revert Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/develop.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/content/docs/2/guide/develop.mdx b/src/content/docs/2/guide/develop.mdx index a37a0a5da4..15d1affe21 100644 --- a/src/content/docs/2/guide/develop.mdx +++ b/src/content/docs/2/guide/develop.mdx @@ -1,3 +1,11 @@ --- title: Develop --- + +import Stub from '@components/Stub.astro'; + + + +- `pnpm tauri [android|ios] dev [--open]` + + From 9288698ca106997d607e7d150485188cd21aaf6e Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 13:06:23 +0100 Subject: [PATCH 11/41] format Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/develop.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/2/guide/develop.mdx b/src/content/docs/2/guide/develop.mdx index 15d1affe21..2b82a7c7f6 100644 --- a/src/content/docs/2/guide/develop.mdx +++ b/src/content/docs/2/guide/develop.mdx @@ -4,8 +4,8 @@ title: Develop import Stub from '@components/Stub.astro'; - + - `pnpm tauri [android|ios] dev [--open]` - + From 8059fa47be90a9c8fd36a77dee48d1d51b0b932d Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 13:09:10 +0100 Subject: [PATCH 12/41] phrasing updates Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/index.mdx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/content/docs/2/guide/frontend/index.mdx b/src/content/docs/2/guide/frontend/index.mdx index fe9a0521af..750ac121f4 100644 --- a/src/content/docs/2/guide/frontend/index.mdx +++ b/src/content/docs/2/guide/frontend/index.mdx @@ -4,9 +4,9 @@ title: Frontend Configuration import { LinkCard, CardGrid } from '@astrojs/starlight/components'; -Tauri is frontend agnostic and supports most frontend frameworks out of the box. But sometimes frameworks need a bit of extra configuration to integrate with Tauri. Below is a list of frameworks with recommended configurations. +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 could either 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 is welcome to help others in the Tauri community integrate with that framework. +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?] @@ -36,13 +36,14 @@ Don't see a framework listed? It may work with Tauri without any additional conf ## Configuration Checklist -For all intents and purposes you can think of Tauri as a static web host, and you have 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. +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 any server based alternatives (SSR). +- 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). From 576b67d47ff3dde8c2580a7da21757fc338f43e3 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 18:23:18 +0100 Subject: [PATCH 13/41] Stub leptos guide Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/leptos.mdx | 59 +------------------- 1 file changed, 2 insertions(+), 57 deletions(-) diff --git a/src/content/docs/2/guide/frontend/leptos.mdx b/src/content/docs/2/guide/frontend/leptos.mdx index 661a2b22d8..87986abf7e 100644 --- a/src/content/docs/2/guide/frontend/leptos.mdx +++ b/src/content/docs/2/guide/frontend/leptos.mdx @@ -2,61 +2,6 @@ title: Leptos --- -import { Tabs, TabItem } from '@astrojs/starlight/components'; +import Stub from '@components/Stub.astro'; -Leptos is a Rust-based frontend framework. - -## Checklist - -- Use SSG, Tauri doesn't officially support server based solutions. -- Use `0.0.0.0` so that your device can detect your frontend. -- Use the fork of Trunk made by one of the Tauri core member which contains a couple of fixes to it. - -{/* TODO: Hopefully we can get these merged upstream eventually. */} - -## Example Configuration - - - - -```sh -cargo install --git https://github.com/amrbashir/trunk -``` - - - - -```sh -cargo binstall --git https://github.com/amrbashir/trunk -``` - - - - -```json -// tauri.conf.json -{ - "build": { - "beforeDevCommand": "trunk serve", - "beforeBuildCommand": "trunk build", - "devPath": "http://localhost:1420", - "distDir": "../dist", - "withGlobalTauri": true - } -} -``` - -```toml -# Trunk.toml -[build] -target = "./index.html" - -[watch] -ignore = ["./src-tauri"] - -[serve] -address = "0.0.0.0" -port = 1420 -open = false -ws_protocol = "ws" -``` + From 717e66a0344d808f28ae2a1dca4e7f074079ea43 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 18:33:42 +0100 Subject: [PATCH 14/41] Stub qwik Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/qwik.mdx | 60 +--------------------- 1 file changed, 2 insertions(+), 58 deletions(-) diff --git a/src/content/docs/2/guide/frontend/qwik.mdx b/src/content/docs/2/guide/frontend/qwik.mdx index 454d2f7888..758566d764 100644 --- a/src/content/docs/2/guide/frontend/qwik.mdx +++ b/src/content/docs/2/guide/frontend/qwik.mdx @@ -2,62 +2,6 @@ title: Qwik --- -import { Tabs, TabItem } from '@astrojs/starlight/components'; +import Stub from '@components/Stub.astro'; -Next.js is a meta framework for React. To set up a Next.js project as a frontend for Tauri make sure you go through the checklist below. - -## Checklist - -- Use static exports, 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 - - - -```sh -npm install --save-dev internal-ip -``` - - -```sh -yarn add -D internal-ip -``` - - - -```sh -pnpm add -D internal-ip -``` - - - - -```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 - output: 'export', - // Helps you identify issues - reactStrictMode: true, - // Faster minification - swcMinify: true, - // 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; -}; -``` + From e5e1af1395aafb134eeb38b564bb954f062e954b Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 18:35:10 +0100 Subject: [PATCH 15/41] stub Svelte Signed-off-by: Lorenzo Lewis --- .../docs/2/guide/frontend/sveltekit.mdx | 60 +------------------ 1 file changed, 2 insertions(+), 58 deletions(-) diff --git a/src/content/docs/2/guide/frontend/sveltekit.mdx b/src/content/docs/2/guide/frontend/sveltekit.mdx index c6468b23da..cc8710b71e 100644 --- a/src/content/docs/2/guide/frontend/sveltekit.mdx +++ b/src/content/docs/2/guide/frontend/sveltekit.mdx @@ -2,62 +2,6 @@ title: SvelteKit --- -import { Tabs, TabItem } from '@astrojs/starlight/components'; +import Stub from '@components/Stub.astro'; -Next.js is a meta framework for React. To set up a Next.js project as a frontend for Tauri make sure you go through the checklist below. - -## Checklist - -- Use static exports, Tauri doesn't officially support server based solutions. -- Use `internal-ip` for mobile compatibility so you can configure `assetPrefix` so that the server properly resolves your assets. -- Use `out/` as `distDir` in `tauri.conf.json`. - -## Example configuration - - - -```sh -npm install --save-dev internal-ip -``` - - -```sh -yarn add -D internal-ip -``` - - - -```sh -pnpm add -D internal-ip -``` - - - - -```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 - output: 'export', - // Helps you identify issues - reactStrictMode: true, - // Faster minification - swcMinify: true, - // 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; -}; -``` + From 33b8195f847576f557253006b8a64befa4c72c5f Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 18:35:35 +0100 Subject: [PATCH 16/41] Stub sycamore Signed-off-by: Lorenzo Lewis --- .../docs/2/guide/frontend/sycamore.mdx | 57 +------------------ 1 file changed, 2 insertions(+), 55 deletions(-) diff --git a/src/content/docs/2/guide/frontend/sycamore.mdx b/src/content/docs/2/guide/frontend/sycamore.mdx index 8a2ada3597..4560770065 100644 --- a/src/content/docs/2/guide/frontend/sycamore.mdx +++ b/src/content/docs/2/guide/frontend/sycamore.mdx @@ -2,59 +2,6 @@ title: Sycamore --- -import { Tabs, TabItem } from '@astrojs/starlight/components'; +import Stub from '@components/Stub.astro'; -Sycamore is a Rust-based frontend framework. - -## Checklist - -- Use SSG, Tauri doesn't officially support server based solutions. -- Use `0.0.0.0` so that your device can detect your frontend. -- Use the fork of Trunk made by one of the Tauri core member which contains a couple of fixes to it. Hopefully we can get these merged upstream eventually. - -## Example configuration - - - - -```sh -cargo install --git https://github.com/amrbashir/trunk -``` - - - - -```sh -cargo binstall --git https://github.com/amrbashir/trunk -``` - - - - -```json -// tauri.conf.json -{ - "build": { - "beforeDevCommand": "trunk serve", - "beforeBuildCommand": "trunk build", - "devPath": "http://localhost:1420", - "distDir": "../dist", - "withGlobalTauri": true - } -} -``` - -```toml -# Trunk.toml -[build] -target = "./index.html" - -[watch] -ignore = ["./src-tauri"] - -[serve] -address = "0.0.0.0" -port = 1420 -open = false -ws_protocol = "ws" -``` + From d5ede7ccad226fa657899d110e1628e786ac208c Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 18:36:04 +0100 Subject: [PATCH 17/41] Stub vite Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/vite.mdx | 60 +--------------------- 1 file changed, 2 insertions(+), 58 deletions(-) diff --git a/src/content/docs/2/guide/frontend/vite.mdx b/src/content/docs/2/guide/frontend/vite.mdx index 9daf569524..40abceaf01 100644 --- a/src/content/docs/2/guide/frontend/vite.mdx +++ b/src/content/docs/2/guide/frontend/vite.mdx @@ -2,62 +2,6 @@ title: Vite --- -import { Tabs, TabItem } from '@astrojs/starlight/components'; +import Stub from '@components/Stub.astro'; -Next.js is a meta framework for React. To set up a Next.js project as a frontend for Tauri make sure you go through the checklist below. - -## Checklist - -- Use static exports, Tauri doesn't officially support server based solutions. -- Use `internal-ip` for mobile compatibility so you can configure `assetPrefix` so that the server properly resolves your assets. -- Use `out/` as `distDir` in `tauri.conf.json`. - -## Example configuration - - - -```sh -npm install --save-dev internal-ip -``` - - -```sh -yarn add -D internal-ip -``` - - - -```sh -pnpm add -D internal-ip -``` - - - - -```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 - output: 'export', - // Helps you identify issues - reactStrictMode: true, - // Faster minification - swcMinify: true, - // 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; -}; -``` + From bbc438bbd86805d3b5d08bb348401667487d92d4 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 18:36:41 +0100 Subject: [PATCH 18/41] stub webpack Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/webpack.mdx | 60 +------------------ 1 file changed, 2 insertions(+), 58 deletions(-) diff --git a/src/content/docs/2/guide/frontend/webpack.mdx b/src/content/docs/2/guide/frontend/webpack.mdx index 7a7643e553..59c7da461b 100644 --- a/src/content/docs/2/guide/frontend/webpack.mdx +++ b/src/content/docs/2/guide/frontend/webpack.mdx @@ -2,62 +2,6 @@ title: Webpack --- -import { Tabs, TabItem } from '@astrojs/starlight/components'; +import Stub from '@components/Stub.astro'; -Next.js is a meta framework for React. To set up a Next.js project as a frontend for Tauri make sure you go through the checklist below. - -## Checklist - -- Use static exports, Tauri doesn't officially support server based solutions. -- Use `internal-ip` for mobile compatibility so you can configure `assetPrefix` so that the server properly resolves your assets. -- Use `out/` as `distDir` in `tauri.conf.json`. - -## Example configuration - - - -```sh -npm install --save-dev internal-ip -``` - - -```sh -yarn add -D internal-ip -``` - - - -```sh -pnpm add -D internal-ip -``` - - - - -```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 - output: 'export', - // Helps you identify issues - reactStrictMode: true, - // Faster minification - swcMinify: true, - // 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; -}; -``` + From 2f6374ee450916488b154ba253fea9d9fdda4691 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 18:37:00 +0100 Subject: [PATCH 19/41] stub Yew Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/yew.mdx | 57 +---------------------- 1 file changed, 2 insertions(+), 55 deletions(-) diff --git a/src/content/docs/2/guide/frontend/yew.mdx b/src/content/docs/2/guide/frontend/yew.mdx index 28588cfa98..66d54db990 100644 --- a/src/content/docs/2/guide/frontend/yew.mdx +++ b/src/content/docs/2/guide/frontend/yew.mdx @@ -2,59 +2,6 @@ title: Yew --- -import { Tabs, TabItem } from '@astrojs/starlight/components'; +import Stub from '@components/Stub.astro'; -Yew is a Rust-based frontend framework. - -## Checklist - -- Use SSG, Tauri doesn't officially support server based solutions. -- Use `0.0.0.0` so that your device can detect your frontend. -- Use the fork of Trunk made by one of the Tauri core member which contains a couple of fixes to it. Hopefully we can get these merged upstream eventually. - -## Example configuration - - - - -```sh -cargo install --git https://github.com/amrbashir/trunk -``` - - - - -```sh -cargo binstall --git https://github.com/amrbashir/trunk -``` - - - - -```json -// tauri.conf.json -{ - "build": { - "beforeDevCommand": "trunk serve", - "beforeBuildCommand": "trunk build", - "devPath": "http://localhost:1420", - "distDir": "../dist", - "withGlobalTauri": true - } -} -``` - -```toml -# Trunk.toml -[build] -target = "./index.html" - -[watch] -ignore = ["./src-tauri"] - -[serve] -address = "0.0.0.0" -port = 1420 -open = false -ws_protocol = "ws" -``` + From 8f792b43aec5e868c15955cd992483ce2868ea5e Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 18:52:33 +0100 Subject: [PATCH 20/41] fix typo Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/nuxt.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/2/guide/frontend/nuxt.mdx b/src/content/docs/2/guide/frontend/nuxt.mdx index 9fc3930a4e..a2efee725f 100644 --- a/src/content/docs/2/guide/frontend/nuxt.mdx +++ b/src/content/docs/2/guide/frontend/nuxt.mdx @@ -74,7 +74,7 @@ export default defineNuxtConfig({ vite: { // Better support for Tauri CLI output clearScreen: false, - // Enable envbironment variables + // Enable environment variables envPrefix: ['VITE_', 'TAURI_'], build: { // (optional) Support modern browsers From f90e285de84325fb31513de5f97641f93b7d7d18 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 18:52:43 +0100 Subject: [PATCH 21/41] Update description Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/trunk.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/2/guide/frontend/trunk.mdx b/src/content/docs/2/guide/frontend/trunk.mdx index 85222aa7fc..94fb1abed1 100644 --- a/src/content/docs/2/guide/frontend/trunk.mdx +++ b/src/content/docs/2/guide/frontend/trunk.mdx @@ -4,7 +4,7 @@ title: Trunk import { Tabs, TabItem } from '@astrojs/starlight/components'; -Trunk is a tool for compiling and running Rust based frontends. Make sure you go through the checklist below to set Trunk up for your project. +Trunk is a WASM web application bundler for Rust. Learn more about Trunk at https://trunkrs.dev. ## Checklist From 059cb4ba3bff4bd10dcb86bf45735c9131165be8 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 19:13:30 +0100 Subject: [PATCH 22/41] update descriptions and comments Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/nuxt.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/docs/2/guide/frontend/nuxt.mdx b/src/content/docs/2/guide/frontend/nuxt.mdx index a2efee725f..e96d64833e 100644 --- a/src/content/docs/2/guide/frontend/nuxt.mdx +++ b/src/content/docs/2/guide/frontend/nuxt.mdx @@ -4,7 +4,7 @@ title: Nuxt import { Tabs, TabItem } from '@astrojs/starlight/components'; -Nuxt is a meta-framework for Vue. +Learn more about Nuxt at https://nuxt.com. This guide is accurate as of Nuxt 3.7. ## Checklist @@ -85,9 +85,9 @@ export default defineNuxtConfig({ sourcemap: !!process.env.TAURI_DEBUG, }, server: { - // Tauri expects a specific port, panic if it can't be bound + // Tauri requires a consistent port strictPort: true, - // Make sure your mobile device can find you + // 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 From 9adb608ae251ba84e8e788ba47a71c08c7cbd31f Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 19:14:20 +0100 Subject: [PATCH 23/41] Add version to trunk guide Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/trunk.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/2/guide/frontend/trunk.mdx b/src/content/docs/2/guide/frontend/trunk.mdx index 94fb1abed1..60d2026d46 100644 --- a/src/content/docs/2/guide/frontend/trunk.mdx +++ b/src/content/docs/2/guide/frontend/trunk.mdx @@ -4,7 +4,7 @@ title: Trunk import { Tabs, TabItem } from '@astrojs/starlight/components'; -Trunk is a WASM web application bundler for Rust. Learn more about Trunk at https://trunkrs.dev. +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. ## Checklist From 8aab1d035896591c01b626df44dcda58cad744ad Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Fri, 1 Sep 2023 19:29:25 +0100 Subject: [PATCH 24/41] Revise wording Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/nextjs.mdx | 3 ++- src/content/docs/2/guide/frontend/trunk.mdx | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/content/docs/2/guide/frontend/nextjs.mdx b/src/content/docs/2/guide/frontend/nextjs.mdx index da65abcd0c..8268c70558 100644 --- a/src/content/docs/2/guide/frontend/nextjs.mdx +++ b/src/content/docs/2/guide/frontend/nextjs.mdx @@ -4,7 +4,7 @@ title: Next.js import { Tabs, TabItem } from '@astrojs/starlight/components'; -Next.js is a meta-framework for React. +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 @@ -86,6 +86,7 @@ module.exports = async (phase, { defaultConfig }) => { } const nextConfig = { // Ensure Next.js uses SSG instead of SSR + // https://nextjs.org/docs/pages/building-your-application/deploying/static-exports output: 'export', // Helps you identify issues reactStrictMode: true, diff --git a/src/content/docs/2/guide/frontend/trunk.mdx b/src/content/docs/2/guide/frontend/trunk.mdx index 60d2026d46..4e033c2db8 100644 --- a/src/content/docs/2/guide/frontend/trunk.mdx +++ b/src/content/docs/2/guide/frontend/trunk.mdx @@ -9,10 +9,10 @@ Trunk is a WASM web application bundler for Rust. Learn more about Trunk at http ## Checklist - Use SSG, Tauri doesn't officially support server based solutions. -- Use `0.0.0.0` so that your device can detect your frontend. +- Use `address = "0.0.0.0"` so that the webserver is available on the network for mobile development. - Use the fork of Trunk made by one of the Tauri core member which contains a couple of fixes to it. Hopefully we can get these merged upstream eventually. -## Example configuration +## Example Configuration From 204dc65fae7c08cde62fc4f91a3c35a23e5047a1 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 14:13:52 +0100 Subject: [PATCH 25/41] update to mention upstream issues, phrasing Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/trunk.mdx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/content/docs/2/guide/frontend/trunk.mdx b/src/content/docs/2/guide/frontend/trunk.mdx index 4e033c2db8..126ae6efb3 100644 --- a/src/content/docs/2/guide/frontend/trunk.mdx +++ b/src/content/docs/2/guide/frontend/trunk.mdx @@ -6,11 +6,18 @@ import { Tabs, TabItem } from '@astrojs/starlight/components'; 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 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` or `cargo binstall --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. -- Use the fork of Trunk made by one of the Tauri core member which contains a couple of fixes to it. Hopefully we can get these merged upstream eventually. ## Example Configuration @@ -18,14 +25,14 @@ Trunk is a WASM web application bundler for Rust. Learn more about Trunk at http ```sh -cargo install --git https://github.com/amrbashir/trunk +cargo install --locked trunk ``` ```sh -cargo binstall --git https://github.com/amrbashir/trunk +cargo binstall trunk ``` @@ -56,5 +63,4 @@ ignore = ["./src-tauri"] address = "0.0.0.0" port = 1420 open = false -ws_protocol = "ws" ``` From 07042d1cd5bb4d68b0a3f96a8c8dee42eaaca148 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 14:26:18 +0100 Subject: [PATCH 26/41] Add telemetry as optional to checklist Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/nuxt.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/docs/2/guide/frontend/nuxt.mdx b/src/content/docs/2/guide/frontend/nuxt.mdx index e96d64833e..c22e14bce0 100644 --- a/src/content/docs/2/guide/frontend/nuxt.mdx +++ b/src/content/docs/2/guide/frontend/nuxt.mdx @@ -12,6 +12,7 @@ Learn more about Nuxt at https://nuxt.com. This guide is accurate as of Nuxt 3.7 - 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 From 2e0c0c11b150b21cad6dc7a478310714be2de961 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 14:31:05 +0100 Subject: [PATCH 27/41] Remove optional build object in config Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/nuxt.mdx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/content/docs/2/guide/frontend/nuxt.mdx b/src/content/docs/2/guide/frontend/nuxt.mdx index c22e14bce0..e7ff249f8d 100644 --- a/src/content/docs/2/guide/frontend/nuxt.mdx +++ b/src/content/docs/2/guide/frontend/nuxt.mdx @@ -77,14 +77,6 @@ export default defineNuxtConfig({ clearScreen: false, // Enable environment variables envPrefix: ['VITE_', 'TAURI_'], - build: { - // (optional) Support modern browsers - target: 'es2022', - // (optional) Don't minify for debug builds - minify: !process.env.TAURI_DEBUG ? 'esbuild' : false, - // (optional) Produce sourcemaps for debug builds - sourcemap: !!process.env.TAURI_DEBUG, - }, server: { // Tauri requires a consistent port strictPort: true, From 064c28b7d6c49bf8b3aabca009c0c1a4c10e3e60 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 14:32:03 +0100 Subject: [PATCH 28/41] Apply suggestions from code review --- src/content/docs/2/guide/frontend/nextjs.mdx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/content/docs/2/guide/frontend/nextjs.mdx b/src/content/docs/2/guide/frontend/nextjs.mdx index 8268c70558..ff1b377dd5 100644 --- a/src/content/docs/2/guide/frontend/nextjs.mdx +++ b/src/content/docs/2/guide/frontend/nextjs.mdx @@ -88,10 +88,6 @@ module.exports = async (phase, { defaultConfig }) => { // Ensure Next.js uses SSG instead of SSR // https://nextjs.org/docs/pages/building-your-application/deploying/static-exports output: 'export', - // Helps you identify issues - reactStrictMode: true, - // Faster minification - swcMinify: true, // 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: { From 42807bb95439a3ba4f853f4646563ff1014eca91 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 14:42:13 +0100 Subject: [PATCH 29/41] remove setting that's already default Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/trunk.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/docs/2/guide/frontend/trunk.mdx b/src/content/docs/2/guide/frontend/trunk.mdx index 126ae6efb3..260e61809f 100644 --- a/src/content/docs/2/guide/frontend/trunk.mdx +++ b/src/content/docs/2/guide/frontend/trunk.mdx @@ -62,5 +62,4 @@ ignore = ["./src-tauri"] [serve] address = "0.0.0.0" port = 1420 -open = false ``` From 32a0d955c86e6dce9ace4bbe83541f41fda1e8a0 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 14:44:34 +0100 Subject: [PATCH 30/41] rename Svelte file Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/{sveltekit.mdx => svelte.mdx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/content/docs/2/guide/frontend/{sveltekit.mdx => svelte.mdx} (78%) diff --git a/src/content/docs/2/guide/frontend/sveltekit.mdx b/src/content/docs/2/guide/frontend/svelte.mdx similarity index 78% rename from src/content/docs/2/guide/frontend/sveltekit.mdx rename to src/content/docs/2/guide/frontend/svelte.mdx index cc8710b71e..e94db0fc8e 100644 --- a/src/content/docs/2/guide/frontend/sveltekit.mdx +++ b/src/content/docs/2/guide/frontend/svelte.mdx @@ -1,5 +1,5 @@ --- -title: SvelteKit +title: Svelte --- import Stub from '@components/Stub.astro'; From de87b43ed6e12d9ae4d0a46b33b76b5b2fe45f4d Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 16:59:09 +0100 Subject: [PATCH 31/41] Update src/content/docs/2/guide/frontend/trunk.mdx Co-authored-by: Simon Hyll --- src/content/docs/2/guide/frontend/trunk.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/2/guide/frontend/trunk.mdx b/src/content/docs/2/guide/frontend/trunk.mdx index 260e61809f..d261082139 100644 --- a/src/content/docs/2/guide/frontend/trunk.mdx +++ b/src/content/docs/2/guide/frontend/trunk.mdx @@ -8,7 +8,7 @@ Trunk is a WASM web application bundler for Rust. Learn more about Trunk at http :::caution[Note on Mobile Support] -Tauri mobile development is not currently possible with 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. +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` or `cargo binstall --git https://github.com/amrbashir/trunk` when installing Trunk and then set `serve.ws_protocol = "ws"` in `Trunk.toml`. From 928532c25040706a498611db229f9a79f02c746d Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 17:07:31 +0100 Subject: [PATCH 32/41] Cleanup Trunk Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/trunk.mdx | 24 ++++++--------------- 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/src/content/docs/2/guide/frontend/trunk.mdx b/src/content/docs/2/guide/frontend/trunk.mdx index d261082139..aaef8c6949 100644 --- a/src/content/docs/2/guide/frontend/trunk.mdx +++ b/src/content/docs/2/guide/frontend/trunk.mdx @@ -2,15 +2,13 @@ title: Trunk --- -import { Tabs, TabItem } from '@astrojs/starlight/components'; - 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` or `cargo binstall --git https://github.com/amrbashir/trunk` when installing Trunk and then set `serve.ws_protocol = "ws"` in `Trunk.toml`. +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`. ::: @@ -19,24 +17,15 @@ You will need to use `cargo install --git https://github.com/amrbashir/trunk` or - 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. -## Example Configuration +## Example Setup - - +1. Install Trunk: ```sh cargo install --locked trunk ``` - - - -```sh -cargo binstall trunk -``` - - - +2. Update Tauri configuration: ```json // tauri.conf.json @@ -51,11 +40,10 @@ cargo binstall trunk } ``` +3. Update Trunk configuration: + ```toml # Trunk.toml -[build] -target = "./index.html" - [watch] ignore = ["./src-tauri"] From c4de5d7c5dd85730103a1fdd96ac164076ad608a Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 17:13:27 +0100 Subject: [PATCH 33/41] setup > configuration, remove install Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/trunk.mdx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/content/docs/2/guide/frontend/trunk.mdx b/src/content/docs/2/guide/frontend/trunk.mdx index aaef8c6949..8cd7fd7fee 100644 --- a/src/content/docs/2/guide/frontend/trunk.mdx +++ b/src/content/docs/2/guide/frontend/trunk.mdx @@ -17,15 +17,9 @@ You will need to use `cargo install --git https://github.com/amrbashir/trunk` wh - 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. -## Example Setup +## Example Configuration -1. Install Trunk: - -```sh -cargo install --locked trunk -``` - -2. Update Tauri configuration: +1. Update Tauri configuration: ```json // tauri.conf.json @@ -40,7 +34,7 @@ cargo install --locked trunk } ``` -3. Update Trunk configuration: +2. Update Trunk configuration: ```toml # Trunk.toml From 911d112acfa01da7bf475a8fefa6a9503ca15d0f Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 17:13:37 +0100 Subject: [PATCH 34/41] Add steps Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/nextjs.mdx | 27 ++++++++++---------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/content/docs/2/guide/frontend/nextjs.mdx b/src/content/docs/2/guide/frontend/nextjs.mdx index ff1b377dd5..75377e8af9 100644 --- a/src/content/docs/2/guide/frontend/nextjs.mdx +++ b/src/content/docs/2/guide/frontend/nextjs.mdx @@ -3,6 +3,7 @@ title: Next.js --- 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. @@ -14,12 +15,18 @@ Next.js is a React framework. Learn more about Next.js at https://nextjs.org. Th ## Example Configuration - - +1. Install `internal-ip` for mobile development: -```sh -npm install --save-dev internal-ip -``` + + +2. Update Tauri configuration: + + + ```json // tauri.conf.json @@ -36,10 +43,6 @@ npm install --save-dev internal-ip -```sh -yarn add -D internal-ip -``` - ```json // tauri.conf.json { @@ -55,10 +58,6 @@ yarn add -D internal-ip -```sh -pnpm add -D internal-ip -``` - ```json // tauri.conf.json { @@ -74,6 +73,8 @@ pnpm add -D internal-ip +3. Update Next.js configuration: + ```ts // next.conf.ts const isProd = process.env.NODE_ENV === 'production'; From 9a36c85b2b31c063cc2a008609a1d85f35b5ed8b Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 17:15:58 +0100 Subject: [PATCH 35/41] Add steps Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/nuxt.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/content/docs/2/guide/frontend/nuxt.mdx b/src/content/docs/2/guide/frontend/nuxt.mdx index e7ff249f8d..f763266cd8 100644 --- a/src/content/docs/2/guide/frontend/nuxt.mdx +++ b/src/content/docs/2/guide/frontend/nuxt.mdx @@ -16,6 +16,8 @@ Learn more about Nuxt at https://nuxt.com. This guide is accurate as of Nuxt 3.7 ## Example Configuration +1. Update Tauri configuration: + @@ -64,6 +66,8 @@ Learn more about Nuxt at https://nuxt.com. This guide is accurate as of Nuxt 3.7 +2. Update Nuxt configuration: + ```ts export default defineNuxtConfig({ // (optional) Enable the Nuxt devtools From 05fec0388511af4e097435958046a5b60f145703 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 17:16:25 +0100 Subject: [PATCH 36/41] Update src/content/docs/2/guide/frontend/nuxt.mdx --- src/content/docs/2/guide/frontend/nuxt.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/content/docs/2/guide/frontend/nuxt.mdx b/src/content/docs/2/guide/frontend/nuxt.mdx index f763266cd8..8fa39e9f1a 100644 --- a/src/content/docs/2/guide/frontend/nuxt.mdx +++ b/src/content/docs/2/guide/frontend/nuxt.mdx @@ -74,8 +74,6 @@ export default defineNuxtConfig({ devtools: { enabled: true }, // Enable SSG ssr: false, - // (optional) Disable telemetry - telemetry: false, vite: { // Better support for Tauri CLI output clearScreen: false, From 74f1ca2fa276506f10551c7f68a88799937f3124 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 17:17:49 +0100 Subject: [PATCH 37/41] Add link to environment variables Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/nuxt.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/docs/2/guide/frontend/nuxt.mdx b/src/content/docs/2/guide/frontend/nuxt.mdx index 8fa39e9f1a..89517754d6 100644 --- a/src/content/docs/2/guide/frontend/nuxt.mdx +++ b/src/content/docs/2/guide/frontend/nuxt.mdx @@ -78,6 +78,8 @@ export default defineNuxtConfig({ // Better support for Tauri CLI output clearScreen: false, // Enable environment variables + // Additional environment variables can be found at + // https://github.com/tauri-apps/tauri/blob/dev/tooling/cli/ENVIRONMENT_VARIABLES.md envPrefix: ['VITE_', 'TAURI_'], server: { // Tauri requires a consistent port From 9966557d4cf5643fcea81c935a223b9e3521c122 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 17:46:33 +0100 Subject: [PATCH 38/41] update to default port Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/trunk.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/content/docs/2/guide/frontend/trunk.mdx b/src/content/docs/2/guide/frontend/trunk.mdx index 8cd7fd7fee..f61d25e164 100644 --- a/src/content/docs/2/guide/frontend/trunk.mdx +++ b/src/content/docs/2/guide/frontend/trunk.mdx @@ -27,7 +27,7 @@ You will need to use `cargo install --git https://github.com/amrbashir/trunk` wh "build": { "beforeDevCommand": "trunk serve", "beforeBuildCommand": "trunk build", - "devPath": "http://localhost:1420", + "devPath": "http://localhost:8080", "distDir": "../dist", "withGlobalTauri": true } @@ -43,5 +43,4 @@ ignore = ["./src-tauri"] [serve] address = "0.0.0.0" -port = 1420 ``` From 2d21361a2affbbe694b5b03e7b186fd123240c0b Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 19:03:14 +0100 Subject: [PATCH 39/41] Enable for i18n --- src/content/docs/2/guide/frontend/index.mdx | 1 + src/content/docs/2/guide/frontend/nextjs.mdx | 1 + src/content/docs/2/guide/frontend/nuxt.mdx | 1 + src/content/docs/2/guide/frontend/trunk.mdx | 1 + 4 files changed, 4 insertions(+) diff --git a/src/content/docs/2/guide/frontend/index.mdx b/src/content/docs/2/guide/frontend/index.mdx index 750ac121f4..cfd18ee3b0 100644 --- a/src/content/docs/2/guide/frontend/index.mdx +++ b/src/content/docs/2/guide/frontend/index.mdx @@ -1,5 +1,6 @@ --- title: Frontend Configuration +i18nReady: true --- import { LinkCard, CardGrid } from '@astrojs/starlight/components'; diff --git a/src/content/docs/2/guide/frontend/nextjs.mdx b/src/content/docs/2/guide/frontend/nextjs.mdx index 75377e8af9..b8049f551a 100644 --- a/src/content/docs/2/guide/frontend/nextjs.mdx +++ b/src/content/docs/2/guide/frontend/nextjs.mdx @@ -1,5 +1,6 @@ --- title: Next.js +i18nReady: true --- import { Tabs, TabItem } from '@astrojs/starlight/components'; diff --git a/src/content/docs/2/guide/frontend/nuxt.mdx b/src/content/docs/2/guide/frontend/nuxt.mdx index 89517754d6..fc9fbb1e8b 100644 --- a/src/content/docs/2/guide/frontend/nuxt.mdx +++ b/src/content/docs/2/guide/frontend/nuxt.mdx @@ -1,5 +1,6 @@ --- title: Nuxt +i18nReady: true --- import { Tabs, TabItem } from '@astrojs/starlight/components'; diff --git a/src/content/docs/2/guide/frontend/trunk.mdx b/src/content/docs/2/guide/frontend/trunk.mdx index f61d25e164..f2f089cdb2 100644 --- a/src/content/docs/2/guide/frontend/trunk.mdx +++ b/src/content/docs/2/guide/frontend/trunk.mdx @@ -1,5 +1,6 @@ --- 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. From ec9bd4073502e043413bedfda1fdaf8699b05314 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 19:50:04 +0100 Subject: [PATCH 40/41] add environment-variables stub Signed-off-by: Lorenzo Lewis --- src/content/docs/2/guide/frontend/nuxt.mdx | 2 +- .../docs/2/reference/environment-variables.mdx | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 src/content/docs/2/reference/environment-variables.mdx diff --git a/src/content/docs/2/guide/frontend/nuxt.mdx b/src/content/docs/2/guide/frontend/nuxt.mdx index fc9fbb1e8b..fd5c64e0cf 100644 --- a/src/content/docs/2/guide/frontend/nuxt.mdx +++ b/src/content/docs/2/guide/frontend/nuxt.mdx @@ -80,7 +80,7 @@ export default defineNuxtConfig({ clearScreen: false, // Enable environment variables // Additional environment variables can be found at - // https://github.com/tauri-apps/tauri/blob/dev/tooling/cli/ENVIRONMENT_VARIABLES.md + // https://tauri.app/2/reference/environment-variables/ envPrefix: ['VITE_', 'TAURI_'], server: { // Tauri requires a consistent port 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. + + From 8ce192ab4c1ed58eb7c77ef48e27275baaeee634 Mon Sep 17 00:00:00 2001 From: Lorenzo Lewis Date: Sat, 2 Sep 2023 20:10:12 +0100 Subject: [PATCH 41/41] Update src/content/docs/2/guide/frontend/trunk.mdx Co-authored-by: Simon Hyll --- src/content/docs/2/guide/frontend/trunk.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/docs/2/guide/frontend/trunk.mdx b/src/content/docs/2/guide/frontend/trunk.mdx index f2f089cdb2..f338afb14a 100644 --- a/src/content/docs/2/guide/frontend/trunk.mdx +++ b/src/content/docs/2/guide/frontend/trunk.mdx @@ -17,6 +17,7 @@ You will need to use `cargo install --git https://github.com/amrbashir/trunk` wh - 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