Skip to main content

Configuration

Currently, Tauri Mobile support is only available on the 2.0.0 alpha tracks, so the main tauri build tools will not produce a project that supports it. You'll need to update a few dependencies to get started.

Make sure to update the CLI, API, and core Cargo dependencies to the 2.0.0-alpha.0 release (or later). You can update the CLI and API dependencies here:

note

Alpha builds are updated regularly while this documentation may fall behind. To see the newest version numbers, check the Tauri Releases on GitHub

npm install @tauri-apps/cli@next @tauri-apps/api@next

Additionally, all projects need to update the core Cargo dependencies, by running the following in the src-tauri folder:

cargo add tauri@2.0.0-alpha.0
cargo add tauri-build@2.0.0-alpha.0 --build

Frontend Configuration​

To develop mobile Tauri applications, your frontend must serve the assets listening on your public network address. The network address can be found using the internal-ip NPM:

npm install --save-dev internal-ip

Then you need to configure your framework to use the 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.

vite.config.js
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.

next.config.js
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:

webpack.config.js
export default {
  devServer: {
    host: 'local-ipv4',
  },
}