sveltekit-capacitor Svelte Themes

Sveltekit Capacitor

Sveltekit + Capacitor Basic Template

Boilerplate code for basic capacitor integration. Following this guide you will be able to build and install your application on any device.

Setup

Follow those steps in order

  1. Install the dependencies
npm install // You can always use pnpm for faster results
  1. Build
npm run build
  1. Add your Capacitor platform
npm exec cap add android  // (or ios)
  1. Open your platform editor
npm exec cap open android
npm exec cap open ios

Hot Reload

  1. Uncomment server property in capacitor.config.ts

  2. Change the URL to your device's IP. To find your device IP run ipconfig.

  3. Sync with your android/ios folder

npm exec cap sync
  1. Run your dev server
npm run dev

Now you just need to open your app platform (Android Studio, XCode etc) and rebuild and run the app. Try writing something to +page.svelte and it should automatically appear in your device.

  • You need to have an emulator/device connected to adb
  • Your device has to be connected to the same Wi-Fi network as your workstation.

Important files

vite.config.ts Here you can change the port the server will be serving to and enable/disable https.

capacitor.config.ts Here you can change the IP the application will watch during development. You also control the app name, ID and build folder.

Other

  • Remember to change the name and ID of your application
  • Whenever you want to sync your web project with the devices, run
npm exec cap sync

Top categories

Loading Svelte Themes