Total App | Starter App

	Storybook
	Chromatic	App Demo	App Demo	Github		Discord

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

License: MIT License

Introduction

Total App is a versatile starter app designed to streamline the development process. Out of the box it provides a full technology stack to deploy from a single codebase to any device across all major platforms:

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

Key Features

• SEO and Social Integration: Optimized for search engines and social networks.
• Flexible Rendering: Supports SSR, SPA, and PWA (mix & match as needed) for various use cases.
• Native Features: Includes support for camera, GPS, and other native capabilities via Capacitor.
• Great Developer Experience (DX): Built with SvelteKit with linting, formatting, and comprehensive testing, isolated component development.
• Ready for Deployment: Configured for quick deployment on Netlify, Vercel, or building standalone apps for AppStore/PlayStore and more.

Technology Stack

Built with

Svelte + Svelte Kit
Tauri
Capacitor
Prettier
ESLint
Stylelint
Postcss
Playwright
Vitest

Isolated Component Development

Choose a branch for your preferred Isolated Component Development:

Storybook | Histoire

Choose UI Components

Start TotalApp from Github

To try this app locally, clone it from Github, execute in your terminal (need git and nodejs installed):

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

Start Your App

To start your app from TotalApp as a template, choose UI framework branch to use (after '#') and execute in your terminal:

MY_APP="my-app"  # Any name you like for the app (will be a folder name)
# Any UI branch you like to use, choose one:
UI_BRANCH="ui-agnostic"
UI_BRANCH="ui-bootstrap"
UI_BRANCH="ui-bulma"
# (see other UI framework branches below)

cd ~ && mkdir "$MY_APP" && cd "$MY_APP"
npx degit "iva2k/total-app#${UI_BRANCH}"

# Then you can make a new repo and push the folder to your Guthub account (google it to learn how)

Or Fork the Repo on Github

Visit Github and follow instructions.

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. DO NOT COMMIT .env files to repo!

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, you will 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.

Variables for backend integrations are 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 the choice can be daunting.

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

https://sveltesociety.dev/components/

Some UI framеworks are implemented in Branches.

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. Currently there are no plans to implement additional frameworks (either listed below or not), but good PRs will be accepted.

Branches

This project has few of the top UI frameworks integrated, as well as Isolated component development with Storybook and Histoire added in separate git branches.

Any of UI branch and any of Isolated component development branch can be merged into UI branch of choice for your app.

UI Framework	Git Branch	Dark Theme	Svelte 5	Notes [Legend: ⬤ Yes / ⭘ No / ❌ Fail]	Status
	main	⬤	⬤
	histoire	⬤	❌	Isolated component development. ❌ Story Build fails.
	storybook	⬤	⬤	Isolated component development.
AgnosticUI	ui-agnostic	⬤	⭘	Last v1.1.27 published in 2021
Bootstrap	ui-bootstrap	⬤	⭘	Sveltestrap, Themes from Bootswatch. ⭘ [sveltestrap#79]
Bulma	ui-bulma	⬤	⬤
Carbon	ui-carbon	⬤	⬤
Framework7	ui-framework7	⭘	⭘	⭘ [framework7#4296]
Shoelace	ui-shoelace	⬤	⬤
SvelteUI	ui-svelteui	⬤	⭘	⭘ [svelteuidev#491]
TailwindCSS	ui-tailwindcss	⬤	⬤	May use components, e.g. Flowbite
Konsta	ui-konsta	⬤	⬤	(Requires TailwindCSS)
SvelteUX	ui-svelteux	⬤	⬤	(Requires TailwindCSS)
Flowbite	ui-flowbite	⬤	⬤	(Requires TailwindCSS)
Skeleton			⬤	(Requires TailwindCSS) ⬤ Note [skeleton#2640]
Smelte			⭘	(Requires TailwindCSS) Material + TailwindCSS
Ionic			⭘	See good example. Note: No SSR!
Chota			⭘	SvelteChota
Tachyons			⭘
Svelte Material			⬤	pnpm i -D @smui/\*\*@alpha
Svelte Flat UI			⭘
Attractions			⭘
Melt UI			⭘	⭘ [melt-ui#1001]
Bits UI			⭘	⭘ [bits-ui#287]
shadcn-svelte			⭘	⭘ [shadcn-svelte#1182]

Conclusion

Precursor project was started with Svelte 3/4, and this repository was initiated using early preview releases of Svelte 5, and once Svelte 5 was released, updated to the latest.

As Svelte 5 is still very new, many UI frameworks are lagging in updates and not yet fully compatible with Svelte 5 - there are some incompatibilities and broken features.

If you are interested in a stable version with Svelte 3/4, please refer to the earlier Svelte 3/4 version of this project at commit #64eb11a, that includes fully functional UI frameworks.

As updates and fixes for Svelte 5 and the UI frameworks are released, they will be incorporated into this project.

See Q & A below and file issues and submit PRs on Github!

Questions?

See Q & A for more or reach out on Discord:

Enjoy! \_/