### Project Setup and Initial Dependencies

Source: https://github.com/kesc23/sveltekit-capacitor/blob/master/README.md

This snippet shows the initial steps to clone the project repository and install its dependencies using npm. Ensure Node.js is installed before running these commands.

```bash
git clone "https://github.com/kesc23/sveltekit-capacitor.git"
cd sveltekit-capacitor
npm install
```

--------------------------------

### Run Local Development Server (No Capacitor)

Source: https://github.com/kesc23/sveltekit-capacitor/blob/master/README.md

Command to start the local SvelteKit development server without involving Capacitor. This is useful for testing the frontend in a web browser environment before integrating with native mobile features.

```bash
npm run dev:start
```

--------------------------------

### Start Development Server with Hot Reload (Bash)

Source: https://context7.com/kesc23/sveltekit-capacitor/llms.txt

Starts the Vite development server with hot module reloading enabled on all network interfaces. This allows for real-time updates on connected devices or emulators. The server is accessible locally and over the network.

```bash
# Start development server accessible on local network
npm run dev:start

# Expected output:
# VITE v4.4.2  ready in 523 ms
# ➜  Local:   http://localhost:5001/
# ➜  Network: http://192.168.1.100:5001/
```

--------------------------------

### Chrome DevTools Remote Debugging Setup

Source: https://context7.com/kesc23/sveltekit-capacitor/llms.txt

Provides instructions for enabling remote debugging of mobile applications using Chrome DevTools. This process involves connecting a device or emulator and accessing the `chrome://inspect` URL to open debugging tools.

```bash
# 1. Enable USB debugging on Android device
# 2. Connect device via USB or ensure emulator is running
# 3. Navigate to chrome://inspect#devices in any Chromium browser
# 4. Click "inspect" under your app to open DevTools

# Available in:
# - chrome://inspect#devices
# - edge://inspect#devices
# - brave://inspect#devices
# - vivaldi://inspect#devices

# Access console, network tab, element inspector, and performance profiler
# Rewrite HTML/CSS live without touching IDE
```

--------------------------------

### Build Production Application (Android)

Source: https://github.com/kesc23/sveltekit-capacitor/blob/master/README.md

Command to build a production-ready Android application. **Important:** Before running this command, remember to remove the `server.url` configuration from `capacitor.config.json` to ensure the app is built for release and not for live reload.

```bash
# Ensure server.url is removed from capacitor.config.json
npm run build:android
```

--------------------------------

### Build Production Application (iOS)

Source: https://github.com/kesc23/sveltekit-capacitor/blob/master/README.md

Command to generate a production-ready iOS application bundle. **Crucially**, ensure that the `server.url` entry is removed from `capacitor.config.json` prior to executing this command. This step is essential for a proper release build.

```bash
# Ensure server.url is removed from capacitor.config.json
npm run build:ios
```

--------------------------------

### Add Native Platform (Bash)

Source: https://context7.com/kesc23/sveltekit-capacitor/llms.txt

Initializes Capacitor platform folders, creating the necessary native project structure and configuration files for Android and iOS. This step is required before building or running native applications.

```bash
# Add Android platform (creates android/ directory with Gradle project)
npx cap add android

# Add iOS platform (creates ios/ directory with Xcode project)
npx cap add ios

# Output: Platform-specific directories with native build configurations
```

--------------------------------

### Develop with Live Reload on Device (iOS)

Source: https://github.com/kesc23/sveltekit-capacitor/blob/master/README.md

This snippet shows how to set up and run the SvelteKit + Capacitor project for live development on an iOS device or simulator. It requires updating `capacitor.config.json` with your workstation's IP address and executing `npm run dev:ios`. Your device must be on the same Wi-Fi network as your workstation.

```bash
# Modify capacitor.config.json server.url to "http://<your-workstation-ip>:5001"
npm run dev:ios
```

--------------------------------

### Add Capacitor Platform

Source: https://github.com/kesc23/sveltekit-capacitor/blob/master/README.md

Instructions to add a native platform (Android or iOS) to your Capacitor project. This command initializes the native project files required for building and running on devices.

```bash
npx cap add android
```

```bash
npx cap add ios
```

--------------------------------

### Develop with Live Reload on Device (Android)

Source: https://github.com/kesc23/sveltekit-capacitor/blob/master/README.md

This snippet demonstrates how to configure and run the SvelteKit + Capacitor project for live development on an Android device. It involves modifying `capacitor.config.json` to point to the workstation's IP address and using `npm run dev:android`. Ensure your device is connected via ADB and on the same Wi-Fi network.

```bash
# Modify capacitor.config.json server.url to "http://10.0.2.2:5001"
npm run dev:android
```

--------------------------------

### Develop for Android with Live Reload (Bash)

Source: https://context7.com/kesc23/sveltekit-capacitor/llms.txt

Launches the Vite development server and synchronizes with the Android project, opening Android Studio. This enables live code updates on an Android device or emulator connected to the development server.

```bash
# Start dev server and open Android Studio simultaneously
npm run dev:android

# This runs: vite --host --port 5001 & cap sync android && cap open android
# Device will load app from http://10.0.2.2:5001 (Android emulator localhost proxy)
```

--------------------------------

### Develop for iOS with Live Reload (Bash)

Source: https://context7.com/kesc23/sveltekit-capacitor/llms.txt

Launches the Vite development server and synchronizes with the iOS project, opening Xcode. This enables live code updates on an iOS device or simulator connected to the development server. Ensure `capacitor.config.ts` is configured with your workstation's IP.

```bash
# Configure capacitor.config.ts first - replace with your workstation IP
# server: { url: "http://169.254.0.1:5001", cleartext: true }

npm run dev:ios

# This runs: vite --host --port 5001 & cap sync ios && cap open ios
# Opens Xcode project with app loading from your workstation IP
```

--------------------------------

### Accessing Developer Tools (Chrome/Edge/Brave/Vivaldi)

Source: https://github.com/kesc23/sveltekit-capacitor/blob/master/README.md

Instructions on how to access the developer tools for debugging your Capacitor application on an Android device. This is achieved by navigating to specific `chrome://inspect#devices` URLs in a Chromium-based browser. It allows for inspecting elements, debugging JavaScript, and viewing console logs similar to web development.

```bash
chrome://inspect#devices
edge://inspect#devices
vivaldi://inspect#devices
brave://inspect#devices
```

--------------------------------

### Generate App Icons and Splash Screens (Bash)

Source: https://context7.com/kesc23/sveltekit-capacitor/llms.txt

Uses `cordova-res` to convert source images (icon.png, splash.png) into all required platform-specific icon and splash screen sizes. The generated assets are then copied to the respective native project directories.

```bash
# Place source images in resources/ directory:
# - icon.png (512x512 recommended)
# - splash.png (1920x1920 recommended)

# Generate and copy to iOS
cordova-res ios --skip-config --copy

# Generate and copy to Android
cordova-res android --skip-config --copy

# Output: Icons and splash screens generated in android/app/src/main/res/ and ios/App/Assets.xcassets/
```

--------------------------------

### Production Build for iOS (Bash)

Source: https://context7.com/kesc23/sveltekit-capacitor/llms.txt

Builds optimized static assets for the SvelteKit application and synchronizes them to the iOS project. It then opens Xcode for final compilation into an IPA. Ensure the `server.url` is removed from `capacitor.config.ts` before running.

```bash
# IMPORTANT: Remove server.url from capacitor.config.ts first!
npm run build:ios

# This runs: vite build && cap sync ios && cap open ios
# Output: build/ directory with static assets synced to ios/App/public/
```

--------------------------------

### Production Build for Android (Bash)

Source: https://context7.com/kesc23/sveltekit-capacitor/llms.txt

Builds optimized static assets for the SvelteKit application and synchronizes them to the Android project. It then opens Android Studio for final compilation into an APK or AAB. Ensure the `server.url` is removed from `capacitor.config.ts` before running.

```bash
# IMPORTANT: Remove server.url from capacitor.config.ts first!
npm run build:android

# This runs: vite build && cap sync android && cap open android
# Output: build/ directory with static assets synced to android/app/src/main/assets/public/
```

--------------------------------

### Configure SvelteKit for Static Adapter

Source: https://context7.com/kesc23/sveltekit-capacitor/llms.txt

Sets up SvelteKit to use the static adapter, generating pre-rendered HTML files suitable for Capacitor bundling. This ensures all assets are static and can be easily included in the native mobile application.

```javascript
// svelte.config.js
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

const config = {
	kit: {
		adapter: adapter() // Generates static files in build/ directory
	},
	preprocess: vitePreprocess()
};

export default config;
```

--------------------------------

### Generate and Copy Native Splash Screen and App Icon

Source: https://github.com/kesc23/sveltekit-capacitor/blob/master/README.md

Commands to generate splash screen and app icon assets for both iOS and Android platforms using `cordova-res`. Ensure you have placed `icon.png` and `splash.png` (recommended sizes: 512x512 and 1920x1920 respectively) in the resources directory before running these commands.

```bash
cordova-res ios --skip-config --copy
```

```bash
cordova-res android --skip-config --copy
```

--------------------------------

### Enable Prerendering for SvelteKit Routes

Source: https://context7.com/kesc23/sveltekit-capacitor/llms.txt

Configures specific routes within a SvelteKit application to be prerendered during the build process. This is crucial for Capacitor as it requires static HTML files for each page.

```javascript
// src/routes/+layout.js
export const prerender = true;

// This forces all child routes to be pre-rendered at build time
// Required for Capacitor as it needs static HTML files
```

--------------------------------

### Access Device APIs with Capacitor Plugins

Source: https://context7.com/kesc23/sveltekit-capacitor/llms.txt

Demonstrates how to interact with native device functionalities such as the camera and geolocation using Capacitor plugins. This code is designed to be used within Svelte components and leverages async/await for plugin operations.

```javascript
// Example: Using Capacitor plugins in a Svelte component
import { Camera } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';

// Take a photo
const takePicture = async () => {
	try {
		const image = await Camera.getPhoto({
			quality: 90,
			allowEditing: false,
			resultType: 'uri'
		});
		console.log('Photo URI:', image.webPath);
	} catch (error) {
		console.error('Camera error:', error);
	}
};

// Get current location
const getLocation = async () => {
	try {
		const coordinates = await Geolocation.getCurrentPosition();
		console.log('Lat:', coordinates.coords.latitude);
		console.log('Lng:', coordinates.coords.longitude);
	} catch (error) {
		console.error('Location error:', error);
	}
};
```

--------------------------------

### Basic Reactive Svelte Component

Source: https://context7.com/kesc23/sveltekit-capacitor/llms.txt

Illustrates a fundamental Svelte component for creating reactive UI elements within a mobile application screen. It includes basic script logic, template rendering, and scoped CSS.

```svelte
<!-- src/routes/+page.svelte -->
<script>
	import { onMount } from 'svelte';

	let message = 'Welcome!';

	onMount(() => {
		// Access Capacitor plugins here
		console.log('Page mounted on device');
	});
</script>

<h1>{message}</h1>
<img src="/svelte_cap.png" alt="Logo" style="object-fit: scale-down; max-width: 100%; padding: 8px;"/>

<style>
	h1 {
		text-align: center;
		overflow-wrap: break-word;
	}
</style>
```

--------------------------------

### Capacitor Configuration (TypeScript)

Source: https://context7.com/kesc23/sveltekit-capacitor/llms.txt

Defines the Capacitor native bridge configuration, application identity, and development server settings. This file is crucial for platform builds and defining how the web app integrates with native capabilities.

```typescript
// capacitor.config.ts
import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
	appId: 'com.example.myapp',
	appName: 'My Mobile App',
	webDir: 'build',
	bundledWebRuntime: false,
	plugins: {
		"SplashScreen": {
			"launchShowDuration": 0
		}
	},
	// Remove server section for production builds
	server: {
		// Android: use http://10.0.2.2:5001 (works by default)
		// iOS: use http://YOUR_IP:5001 (find IP with ifconfig)
		"url": "http://10.0.2.2:5001",
		"cleartext": true
	}
};

export default config;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.