# 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>
...

# Deploy Permanently

# Generate Wallet

We need the arweave package to generate a wallet

npm install --save arweave

yarn add arweave -D

then run this command in the terminal

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

# Fund Wallet

You will need to fund your wallet with ArDrive Turbo credits. To do this, enter ArDriveopen in new window and import your wallet. Then, you can purchase turbo credits for your wallet.

# Setup Permaweb-Deploy

npm install --global permaweb-deploy

yarn global add permaweb-deploy

# Update vite.config.ts

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
  base: './'
})

# Update package.json

{
  ...
  "scripts": {
    ...
    "deploy": "DEPLOY_KEY=$(base64 -i wallet.json) permaweb-deploy --ant-process << ANT-PROCESS >> --deploy-folder build"
  }
  ...
}

# Run build

Now it is time to generate a build, run

npm run build

yarn build

# Run deploy

Finally we are good to deploy our first Permaweb Application

npm run deploy

yarn deploy

# Response

You should see a response similar to the following:

Deployed TxId [<<tx-id>>] to ANT [<<ant-process>>] using undername [<<undername>>]

Your Svelte app can be found at https://arweave.net/<< tx-id >>.

# 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