+ 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:
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)
git clone https://github.com/iva2k/svelte-blank-20220525.git
cd svelte-blank-20220525
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
ornpm
, but only apnpm
lockfile is included, and some scripts callpnpm
directly and need to be changed to your package manager.
pnpm install # or npm install
pnpm run svelte:dev
# or start the development server and open the app in a new browser tab
pnpm run svelte:dev -- --open
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.
To run desktop app (using Tauri)
pnpm run dev
To create desktop executable:
pnpm run build
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
See CREATING for step-by-step instructions.
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 |