Code Monkey home page Code Monkey logo

sveltekit-cordova-adapter's Introduction

sveltekit-cordova-adapter logo

๐Ÿ”Œ sveltekit-cordova-adapter

v0.3.1 License: MIT Language: TypeScript Framework: SvelteKit ECMAScript: 2019 Discord Server

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!

Donate Paypal Donate Ko-Fi Donate GitHub Sponsors Donate Patreon Donate Bitcoin Donate Ethereum

๐Ÿ“Ž Menu

๐Ÿ’ก 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

sveltekit-cordova-adapter

๐Ÿš€ Setup (Cordova)

  1. Create new SvelteKit 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:
import adapter from "@ptkdev/sveltekit-cordova-adapter";

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			strict: false,
			platform: "cordova",
		}),
	},
};
  1. Run npm run build (โš ๏ธ IMPORTANT: Only pages with export const prerender = true; are supported)
  2. Create new Cordova Project
  3. Copy build content from sveltekit project and paste in www folder of cordova project
  4. Run Cordova project with cordova run ios or cordova run android

๐Ÿš€ Setup (Capacitor)

  1. Create new SvelteKit 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:
import adapter from "@ptkdev/sveltekit-cordova-adapter";

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			strict: false,
			platform: "capacitor",
		}),
	},
};
  1. Run npm run build (โš ๏ธ IMPORTANT: Only pages with export const prerender = true; are supported)
  2. Create new Capacitor Project
  3. Copy build content from sveltekit project and paste in dist folder of ionic capacitor project
  4. 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
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!

๐Ÿฆ„ Other Projects

๐Ÿ’ซ 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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.