# Svelte/Vite Starter Kit

Svelte is the framework that compiles out of the way, that results is small packages, which is perfect for the permaweb. As developers, we value Dev Experience as much as we value User Experience. This kit uses the vite bundle system to give developers a great DX experience.

# Installing vite with svelte and typescript

npm create vite@latest my-perma-app --template svelte-ts

npm create vite@latest my-perma-app -- --template svelte-ts

yarn create vite my-perma-app --template svelte-ts

pnpm create vite my-perma-app --template svelte-ts

# Project Info

The vite build system places your index.html file in the root directory, this is where you would include any css or global script dependencies if needed. For more information about the vite project layout check out the vite documentationopen in new window

# Setup hash-router

To setup the hash-router we will use tinroopen in new window. tinro is a tiny declarative routing library, that is similar to React Router.

npm install --save-dev tinro

yarn add -D tinro

# Telling Svelte to use hash routing

In the src/App.svelte file, you want to configure the router to use the hash routing mode.

<script lang="ts">
	import { Route, router } from "tinro";
	router.mode.hash();
	router.subscribe((_) => window.scrollTo(0, 0));
</script>
<main></main>

The router.mode.hash function turns on hash router mode. The router.subscribe callback is nice to reset the page to the top on page transfers

# Adding some transition components

These component will manage the transition between one page to another page when routing.

create a directory under the src directory called components and add these two files:

announcer.svelte

<script>
	import { router } from "tinro";
	$: current = $router.path === "/" ? "Home" : $router.path.slice(1);
</script>

<div aria-live="assertive" aria-atomic="true">{#key current} Navigated to {current} {/key}</div>

<style>
	div {
		position: absolute;
		left: 0;
		top: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
		white-space: nowrap;
		width: 1px;
		height: 1px;
	}
</style>

This component is for screen readers announcing when a page changes

transition.svelte

<script>
  import { router } from "tinro";
  import { fade } from "svelte/transition";
</script>

{#key $router.path}
  <div in:fade={{ duration: 700 }}>
    <slot />
  </div>
{/key}

This component adds a fade to the page transition

# Adding Routes to the app

<script lang="ts">
	...
	import Announcer from "./components/announcer.svelte";
	import Transition from "./components/transition.svelte";
	...
</script>
<Announcer />
<Transition>
	<Route path="/">
		<Home />
	</Route>
	<Route path="/about">
		<About />
	</Route>
</Transition>

Adding the Announcer and Transition components to our routing system will handle announcing page transitions as well as animating the transition.

# Create some pages

# home.svelte

<script lang="ts">
	let count = 0;

	function inc() {
		count += 1;
	}
</script>
<h1>Hello Permaweb</h1>
<button on:click="{inc}">Inc</button>
<p>Count: {count}</p>
<a href="/about">About</a>

# about.svelte

<h1>About Page</h1>
<p>Svelte/Vite About Page</p>
<a href="/">Home</a>

# Modify App.svelte

<script lang="ts">
	...
	import Home from './home.svelte'
	import About from './about.svelte'
</script>
...

# Deploying to the Permaweb

# Generate Wallet

yarn add -D arweave
node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json

# install Irys

yarn add -D @irys/sdk

# update package.json

{
  ...
  "scripts": {
    ...
    "deploy": "yarn build && irys upload-dir dist -h https://node2.irys.xyz --wallet ./wallet.json -c arweave --index-file index.html --no-confirmation"
  }
}

# Run deploy

yarn deploy

# Repository

A completed version of this example is available here: https://github.com/twilson63/svelte-ts-vite-exampleopen in new window

# Summary

This is a minimal version of publishing a Svelte application on the permaweb, but you may want more features, like hot-reloading and tailwind, etc. Check out hypar for a turnkey starter kit. HypARopen in new window