If you're seeing this, you've probably already done this step. Congrats!
# create a new project in the current directory
npm create vite@latest my-app
Select Svelte
as Framework and SvelteKit
as variant
Select Skeleton project
as Svelte app template
Select Yes, using TypeScript syntax
Select Add ESLint for code linting
and Add Prettier for code formatting
cd my-test
npm install
Once you've created a project and installed dependencies with npm install
(or pnpm install
or yarn
), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
To create a production version of your app:
npm run build
You can preview the production build with npm run preview
.
npm i @capacitor/core @capacitor/cli
npx cap init
Fill
npm i @capacitor-community/sqlite @capacitor/toast @ionic/pwa-elements rxjs
npm i -D copyfiles rimraf
Edit the scripts in the package.json file like below
"scripts": {
"dev": "npm run copy:sql:wasm && vite dev",
"build:web": "npm run copy:sql:wasm && vite build",
"build:native": "npm run remove:sql:wasm && vite build",
"copy:sql:wasm": "copyfiles -u 3 node_modules/sql.js/dist/sql-wasm.wasm static/assets",
"remove:sql:wasm": "rimraf static/assets/sql-wasm.wasm",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
},
npm run dev
In the Home Page, select the menu icon and press on users.
In the Users Page
To see the database created
jeepSqliteStore
has been created in IndexedDB Add the following scripts to the package.json
file
"scripts": {
...
"ios:start": "npm run remove:sql:wasm && npm run build:native && npx cap sync && npx cap copy && npx cap open ios",
"android:start": "npm run remove:sql:wasm && npm run build:native && npx cap sync && npx cap copy && npx cap open android",
"electron:install": "cd electron && npm install && cd ..",
"electron:prepare": "npm run remove:sql:wasm && npm run build && npx cap sync @capacitor-community/electron && npx cap copy @capacitor-community/electron",
"electron:start": "npm run electron:prepare && cd electron && npm run electron:start",
...
}
Modify the adapter from adapter-auto
to adaper-static
too get an index.html
file required by Capacitor during the build process.
npm i @sveltejs/adapter-static
The svelte.config.js
should look like this
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({
fallback: 'index.html'
}),
}
};
export default config;
Add the plugin parameters to the capacitor.congig.ts
file
const config: CapacitorConfig = {
appId: 'YOUR_APP_ID',
appName: 'YOUR_APP_NAME',
webDir: 'build',
/* loggingBehavior: 'debug', */
server: {
androidScheme: "http"
},
plugins: {
CapacitorSQLite: {
iosDatabaseLocation: 'Library/CapacitorDatabase',
iosIsEncryption: false,
iosKeychainPrefix: 'ionic7-react-sqlite-app',
iosBiometric: {
biometricAuth: false,
biometricTitle : "Biometric login for capacitor sqlite"
},
androidIsEncryption: false,
androidBiometric: {
biometricAuth : false,
biometricTitle : "Biometric login for capacitor sqlite",
biometricSubTitle : "Log in using your biometric"
},
electronIsEncryption: false,
electronWindowsLocation: "C:\\ProgramData\\CapacitorDatabases",
electronMacLocation: "/Volumes/Development_Lacie/Development/Databases",
electronLinuxLocation: "Databases"
}
}
};
+layout.ts
File in the routes
directory. export const ssr = false;
export const prerender = false;
npm i @capacitor/ios
npm run build:native
npx cap add ios
npm run ios:start
In Xcode build and run the App
npm i @capacitor/android
npm run build:native
npx cap add android
npm run android:start
In Xcode build and run the App