@ptkdev/sveltekit-cordova-adapter
Version:
Adapter for SvelteKit apps that prerenders your entire site as a collection of static files for use with Cordova or Ionic Capacitor (android/ios)
198 lines (137 loc) • 18.3 kB
Markdown
[](https://github.com/ptkdev/sveltekit-cordova-adapter)
# 🔌 sveltekit-cordova-adapter
<!-- all-shields/header-badges:START -->
[](https://github.com/ptkdev/sveltekit-cordova-adapter/blob/main/CHANGELOG.md) [](https://www.npmjs.com/package/@ptkdev/sveltekit-cordova-adapter) [](https://github.com/ptkdev/sveltekit-cordova-adapter/blob/main/LICENSE.md) [](https://www.typescriptlang.org/) [](https://kit.svelte.dev/) [](https://github.com/tc39/ecma262) [](https://discord.ptkdev.io)
<!-- all-shields/header-badges:END -->
[Adapter](https://kit.svelte.dev/docs/adapters) for SvelteKit apps that prerenders your entire site as a collection of static files for use with [Cordova](https://cordovajs.org) / [Capacitor](https://capacitorjs.com/). Create your mobile apps android/ios with SvelteKit and Apache Cordova or Ionic Capacitor.
This is a fork of official [sveltekit-static-adapter](https://kit.svelte.dev/docs/adapter-static)
## 🎁 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!**
<!-- all-shields/sponsors-badges:START -->
[](https://www.paypal.me/ptkdev) [](https://ko-fi.com/ptkdev) [](https://github.com/sponsors/ptkdev) [](https://www.patreon.com/join/ptkdev) [](https://ptk.dev/img/icons/menu/bitcoin_wallet.png) [](https://ptk.dev/img/icons/menu/ethereum_wallet.png)
<!-- all-shields/sponsors-badges:END -->
## 📎 Menu
- 💡 [Features](#-features)
- 👔 [Screenshot](#-screenshot)
- 🚀 [Setup (Cordova)](#-setup-cordova)
- 🚀 [Setup (Capacitor)](#-setup-capacitor)
- 🧰 [Options](#-options)
- 📚 [Documentation](#-documentation)
- 👨💻 [Contributing](#-contributing)
- 🐛 [Known Bugs](https://github.com/ptkdev/sveltekit-cordova-adapter/issues?q=is%3Aopen+is%3Aissue+label%3Abug)
- 🍻 Community:
- <img src="https://raw.githubusercontent.com/ptkdev/sveltekit-cordova-adapter/main/.github/assets/social_telegram.png" height="18px"> Telegram ([🇬🇧 English](http://t.me/ptkdev_support) | [🇮🇹 Italian](http://t.me/ptkdev_support_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
[](https://raw.githubusercontent.com/ptkdev/sveltekit-cordova-adapter/main/.github/assets/screenshot.png)
## 🚀 Setup (Cordova)
1. Create [new SvelteKit Project](https://kit.svelte.dev/docs/creating-a-project)
2. Install this adapter `npm install @ptkdev/sveltekit-cordova-adapter --save-dev`
3. Edit `svelte.config.js` and replace default adapter with cordova-adapter:
```js
import adapter from "@ptkdev/sveltekit-cordova-adapter";
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter({
strict: false,
platform: "cordova",
}),
},
};
```
4. Run `npm run build` (⚠️ IMPORTANT: Only pages with `export const prerender = true;` are supported)
5. Create [new Cordova Project](https://cordova.apache.org/)
6. Copy `build` content from sveltekit project and paste in `www` folder of cordova project
7. Run Cordova project with `cordova run ios` or `cordova run android`
## 🚀 Setup (Capacitor)
1. Create [new SvelteKit Project](https://kit.svelte.dev/docs/creating-a-project)
2. Install this adapter `npm install @ptkdev/sveltekit-cordova-adapter --save-dev`
3. Edit `svelte.config.js` and replace default adapter with cordova-adapter:
```js
import adapter from "@ptkdev/sveltekit-cordova-adapter";
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter({
strict: false,
platform: "capacitor",
}),
},
};
```
4. Run `npm run build` (⚠️ IMPORTANT: Only pages with `export const prerender = true;` are supported)
5. Create [new Capacitor Project](https://capacitorjs.com/docs/getting-started)
6. Copy `build` content from sveltekit project and paste in `dist` folder of ionic capacitor project
7. 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](https://kit.svelte.dev/docs/adapter-static) | | | |
| assets | See official [docs](https://kit.svelte.dev/docs/adapter-static) | | | |
| fallback | See official [docs](https://kit.svelte.dev/docs/adapter-static) | | | |
| precompress | See official [docs](https://kit.svelte.dev/docs/adapter-static) | | | |
| strict | See official [docs](https://kit.svelte.dev/docs/adapter-static) | | | |
| 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:
```js
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](https://www.paypal.me/ptkdev), [ko-fi](https://ko-fi.com/ptkdev), [github](https://github.com/sponsors/ptkdev) or [patreon](https://www.patreon.com/join/ptkdev) and send me [email](mailto:support@ptkdev.io) with your avatar and url.
[](https://api.ptkdev.io/backers/sponsor1.html) [](https://api.ptkdev.io/backers/sponsor2.html) [](https://api.ptkdev.io/backers/sponsor-kofi1.html) [](https://api.ptkdev.io/backers/sponsor-kofi2.html) [](https://api.ptkdev.io/backers/sponsor-kofi3.html) [](https://api.ptkdev.io/backers/sponsor3.html) [](https://api.ptkdev.io/backers/sponsor4.html) [](https://api.ptkdev.io/backers/sponsor5.html) [](https://api.ptkdev.io/backers/sponsor6.html) [](https://api.ptkdev.io/backers/sponsor7.html) [](https://api.ptkdev.io/backers/sponsor8.html) [](https://api.ptkdev.io/backers/sponsor9.html) [](https://api.ptkdev.io/backers/sponsor10.html) [](https://api.ptkdev.io/backers/sponsor11.html) [](https://api.ptkdev.io/backers/sponsor12.html) [](https://api.ptkdev.io/backers/sponsor13.html) [](https://api.ptkdev.io/backers/sponsor14.html) [](https://api.ptkdev.io/backers/sponsor15.html) [](https://api.ptkdev.io/backers/backer1.html) [](https://api.ptkdev.io/backers/backer2.html) [](https://api.ptkdev.io/backers/backer3.html) [](https://api.ptkdev.io/backers/backer4.html) [](https://api.ptkdev.io/backers/backer5.html) [](https://api.ptkdev.io/backers/backer6.html) [](https://api.ptkdev.io/backers/backer7.html) [](https://api.ptkdev.io/backers/backer8.html) [](https://api.ptkdev.io/backers/backer9.html) [](https://api.ptkdev.io/backers/backer10.html) [](https://api.ptkdev.io/backers/backer11.html) [](https://api.ptkdev.io/backers/backer12.html) [](https://api.ptkdev.io/backers/backer13.html) [](https://api.ptkdev.io/backers/backer14.html) [](https://api.ptkdev.io/backers/backer15.html) [](https://api.ptkdev.io/backers/backer16.html) [](https://api.ptkdev.io/backers/backer17.html) [](https://api.ptkdev.io/backers/backer18.html) [](https://api.ptkdev.io/backers/backer19.html) [](https://api.ptkdev.io/backers/backer20.html) [](https://api.ptkdev.io/backers/backer21.html) [](https://api.ptkdev.io/backers/backer22.html) [](https://api.ptkdev.io/backers/backer23.html) [](https://api.ptkdev.io/backers/backer24.html) [](https://api.ptkdev.io/backers/backer25.html) [](https://api.ptkdev.io/backers/backer26.html) [](https://api.ptkdev.io/backers/backer27.html) [](https://api.ptkdev.io/backers/backer28.html) [](https://api.ptkdev.io/backers/backer29.html)
## 👨💻 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](https://allcontributors.org/docs/en/emoji-key)):
<!-- ALL-CONTRIBUTORS-LIST:START -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tbody>
<tr>
<td align="center" valign="top" width="16.66%"><a href="https://ptk.dev"><img src="https://avatars1.githubusercontent.com/u/442844?v=4?s=100" width="100px;" alt="Patryk Rzucidło"/><br /><sub><b>Patryk Rzucidło</b></sub></a><br /><a href="https://github.com/ptkdev/ptkdev/sveltekit-cordova-adapter/commits?author=ptkdev" title="Code">💻</a> <a href="#translation-ptkdev" title="Translation">🌍</a> <a href="https://github.com/ptkdev/ptkdev/sveltekit-cordova-adapter/commits?author=ptkdev" title="Documentation">📖</a> <a href="https://github.com/ptkdev/ptkdev/sveltekit-cordova-adapter/issues?q=author%3Aptkdev" title="Bug reports">🐛</a></td>
</tr>
</tbody>
</table>
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
> 💰 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!
## 🦄 Other Projects
<!-- all-shields/projects-badges1:START -->
[](https://ptk.dev/)
<!-- all-shields/projects-badges1:END -->
<!-- all-shields/projects-badges2:START -->
[](https://github.com/ptkdev/ptkdev-logger) [](https://github.com/ptkdev/all-shields-cli) [](https://github.com/ptkdev/chrome-extension-aspectratio219) [](https://availableon.badge.ptkdev.io/) [](https://github.com/ptkdev/json-token-replace) [](https://github.com/ptkdev/eslint-plugin-snakecasejs)
<!-- all-shields/projects-badges2:END -->
<!-- all-shields/projects-badges3:START -->
[](https://github.com/ptkdev-components/webcomponent-instagram-widget) [](https://github.com/ptkdev-components/webcomponent-patreon-box) [](https://github.com/ptkdev-components/webcomponent-carousel-slideshow)
<!-- all-shields/projects-badges3:END -->
<!-- all-shields/projects-badges4:START -->
[](https://github.com/ptkdev/vscode-theme-dark-blood) [](https://t.me/gamebookchatbot) [](https://github.com/ptkdev?q=svelte) [](https://github.com/ptkdev?q=webcomponent) [](https://github.com/ptkdev?q=bot) [](https://github.com/ptkdev?q=node) [](https://meingifs.pics/) [](https://github.com/ptkdev/ptkdev-stickers#-install-free)
<!-- all-shields/projects-badges4:END -->
## 💫 License
- Code and Contributions have **MIT License**
- Images and logos have **CC BY-NC 4.0 License**
- Documentations and Translations have **CC BY 4.0 License**
###### Copyleft (c) 2022 [Patryk Rzucidło](https://ptk.dev) ([@PTKDev](https://twitter.com/ptkdev)) <[support@ptkdev.io](mailto:support@ptkdev.io)>