diff --git a/src/content/docs/2/guide/develop.mdx b/src/content/docs/2/guide/develop.mdx index 2b82a7c7f6f..162c5ed8bfa 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 00000000000..1b0c93ee55f --- /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 00000000000..d8cf5952ef3 --- /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 00000000000..edc20d7cbd1 --- /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 00000000000..777ea0ab705 --- /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 00000000000..667ad07e0a7 --- /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 00000000000..7bf302a0d31 --- /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 00000000000..54ef3c0ae6b --- /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.