Total App | Blank SvelteKit App

	Storybook
	Chromatic	App Demo	App Demo

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

License: MIT License

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.

Out of the box features:

SEO and integration with Social Networks
SSR / Server-Side Rendering
Offline mode / can work without Internet connection (after the user visits the app when connected, the app's service worker caches all files for offline operation).
Support native features (camera, GPS, etc.) - Capacitor included. Check Geolocation and QR Scanner tabs.
Support deep links, in online and in offline modes.
Codebase support features - Linting, Formatting, Unit Testing, End-to-End testing.
Prepared for Isolated Component Development (Storybook).
Instrumented for quick deployment - Netlify, Vercel, NGINX, etc.

Technology Stack

Built with:

Svelte - Truly reactive Javascript/TypeScript App UI framework
Svelte Kit - Javascript/TypeScript App build system
Tauri - Desktop Application framework
Capacitor - Building crossplatform apps
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
Vitest - A blazing fast unit test framework powered by Vite

Continuous Integrations and Deployments:

Netlify - App Demo
Vercel - App Demo

Enhancements not found in the foundational packages and templates:

HTTPS support in development
Vitest coverage
Playwright reports
ESLint imports
SSR-safe Svelte stores
Consolidated website configuration
Organized Favicon resolutions with notification badges support

Install

Quick Start

To start with this app as a template:

git clone https://github.com/iva2k/total-app.git my-new-total-app
cd my-new-total-app
pnpm install
cp .env.EXAMPLE .env
pnpm run dev -- --open

... or do the steps in Start Your App

Start Your App

To start your app from this project as a template:

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

Or Clone the Repo

git clone https://github.com/iva2k/total-app.git
cd total-app

Setup Configuration File

Copy provided .env.EXAMPLE to .env (may also create .env.production and .env.dev as needed) and modify it for your site.

.env.* files are listed in .gitignore to be never committed to the repo.

cp .env.EXAMPLE .env

When deploying your website to any provider (Netlify, Vercel), make sure to set all the variables listed in .env.EXAMPLE with the provider's UI to keep them secure.

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 dev

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

Building

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

pnpm run 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. Netlify and Vercel adapters are already installed and automatically selected when deploying to these providers.

Desktop App

To run desktop app (using Tauri)

pnpm run tauri:dev
# The app window will open

To create desktop executable:

pnpm run tauri:build

Mobile App

To update mobile app project (Android):

pnpm run build
cap open android

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

Customizing

Check file src/lib/config/websiteFnc.js for setting all information about the App / Website.

Many variables are also set in .env file.

How This App Was Created

See CREATING for step-by-step instructions.

Styling / UI Components

This template has DarkMode component in the header to allow switching the color scheme between 'light' and 'dark'. It changes the theme using <html color-scheme> (see src/routes/styles.css).

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.

Currently there are no plans to implement additional frameworks (either listed below or not). It is not too hard to add a new UI framework, as long as it supports Svelte 5 - just look at minimal changes in the existing framework branches.

Note that there are 2 branches for Isolated component development - Histoire and Storybook, which can be merged into UI branch of choice for your app.

Git Branch	UI Framework	Dark Theme Switch	Notes
main	(none)	Y
histoire	(none)	Y	Isolated component development. `pnpm story:build` fails (w/Svelte 5).
storybook	(none)	Y	Isolated component development.
ui-agnostic	AgnosticUI	Y
ui-bootstrap	Bootstrap	Y	Sveltestrap, Themes from Bootswatch. `pnpm check` fails (w/Svelte 5).
ui-bulma	Bulma	N
ui-carbon	Carbon	Y	Incomplete and currently broken (w/Svelte 5)
ui-framework7	Framework7	N	Incomplete and currently broken (w/Svelte 5)
ui-shoelace	Shoelace	Y
ui-svelteui	SvelteUI	Y	Incomplete and currently broken (w/Svelte 5)
ui-tailwindcss	TailwindCSS		May use components, e.g. Flowbite
ui-konsta	Konsta	Y	(Requires TailwindCSS)
	Skeleton	Y	(Requires TailwindCSS)
	Flowbite-Svelte		(Requires TailwindCSS)
	Smelte		(Requires TailwindCSS) Material + TailwindCSS
	Ionic		See good example. Note: No SSR!
	Chota		SvelteChota
	Svelterial		Svelte Materialify is on a deprecation path.
	Tachyons
	Svelte Material
	Svelte Flat UI
	Attractions
	Melt UI
	Bits UI
	shadcn-svelte

Conclusion

This repo was started before Svelte 5 official release using the early preview releases, and few things are still broken at the time in Svelte and in some of UI framework packages. As fixes become available, they will be picked up.

Note that some of the UI frameworks were implemented flawlessly in earlier Svelte 3 / 4 version of this project, but they got behind and are incompatible with Svelte 5 (those broken branches are kept to have place where to track progress).

iva2k/total-app