svelte-static Svelte Themes

Svelte Static

Template repo for building a Svelte 5 web client or static site in a dev-container.

Svelte 5 Website Template

A starting point for static websites, SPAs, and PWAs using Svelte 5 with adapter static.

Features

  1. A Node based dev-container for a consistent development environment.

    1. Based on Microsoft's devcontainer spec.
    2. Uses the host's timezone ($TZ) and Github CLI token ($GITHUB_TOKEN).
    3. If $GITHUB_TOKEN is set, it will clone the user's dotfiles repository and run its install.sh after creating the container. See jifalops/dotfiles for an example.
    4. Local shell history is persisted when rebuilding the container.
  2. Sets up a backend API_URL that changes between local development and production, and can easily be removed if building a static site.

  3. Integrated terminals when opened with VS Code:

    1. Runs unit tests and starts the dev server (npm run dev).
    2. Runs integration tests and starts the preview server (npm run preview).
    3. Spoofs a locally running backend by proxing dummyjson.com.
  4. GitHub Actions for:

    1. Running tests on PRs and changes to main.
    2. Deploying main to GitHub Pages.
    3. Previewing PRs in a Github Pages subdirectory.
  5. Obfuscated builds, locally and deployed (npm run build && npm run obfuscate).

  6. Tailwind preconfigured with a simple light and dark theme.

  7. A modern Ports and Adapters (hexagonal) architecture with a feature-based directory structure.

  8. Core services baked in:

    1. Telemetry with Google Analytics 4, including a mock implementation.
    2. Advertising with Google AdSense, including a mock implementation.
    3. Logging.
    4. Base class for app errors.
  9. Iconify icons integrated via unplugin-icons. Builds only the icons used.

  10. Svelte 5 out of the box.

Getting Started

  1. Clone this repository / use this template.
  2. In your repository settings for GitHub Pages, choose Deploy from a branch.

    You may have to create the gh-pages branch first or let the .github/workflows/deploy.yml workflow do it for you.

  3. Install the Dev Containers extension for VS Code to develop within the configured environment.
  4. For seamless integration:
    1. Set the TZ and GITHUB_TOKEN environment variables on the host (example).
    2. Have a dotfiles repo with an install.sh script that sets up your environment. See jifalops/dotfiles for an clonable example.

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes