tauri-apps/archived-tauri-docs
1
0
Fork 0
mirror of https://github.com/tauri-apps/tauri-docs.git synced 2026-01-31 00:35:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

[ci] format

Browse Source
This commit is contained in:
simonhyll
2024-05-25 19:44:13 +00:00
committed by tauri-bot
parent a55f4df5fe
commit 9b5f06cbb9
5 changed files with 190 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/content/docs/start/frontend/leptos.mdx
View File

@@ -5,7 +5,6 @@ tableOfContents:
maxHeadingLevel: 5
---
import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
import CommandTabs from '@components/CommandTabs.astro';
@@ -18,44 +17,43 @@ Leptos is a Rust based web framework. You can read more about Leptos on their [o
- Use `serve.ws_protocol = "ws"` so that the hot-reload websocket can connect properly 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
<Steps>
1. ##### Update Tauri configuration
```json
// src-tauri/tauri.conf.json
{
"build": {
"beforeDevCommand": "trunk serve",
"devUrl": "http://localhost:1420",
"beforeBuildCommand": "trunk build",
"frontendDist": "../dist"
},
"app": {
"withGlobalTauri": true
}
}
```
```json
// src-tauri/tauri.conf.json
{
"build": {
"beforeDevCommand": "trunk serve",
"devUrl": "http://localhost:1420",
"beforeBuildCommand": "trunk build",
"frontendDist": "../dist"
},
"app": {
"withGlobalTauri": true
}
}
```
1. ##### Update Trunk configuration:
```toml
// Trunk.toml
[build]
target = "./index.html"
```toml
// Trunk.toml
[build]
target = "./index.html"
[watch]
ignore = ["./src-tauri"]
[watch]
ignore = ["./src-tauri"]
[serve]
address = "0.0.0.0"
port = 1420
open = false
ws_protocol = "ws"
[serve]
address = "0.0.0.0"
port = 1420
open = false
ws_protocol = "ws"
```
```
</Steps>

141
src/content/docs/start/frontend/nextjs.mdx
View File

@@ -22,92 +22,93 @@ Next.js is a meta framework for React. Learn more about Next.js at https://nextj
<Steps>
1. ##### Install `internal-ip` version 7 for mobile development
Version 8.0.0 does **not** work!
<CommandTabs
npm="npm install --save-dev internal-ip@7.0.0"
yarn="yarn add -D internal-ip@7.0.0"
pnpm="pnpm add -D internal-ip@7.0.0"
/>
Version 8.0.0 does **not** work!
<CommandTabs
npm="npm install --save-dev internal-ip@7.0.0"
yarn="yarn add -D internal-ip@7.0.0"
pnpm="pnpm add -D internal-ip@7.0.0"
/>
1. ##### Update Tauri configuration
<Tabs>
<TabItem label="npm">
<Tabs>
<TabItem label="npm">
```json
// src-tauri/tauri.conf.json
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devUrl": "http://localhost:3000",
"frontendDist": "../dist"
}
}
```
```json
// src-tauri/tauri.conf.json
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devUrl": "http://localhost:3000",
"frontendDist": "../dist"
}
}
```
</TabItem>
<TabItem label="yarn">
</TabItem>
<TabItem label="yarn">
```json
// src-tauri/tauri.conf.json
{
"build": {
"beforeDevCommand": "yarn dev",
"beforeBuildCommand": "yarn generate",
"devUrl": "http://localhost:3000",
"frontendDist": "../dist"
}
}
```
```json
// src-tauri/tauri.conf.json
{
"build": {
"beforeDevCommand": "yarn dev",
"beforeBuildCommand": "yarn generate",
"devUrl": "http://localhost:3000",
"frontendDist": "../dist"
}
}
```
</TabItem>
<TabItem label="pnpm">
</TabItem>
<TabItem label="pnpm">
```json
// src-tauri/tauri.conf.json
{
"build": {
"beforeDevCommand": "pnpm dev",
"beforeBuildCommand": "pnpm generate",
"devUrl": "http://localhost:3000",
"frontendDist": "../dist"
}
}
```
```json
// src-tauri/tauri.conf.json
{
"build": {
"beforeDevCommand": "pnpm dev",
"beforeBuildCommand": "pnpm generate",
"devUrl": "http://localhost:3000",
"frontendDist": "../dist"
}
}
```
</TabItem>
</Tabs>
</TabItem>
</Tabs>
1. ##### Update Next.js configuration
```ts
// next.conf.mjs
/** @type {import('next').NextConfig} */
const isProd = process.env.NODE_ENV === 'production';
```ts
// next.conf.mjs
/** @type {import('next').NextConfig} */
const isProd = process.env.NODE_ENV === 'production';
let internalHost = null;
let internalHost = null;
if (!isProd) {
const { internalIpV4 } = await import('internal-ip');
internalHost = await internalIpV4();
}
if (!isProd) {
const { internalIpV4 } = await import('internal-ip');
internalHost = await internalIpV4();
}
const nextConfig = {
// Ensure Next.js uses SSG instead of SSR
// https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
output: 'export',
// Note: This feature is required to use the Next.js Image component in SSG mode.
// See https://nextjs.org/docs/messages/export-image-api for different workarounds.
images: {
unoptimized: true,
},
// Configure assetPrefix or else the server won't properly resolve your assets.
assetPrefix: isProd ? null : `http://${internalHost}:3000`,
};
const nextConfig = {
// Ensure Next.js uses SSG instead of SSR
// https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
output: 'export',
// Note: This feature is required to use the Next.js Image component in SSG mode.
// See https://nextjs.org/docs/messages/export-image-api for different workarounds.
images: {
unoptimized: true,
},
// Configure assetPrefix or else the server won't properly resolve your assets.
assetPrefix: isProd ? null : `http://${internalHost}:3000`,
};
export default nextConfig;
```
export default nextConfig;
```
</Steps>

6
src/content/docs/start/frontend/nuxt.mdx
View File

@@ -22,10 +22,10 @@ Nuxt is a meta framework for Vue. Learn more about Nuxt at https://nuxt.com. Thi
<Steps>
1. ##### Update Tauri configuration
1. ##### Update Tauri configuration
<Tabs>
<TabItem label="npm">
<TabItem label="npm">
```json
// tauri.conf.json
@@ -73,7 +73,7 @@ Nuxt is a meta framework for Vue. Learn more about Nuxt at https://nuxt.com. Thi
</Tabs>
1. ##### Update Nuxt configuration
1. ##### Update Nuxt configuration
```ts
export default defineNuxtConfig({

136
src/content/docs/start/frontend/sveltekit.mdx
View File

@@ -22,94 +22,94 @@ SvelteKit is a meta framework for Svelte. Learn more about SvelteKit at https://
1. ##### Install `@sveltejs/adapter-static`
<CommandTabs
npm="npm install --save-dev @sveltejs/adapter-static"
yarn="yarn add -D @sveltejs/adapter-static"
pnpm="pnpm add -D @sveltejs/adapter-static"
/>
<CommandTabs
npm="npm install --save-dev @sveltejs/adapter-static"
yarn="yarn add -D @sveltejs/adapter-static"
pnpm="pnpm add -D @sveltejs/adapter-static"
/>
1. ##### Update Tauri configuration
<Tabs>
<TabItem label="npm">
<Tabs>
<TabItem label="npm">
```json
// tauri.conf.json
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devUrl": "http://localhost:5173",
"frontendDist": "../build"
}
}
```
```json
// tauri.conf.json
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devUrl": "http://localhost:5173",
"frontendDist": "../build"
}
}
```
</TabItem>
<TabItem label="yarn">
</TabItem>
<TabItem label="yarn">
```json
// tauri.conf.json
{
"build": {
"beforeDevCommand": "yarn dev",
"beforeBuildCommand": "yarn build",
"devUrl": "http://localhost:5173",
"frontendDist": "../build"
}
}
```
```json
// tauri.conf.json
{
"build": {
"beforeDevCommand": "yarn dev",
"beforeBuildCommand": "yarn build",
"devUrl": "http://localhost:5173",
"frontendDist": "../build"
}
}
```
</TabItem>
<TabItem label="pnpm">
</TabItem>
<TabItem label="pnpm">
```json
// tauri.conf.json
{
"build": {
"beforeDevCommand": "pnpm dev",
"beforeBuildCommand": "pnpm build",
"devUrl": "http://localhost:5173",
"frontendDist": "../build"
}
}
```
```json
// tauri.conf.json
{
"build": {
"beforeDevCommand": "pnpm dev",
"beforeBuildCommand": "pnpm build",
"devUrl": "http://localhost:5173",
"frontendDist": "../build"
}
}
```
</TabItem>
</Tabs>
</TabItem>
</Tabs>
1. ##### Update SvelteKit configuration:
```js title="svelte.config.js" {1}
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
```js title="svelte.config.js" {1}
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
adapter: adapter(),
},
};
kit: {
adapter: adapter(),
},
};
export default config;
```
export default config;
```
1. ##### Disable SSR
Lastly, we need to disable SSR and enable prerendering by adding a root `+layout.ts` file (or `+layout.js` if you are not using TypeScript) with these contents:
Lastly, we need to disable SSR and enable prerendering by adding a root `+layout.ts` file (or `+layout.js` if you are not using TypeScript) with these contents:
```ts
// src/routes/+layout.ts
export const prerender = true;
export const ssr = false;
```
```ts
// src/routes/+layout.ts
export const prerender = true;
export const ssr = false;
```
Note that `static-adapter` doesn't require you to disable SSR for the whole app but it makes it possible to use APIs that depend on the global window object (like Tauri's API) without [Client-side checks](https://kit.svelte.dev/docs/faq#how-do-i-use-x-with-sveltekit-how-do-i-use-a-client-side-only-library-that-depends-on-document-or-window).
Note that `static-adapter` doesn't require you to disable SSR for the whole app but it makes it possible to use APIs that depend on the global window object (like Tauri's API) without [Client-side checks](https://kit.svelte.dev/docs/faq#how-do-i-use-x-with-sveltekit-how-do-i-use-a-client-side-only-library-that-depends-on-document-or-window).
Furthermore, if you prefer Single-Page Application (SPA) mode over SSG, you can change the adapter configurations and `+layout.ts` according to the [adapter docs](https://kit.svelte.dev/docs/single-page-apps).
Furthermore, if you prefer Single-Page Application (SPA) mode over SSG, you can change the adapter configurations and `+layout.ts` according to the [adapter docs](https://kit.svelte.dev/docs/single-page-apps).
</Steps>

44
src/content/docs/start/frontend/trunk.mdx
View File

@@ -23,31 +23,31 @@ Trunk is a WASM web application bundler for Rust. Learn more about Trunk at http
1. ##### Update Tauri configuration
```json
// tauri.conf.json
{
"build": {
"beforeDevCommand": "trunk serve",
"beforeBuildCommand": "trunk build",
"devUrl": "http://localhost:8080",
"frontendDist": "../dist"
},
"app": {
"withGlobalTauri": true
}
}
```
```json
// tauri.conf.json
{
"build": {
"beforeDevCommand": "trunk serve",
"beforeBuildCommand": "trunk build",
"devUrl": "http://localhost:8080",
"frontendDist": "../dist"
},
"app": {
"withGlobalTauri": true
}
}
```
1. ##### Update Trunk configuration
```toml
# Trunk.toml
[watch]
ignore = ["./src-tauri"]
```toml
# Trunk.toml
[watch]
ignore = ["./src-tauri"]
[serve]
address = "0.0.0.0"
ws_protocol = "ws"
```
[serve]
address = "0.0.0.0"
ws_protocol = "ws"
```
</Steps>