Blank SvelteKit App

+ Tauri + Capacitor + Storybook + Prettier + ESLint + Stylelint + Postcss + Playwright + Netlify + Vercel

A cross-platform Desktop / Mobile / Web application starter.

ATTENTION! This Repo is obsoleted and will be deleted. This app has moved to latest iva2k/svelte-blank-20220525.

This app has very little functionality. Huh? Why? - It is a starter app and it demonstrates the technology stack, main point is it can be deployed from a single codebase to any platform. Yes, ANY platform:

• iOS
• Android
• Windows
• MacOS
• Linux
• Web

Is it Native? - No. It uses JavaScript / TypeScript and modern tooling to create blazingly fast websites, web apps, and allow installation as apps on any of the major platforms.

Can it use native features (camera, GPS, etc.)? - Yes! Check Geolocation tab and QR Scanner to get a sense.

Storybook
	App Demo

Built with:

• Svelte - UI framework
• Svelte Kit - UI build system
• Tauri - Desktop Application framework
• Capacitor - Building crossplatform apps
• Storybook - Tool for building UI components and pages in isolation
• Prettier - Opinionated Code Formatter
• ESLint - Pluggable JavaScript linter
• Stylelint - A mighty, modern CSS linter
• Postcss - Transforming styles with JS plugins
• Playwright - Fast and reliable end-to-end testing for modern web apps

Continuous Integrations and Deploys:

• Chromatic - Storybook Github CI
• Netlify - App Demo

Install

Start Your App

To start your app from this project as a template:

mkdir my-app && cd my-app
npx degit iva2k/svelte-blank-20220525#ui-agnostic
# or
npx degit iva2k/svelte-blank-20220525#ui-bootstrap
# or
npx degit iva2k/svelte-blank-20220525#ui-bulma
# or ... (see other UI framework branches below)

Or Clone the Repo

git clone https://github.com/iva2k/svelte-blank-20220525.git
cd svelte-blank-20220525

Developing Locally

Please follow the Tauri Getting Started Guide to setup your system with the required Rust toolchain.

This application is built like a typical Node.js application. However, instead of npm, pnpm is used for package management.

Note: You may use yarn or npm, but only a pnpm lockfile is included, and some scripts call pnpm directly and need to be changed to your package manager.

pnpm install # or npm install

Start development server

pnpm run svelte:dev

# or start the development server and open the app in a new browser tab
pnpm run svelte:dev -- --open

Building

To create a production version of the web app (to be hosted on a server):

pnpm run svelte:build

To preview the production build of the web app, execute pnpm run preview.

To deploy the app, need to install an adapter for the target environment.

Desktop App

To run desktop app (using Tauri)

pnpm run dev

To create desktop executable:

pnpm run build

Mobile App

To update mobile app project (Android):

pnpm run svelte:build
cap open android

iOS platform is not installed in this repo, but can easily be added. See CREATING

How This App Was Created

See CREATING for step-by-step instructions.

Styling / UI Components

There are many UI frameworks that work with Svelte / SvelteKit, and choice can be daunting.

https://bestofsvelte.com/t/ui-library

https://sveltesociety.dev/components/

This project has few of the top UI frameworks integrated in separate git branches:

Git Branch	UI Framework	Dark Theme Switch	Notes
ui-agnostic	AgnosticUI	Y
ui-bootstrap	Bootstrap	Y	Sveltestrap, Themes from Bootswatch
ui-bulma	Bulma	N
ui-carbon	Carbon	Y
ui-framework7	Framework7	N	Incomplete and currently broken
ui-shoelace	Shoelace	Y
	Smelte		Material + TailwindCSS
	TailwindCSS		May use components - Flowbite
	Ionic		See good example
	Chota		SvelteChota
	Svelterial		Svelte Materialify is on a deprecation path.
	Tachyons
	Svelte Material
	Svelte Flat UI
	Attractions