Spectacular is a full-stack Turborepo template project with SvelteKit meta-framework all working in harmony and sharing packages.
- Monorepo: Turborepo
- JS Framework: SvelteKit
- CSS: Tailwind CSS
- UI Components: tailwindcss based SkeletonUI, Shadcn and Flowbite
- Unit/Component testing: vitest
- API Mocking: Mock Service Worker
- Code Coverage c8
- End-to-End Testing: playwright
- GraphQL: Houdini & Hasura
- Authentication: Auth.js, nhost-auth
- PWA: Vite PWA
- Linter/Formatter: Biome and Ultracite linting configuration.
- Responsive Design: Container queries
- Progressive Web Apps (PWAs):
- Smart caching with Service Works
- Re-engage customers with Push Notifications
- Push Application Updates
- Offline app with pglite
- Fonts and Image Optimization: edge caching, Lazy-loading images
- SEO Ready
- Meta Tags and Json-LD with svelte-meta-tags
- Dynamic OpenGraph images with sveltekit-og
- Image Optimization with sveltejs/enhanced-img
- GraphQL: Houdini the disappearing GraphQL client for SvelteKit. and nHost as BaaS
- Forms: Form handling with [superforms, source] and Validation with
zod - Error Handling:
- Strongly Typed Error Handling with generic errors
- FormData preprocessing with zodfd
- Themes: tailwindcss DarkMode switcher
- Deployment: Docker build and deployment serverless / k8s runtimes.
- Tables: svelte-headless-table
- Security: Use Auth.js when stable
- Vitebook or Storybook 7
- GraphQL Yoga API
- Documentation micro site with Astro
- Build Tools
- Use Bob.Build for Smart Builds, Build Cache etc and Bob's github-actions
- Use earthly.dev - Great for monorepos, Compatible with Every Language, Framework, and Build Tool
- Use sveltekit-og for Open Graph Image Generation
- Internationalization(i18n) with inlang
Paraglide JS Adapter SvelteKit - User Notifications: - multi-tenant, communication preferences. Design
- Implement Changesets (link) with turborepo
- TAURI: Use Tauri with Skeleton for multi-platform.
- Charts with Unovis. Explore Gallery
- Feature Flags with Vercel Feature Flags and Vercel Toolbar
cd ~/Developer/Work/SPA
git clone https://github.com/xmlking/spectacular.git
cd spectacular && bun install
# (optional) playwright is required for end-to-end testing
bun x playwright install
# (optional) add git-commit-hooks
cog install-hook --allBy default, the dev server (dev command) runs in development mode and the build command run in production
mode.
This means when running turbo build, it will load the env variables from .env.production if there is one:
Use .env.local to override environment variables in .env (secrets like API keys) for local development.
Once you've cloned the project and installed dependencies with bun i, start a development server:
# stat all services in background and show logs
make up # for first time use `make boot` then `make up`
# this will start all services with default profile + services with `all` profile.
make up PROFILES=all
# verify status/health of services
make ps
# shotdown all services
make down
# DANGER: run this if you want to reset database and other persistent volumes
make teardown
# verify if docker `compose` getting correctly resolved application config from .env and .secrests files
make check
make check PROFILES=all,optional
# ssch to a container to debug
#make exec-<target>
make exec-hasura
make exec-authturbo run console#dev
# or use `--log-order=stream` to disable TUI
turbo --filter=console --log-order=stream dev
# or start the server and open the app in a new browser tab
turbo run console#dev -- --open
# run in debug mode
turbo run console#dev:debug
# run with a custom inline config
# inline environment variables has higher precedence than ones loaded from .env and .env.local files
PUBLIC_NHOST_GRAPHQL_URL=api.mycompany.com:443 turbo devDisplay outdated dependencies:
# Display outdated dependencies globally
bun outdated -g
# Display outdated dependencies in the current workspace.
bun outdated
# Display outdated dependencies in the web workspace.
bun outdated -F web
bun outdated -F docs
bun outdated -F @repo/utils
bun outdated -F @repo/mastra
# Use --filter to include more than one workspace.
bun outdated --filter="*"Update package dependencies to latest version:
# To update global dependencies
bun update --latest -g
# To update dependencies to latest for each workspace:
cd apps/web
bun update --latest
# (Or) upgrade interactively
bun update --interactive
bun update -i --latestTo debug why specific dependency was added:
bun why recharts# format all packages
turbo run format
# format root
turbo run format:root# lint all packages
turbo run lint
# lint root
turbo run lint:rootturbo test
turbo test:ui
#Then, you can visit the Vitest UI at http://localhost:51204/__vitest__/.
# test coverage
turbo test:coverage
# updating Snapshots
bunx vitest -u
# test specific folder
bunx vitest apps/web/src/lib/utils
(or)
bun node_modules/.bin/vitest run apps/web/src/lib/utilsturbo test:e2eTo create a production version of your app:
turbo build
# run build
turbo run console#dev:build
turbo --filter=console... build
turbo --filter=console... --dry build
turbo --filter=console... --graph buildRun from the local build directory:
NODE_ENV=production \
PUBLIC_NHOST_GRAPHQL_URL=api.mycompany.com:443 \
node build
# (optional) pass ORIGIN when using `adapter-node` build
HOST=127.0.0.1 \
PORT=4000 \
ORIGIN=https://my.site \
node buildYou can preview the production build with turbo run console#preview.
To deploy your app, you may need to install an adapter for your target environment.
after checking-in all your changes, bump the VERSION and build the docker image.
# dry-run
cog bump --auto --dry-run
# this will bump version in package.json and create git tag and commit.
cog bump --autoTo build and publish libs
turbo build --filter=lib...
cd package
bun publish