Total App | Blank SvelteKit App

	Storybook
	Chromatic	App Demo	App Demo

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

License: Mozilla Public License Version 2.0

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
• 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
• Vitest - A blazing fast unit test framework powered by Vite

Continuous Integrations and Deployments:

• Chromatic - Storybook Github CI
• 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/svelte-blank-20221125.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/svelte-blank-20221125#ui-agnostic
# or
npx degit iva2k/svelte-blank-20221125#ui-bootstrap
# or
npx degit iva2k/svelte-blank-20221125#ui-bulma
# or ... (see other UI framework branches below)

Or Clone the Repo

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

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
ui-agnostic	AgnosticUI	Y
ui-bootstrap	Bootstrap	Y	Sveltestrap, Themes from Bootswatch
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

Enjoy! \_/