Sveltekit Cordova Adapter

Adapter for building mobile apps with Svelte Kit and Apache Cordova or Ionic Capacitor

#apache-cordova #cordova #cordova-android #cordova-ios #mobile-app #svelte #svelte-cordova #svelte-mobile #sveltejs #sveltekit

Demo Download

🔌 sveltekit-cordova-adapter

Adapter for SvelteKit apps that prerenders your entire site as a collection of static files for use with Cordova / Capacitor. Create your mobile apps android/ios with SvelteKit and Apache Cordova or Ionic Capacitor.

This is a fork of official sveltekit-static-adapter

🎁 Support: Donate

This project is free, open source and I try to provide excellent free support. Why donate? I work on this project several hours in my spare time and try to keep it up to date and working. THANK YOU!

💡 Features
👔 Screenshot
🚀 Setup (Cordova)
🚀 Setup (Capacitor)
🧰 Options
📚 Documentation
👨‍💻 Contributing
🐛 Known Bugs
🍻 Community:
- Telegram (🇬🇧 English | 🇮🇹 Italian)

💡 Features

[✔️] Easy to use
[✔️] MIT License
[✔️] Make android app with svelte kit
[✔️] Make ios app with svelte kit
[✔️] Make mobile apps with svelte kit and apache cordova
[✔️] Make mobile apps with svelte kit and capacitor by ionic

👔 Screenshot

🚀 Setup (Cordova)

Create new SvelteKit Project
Install this adapter npm install @ptkdev/sveltekit-cordova-adapter --save-dev
Edit svelte.config.js and replace default adapter with cordova-adapter:

import adapter from "@ptkdev/sveltekit-cordova-adapter";

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter({
            strict: false,
            platform: "cordova",
        }),
    },
};

Run npm run build (⚠️ IMPORTANT: Only pages with export const prerender = true; are supported)
Create new Cordova Project
Copy build content from sveltekit project and paste in www folder of cordova project
Run Cordova project with cordova run ios or cordova run android

🚀 Setup (Capacitor)

Create new SvelteKit Project
Install this adapter npm install @ptkdev/sveltekit-cordova-adapter --save-dev
Edit svelte.config.js and replace default adapter with cordova-adapter:

import adapter from "@ptkdev/sveltekit-cordova-adapter";

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter({
            strict: false,
            platform: "capacitor",
        }),
    },
};

Run npm run build (⚠️ IMPORTANT: Only pages with export const prerender = true; are supported)
Create new Capacitor Project
Copy build content from sveltekit project and paste in dist folder of ionic capacitor project
Run Capacitor project with npx cap sync && npx cap run ios or npx cap sync && npx cap run android

🧰 Options

The adapter({ options }) parameters list:

Parameter	Description	Values	Default value	Available since
pages	See official docs
assets	See official docs
fallback	See official docs
precompress	See official docs
strict	See official docs
policy	Set meta-tag `content-security-policy`	String	Empty	v0.2.0
viewport	Set meta-tag `viewport`	String	`width=device-width, initial-scale=1.0, viewport-fit=cover`	v0.2.0
safearea	Set css safe area for iphone with notch or dynamic island	`true` / `false`	`true`	v0.2.0
platform	Compile optimization for cordova or capacitor	`cordova` / `capacitor`	`cordova`	v0.2.0

Example:

const config = {
    kit: {
        adapter: adapter({
            strict: false,
            policy: "default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;",
            viewport: `width=device-width`,
        }),
    },
};

📚 Documentation

Run npm run docs

👑 Backers and Sponsors

Thanks to all our backers! 🙏 Donate 3$ or more on paypal, ko-fi, github or patreon and send me email with your avatar and url.

👨‍💻 Contributing

I ❤️ contributions! I will happily accept your pull request! (IMPORTANT: Only to nightly branch!) Translations, grammatical corrections (GrammarNazi you are welcome! Yes my English is bad, sorry), etc... Do not be afraid, if the code is not perfect we will work together 👯 and remember to insert your name in .all-contributorsrc and package.json file.

Thanks goes to these wonderful people (emoji key):

_{Patryk Rzucidło}
💻 🌍 📖 🐛

💰 In the future, if the donations allow it, I would like to share some of the success with those who helped me the most. For me open source is share of code, share development knowledges and share donations!