mirror of
https://github.com/tauri-apps/tauri-docs.git
synced 2026-01-31 00:35:16 +01:00
[ci] format
This commit is contained in:
tauri-bot
@@ -21,94 +21,98 @@ 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
|
||||
1. ##### Install `internal-ip` version 7 for mobile development
|
||||
|
||||
Version 8.0.0 does **not** work!
|
||||
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"
|
||||
/>
|
||||
<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
|
||||
1. ##### Update Tauri configuration
|
||||
|
||||
<Tabs>
|
||||
<TabItem label="npm">
|
||||
<Tabs>
|
||||
|
||||
```json
|
||||
// src-tauri/tauri.conf.json
|
||||
{
|
||||
"build": {
|
||||
"beforeDevCommand": "npm run dev",
|
||||
"beforeBuildCommand": "npm run build",
|
||||
"devUrl": "http://localhost:3000",
|
||||
"frontendDist": "../dist"
|
||||
}
|
||||
}
|
||||
```
|
||||
<TabItem label="npm">
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="yarn">
|
||||
```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": "yarn dev",
|
||||
"beforeBuildCommand": "yarn generate",
|
||||
"devUrl": "http://localhost:3000",
|
||||
"frontendDist": "../dist"
|
||||
}
|
||||
}
|
||||
```
|
||||
</TabItem>
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="pnpm">
|
||||
<TabItem label="yarn">
|
||||
|
||||
```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": "yarn dev",
|
||||
"beforeBuildCommand": "yarn generate",
|
||||
"devUrl": "http://localhost:3000",
|
||||
"frontendDist": "../dist"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
</TabItem>
|
||||
|
||||
1. ##### Update Next.js configuration
|
||||
<TabItem label="pnpm">
|
||||
|
||||
```ts
|
||||
// next.conf.mjs
|
||||
/** @type {import('next').NextConfig} */
|
||||
const isProd = process.env.NODE_ENV === 'production';
|
||||
```json
|
||||
// src-tauri/tauri.conf.json
|
||||
{
|
||||
"build": {
|
||||
"beforeDevCommand": "pnpm dev",
|
||||
"beforeBuildCommand": "pnpm generate",
|
||||
"devUrl": "http://localhost:3000",
|
||||
"frontendDist": "../dist"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
let internalHost = null;
|
||||
</TabItem>
|
||||
|
||||
if (!isProd) {
|
||||
const { internalIpV4 } = await import('internal-ip');
|
||||
internalHost = await internalIpV4();
|
||||
}
|
||||
</Tabs>
|
||||
|
||||
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`,
|
||||
};
|
||||
1. ##### Update Next.js configuration
|
||||
|
||||
export default nextConfig;
|
||||
```
|
||||
```ts
|
||||
// next.conf.mjs
|
||||
/** @type {import('next').NextConfig} */
|
||||
const isProd = process.env.NODE_ENV === 'production';
|
||||
|
||||
let internalHost = null;
|
||||
|
||||
if (!isProd) {
|
||||
const { internalIpV4 } = await import('internal-ip');
|
||||
internalHost = await internalIpV4();
|
||||
}
|
||||
|
||||
const nextConfig = {
|
||||
// Ensure Next.js uses SSG instead of SSR
|
||||
// https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
|
||||
output: 'export',
|
||||
// Note: This feature is required to use the Next.js Image component in SSG mode.
|
||||
// See https://nextjs.org/docs/messages/export-image-api for different workarounds.
|
||||
images: {
|
||||
unoptimized: true,
|
||||
},
|
||||
// Configure assetPrefix or else the server won't properly resolve your assets.
|
||||
assetPrefix: isProd ? null : `http://${internalHost}:3000`,
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -24,54 +24,55 @@ Nuxt is a meta framework for Vue. Learn more about Nuxt at https://nuxt.com. Thi
|
||||
|
||||
1. ##### Update Tauri configuration
|
||||
|
||||
<Tabs>
|
||||
<TabItem label="npm">
|
||||
<Tabs>
|
||||
|
||||
```json
|
||||
// tauri.conf.json
|
||||
{
|
||||
"build": {
|
||||
"beforeDevCommand": "npm run dev",
|
||||
"beforeBuildCommand": "npm run generate",
|
||||
"devUrl": "http://localhost:3000",
|
||||
"frontendDist": "../dist"
|
||||
}
|
||||
}
|
||||
```
|
||||
<TabItem label="npm">
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="yarn">
|
||||
```json
|
||||
// tauri.conf.json
|
||||
{
|
||||
"build": {
|
||||
"beforeDevCommand": "npm run dev",
|
||||
"beforeBuildCommand": "npm run generate",
|
||||
"devUrl": "http://localhost:3000",
|
||||
"frontendDist": "../dist"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
// tauri.conf.json
|
||||
{
|
||||
"build": {
|
||||
"beforeDevCommand": "yarn dev",
|
||||
"beforeBuildCommand": "yarn generate",
|
||||
"devUrl": "http://localhost:3000",
|
||||
"frontendDist": "../dist"
|
||||
}
|
||||
}
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem label="yarn">
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="pnpm">
|
||||
```json
|
||||
// tauri.conf.json
|
||||
{
|
||||
"build": {
|
||||
"beforeDevCommand": "yarn dev",
|
||||
"beforeBuildCommand": "yarn generate",
|
||||
"devUrl": "http://localhost:3000",
|
||||
"frontendDist": "../dist"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
// tauri.conf.json
|
||||
{
|
||||
"build": {
|
||||
"beforeDevCommand": "pnpm dev",
|
||||
"beforeBuildCommand": "pnpm generate",
|
||||
"devUrl": "http://localhost:3000",
|
||||
"frontendDist": "../dist"
|
||||
}
|
||||
}
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem label="pnpm">
|
||||
|
||||
</TabItem>
|
||||
```json
|
||||
// tauri.conf.json
|
||||
{
|
||||
"build": {
|
||||
"beforeDevCommand": "pnpm dev",
|
||||
"beforeBuildCommand": "pnpm generate",
|
||||
"devUrl": "http://localhost:3000",
|
||||
"frontendDist": "../dist"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</Tabs>
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
1. ##### Update Nuxt configuration
|
||||
|
||||
|
||||
@@ -20,96 +20,100 @@ SvelteKit is a meta framework for Svelte. Learn more about SvelteKit at https://
|
||||
|
||||
<Steps>
|
||||
|
||||
1. ##### Install `@sveltejs/adapter-static`
|
||||
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
|
||||
1. ##### Update Tauri configuration
|
||||
|
||||
<Tabs>
|
||||
<TabItem label="npm">
|
||||
<Tabs>
|
||||
|
||||
```json
|
||||
// tauri.conf.json
|
||||
{
|
||||
"build": {
|
||||
"beforeDevCommand": "npm run dev",
|
||||
"beforeBuildCommand": "npm run build",
|
||||
"devUrl": "http://localhost:5173",
|
||||
"frontendDist": "../build"
|
||||
}
|
||||
}
|
||||
```
|
||||
<TabItem label="npm">
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="yarn">
|
||||
```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": "yarn dev",
|
||||
"beforeBuildCommand": "yarn build",
|
||||
"devUrl": "http://localhost:5173",
|
||||
"frontendDist": "../build"
|
||||
}
|
||||
}
|
||||
```
|
||||
</TabItem>
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="pnpm">
|
||||
<TabItem label="yarn">
|
||||
|
||||
```json
|
||||
// tauri.conf.json
|
||||
{
|
||||
"build": {
|
||||
"beforeDevCommand": "pnpm dev",
|
||||
"beforeBuildCommand": "pnpm 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>
|
||||
</Tabs>
|
||||
</TabItem>
|
||||
|
||||
1. ##### Update SvelteKit configuration:
|
||||
<TabItem label="pnpm">
|
||||
|
||||
```js title="svelte.config.js" {1}
|
||||
import adapter from '@sveltejs/adapter-static';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
```json
|
||||
// tauri.conf.json
|
||||
{
|
||||
"build": {
|
||||
"beforeDevCommand": "pnpm dev",
|
||||
"beforeBuildCommand": "pnpm build",
|
||||
"devUrl": "http://localhost:5173",
|
||||
"frontendDist": "../build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
</TabItem>
|
||||
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
},
|
||||
};
|
||||
</Tabs>
|
||||
|
||||
export default config;
|
||||
```
|
||||
1. ##### Update SvelteKit configuration:
|
||||
|
||||
1. ##### Disable SSR
|
||||
```js title="svelte.config.js" {1}
|
||||
import adapter from '@sveltejs/adapter-static';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
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:
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
|
||||
```ts
|
||||
// src/routes/+layout.ts
|
||||
export const prerender = true;
|
||||
export const ssr = false;
|
||||
```
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
},
|
||||
};
|
||||
|
||||
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).
|
||||
export default config;
|
||||
```
|
||||
|
||||
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).
|
||||
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:
|
||||
|
||||
```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).
|
||||
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user