sveltekit-demo

Experiments with Svelte kit (Updated to svelte.kit v1)

About

This provides a complete set of samples built with SvelteKit and deployed on Vercel. This is an ongoing project and will continue to be enhanced with more samples which bring out the power of SvelteKit.

Demo Site

Demo Site

Details

• Tailwind CSS
• Typescript
• Vercel Adaptor
• Layout - App Shell for entire app
• Todo App: Simple Todo app
• Load App: Reactive Declarations based Loan App
• Counter App: Simple Store base Counter App
• Photo Album: Server side load()
• Modal Dialog: Modal Dialog using Event Dispatcher
• Blog Posts/Dynamic Slug: Server side load()
• Email Validation and Tooltip - Svelte Actions
• prefetch for photos and blog posts
• Firebase v9 + Google Provider Auth
• Weather App: Uses endpoints, graphql, reactive functions,store, userid cookie with hooks passed
• Added 404 Page: Error Page
• About with prerendering
• Tests setup with Jest & Testing Library
• Google Maps Integation
• Tailwind Dark Mode
• D3 Maps World Surfers D3 Sample using SvelteKit for declarative syntax and Svelte Animation integration
• Basic SEO handling added. For a detailed implementation recommended to take a look at Rodneys example SvelteKit-SEO
• Stencil SSR via Hydrate App
• Parallax Scrolling
• Basic Form Builder using svelte dynamic components, events and tailwind forms
• Migrated to vitest
• Migrated to Svelte v1
• Used Daisy UI for all styling needs

Pre-requisites

• Enable Google Sign-In in the Firebase console:

  • In the Firebase console, open the Auth section.
  • On the Sign in method tab, enable the Google sign-in method and click Save.

• Add the Firebase configuration in the following format in the .env file at the root of the project:

• These details are available on the Firebase console -> Project -> Project Settings

PUBLIC_FIREBASE_API_KEY=<FIREBASE_API_KEY>
PUBLIC_FIREBASE_AUTH_DOMAIN=<FIREBASE_AUTH_DOMAIN>
PUBLIC_FIREBASE_PROJECT_ID=<FIREBASE_PROJECT_ID>
PUBLIC_FIREBASE_STORAGE_BUCKET=<FIREBASE_STORAGE_BUCKET>
PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<FIREBASE_MESSAGING_SENDER_ID>
PUBLIC_FIREBASE_APP_ID=<FIREBASE_APP_ID>

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

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

Building

Before creating a production version of your app, install an adapter for your target environment. Then:

npm run build

You can preview the built app with npm run preview, regardless of whether you installed an adapter. This should not be used to serve your app in production.

Known Issues

• World Map Sample
  • viteJS D3 issue
• Stencil SSR Integration
  • Hit an issue when using the Stencil SSR Hydrate App code directly. Using a workaround . See here. Using a published npm module instead of my web component hydrate code stensvelte_hydrate