Small recipe to create a svelte kit app and package it for mobile (ios/android) with capacitor.
See https://kit.svelte.dev/docs/creating-a-project
npm create svelte@latest my-app
# Pick "skeleton project"
# Typescript and prettier are also pretty cool
cd my-app
npm install
npm run dev
Program your app. Minimal example: https://gist.github.com/bersling/33dd5afe071b3aa6b93a35d42b2afabc .
(1) Install the static adapter
npm install @sveltejs/adapter-static
(2) Use the following svelte.config.js
:
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter({
pages: 'dist',
assets: 'dist',
fallback: null,
precompress: false,
strict: true
})
}
};
export default config;
(3) Create a +layout.ts
file under ./src/routes/
with content:
export const prerender = true;
Verify your setup with npm run build
, which should succeed and create a dist
folder. Also, add dist
to your .gitignore
.
Add capacitor to project, see https://capacitorjs.com/
npm i @capacitor/core @capacitor/android @capacitor/ios
npm i -D @capacitor/cli
npx cap init
First, run
npx cap add android
Every time you make code changes, you then run npm run build && npx cap sync
to sync the changes to the android project. Execute that step now.
Install Android Studio if you haven't and open the project with npx cap open android
.
First, run
npx cap add ios
Then run
npx cap open ios
Don't forget to run npm run build && npx cap sync
on code changes.
Select a target device to test, or select build for any device and then hit "archive" to ship.
Take from here what's helpful to you.
Change meta tag in app.html
to
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" />
Prevents stuff like zooming in on double click.
In app.html
add a style tag with the content
<style>
* {
box-sizing: border-box;
/* disable text selection (svg icons are also text...) */
-webkit-user-select: none;
/* Safari */
-ms-user-select: none;
/* IE 10 and IE 11 */
user-select: none;
/* Standard syntax */
/* preventing the long press context menu, https://stackoverflow.com/a/56866766/3022127 */
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
/* preventing iOS tap highlight */
-webkit-tap-highlight-color: transparent;
/* Disable browser handling of all panning and zooming gestures, except for regular scrolling */
touch-action: pan-y;
}
</style>
In the app from above, on iOS it just looked weird. The font size calculation seems to be off. So here's a version that fixes this on iOS and shows you capacitors native
feature: https://gist.github.com/bersling/ebe95f7918b3169b3d36b0b13272daf9 .
Svelte Puzzle (https://github.com/bersling/sveltepuzzle) is a puzzle game built with Svelte for SvelteHack 2023. It shows how Svelte can be used together with Capacitor to build mobile apps for iOS and Android.
Toddler & Preschool Games is a full game I've developed with this setup and released to the app stores:
I didn't open source the code yet, it's pretty similar to Svelte Puzzle from above though.