Minimal Svelte Starter Kit

This guide will walk you through in a step by step flow to configure your development environment to build and deploy a permaweb application.

Prerequisites

Know typescript
NodeJS v18 or greater
Know Svelte - https://svelte.devopen in new window
Know git and common terminal commands

Development Dependencies

TypeScript
esbuild
w3

Steps

Create Project

mkdir myproject
cd myproject
npm init -y
npm install -D svelte esbuild typescript esbuild-svelte tinro svelte-preprocess

mkdir myproject
cd myproject
yarn init -y
yarn add -D svelte esbuild typescript esbuild-svelte tinro svelte-preprocess

Create buildscript.js

import fs from "fs";
import esbuild from "esbuild";
import esbuildSvelte from "esbuild-svelte";
import sveltePreprocess from "svelte-preprocess";

//make sure the directoy exists before stuff gets put into it
if (!fs.existsSync("./dist/")) {
	fs.mkdirSync("./dist/");
}
esbuild
	.build({
		entryPoints: [`./src/main.ts`],
		bundle: true,
		outdir: `./dist`,
		mainFields: ["svelte", "browser", "module", "main"],
		// logLevel: `info`,
		splitting: true,
		write: true,
		format: `esm`,
		plugins: [
			esbuildSvelte({
				preprocess: sveltePreprocess(),
			}),
		],
	})
	.catch((error, location) => {
		console.warn(`Errors: `, error, location);
		process.exit(1);
	});

//use a basic html file to test with
fs.copyFileSync("./index.html", "./dist/index.html");

Modify package.json

Set type to module, add a build script

{
  "type": "module"
  ...
  "scripts": {
    "build": "node buildscript.js"
  }
}

Create `src` directory and some src files

mkdir src
touch src/main.ts
touch src/app.svelte
touch src/counter.svelte
touch src/about.svelte

Main.ts

import App from "./app.svelte";

new App({
	target: document.body,
});

app.svelte

<script lang="ts">
	import { Route, router } from "tinro";
	import Counter from "./counter.svelte";
	import About from "./about.svelte";

	// add hash routing for permaweb support
	router.mode.hash();
</script>
<nav><a href="/">Home</a> | <a href="/about">About</a></nav>
<Route path="/"><Counter /></Route>
<Route path="/about"><About /></Route>

Hash Routing

You will notice the router.mode.hash() setting in the script session, this is important to configure your application to use hash based routing, which will enable url support when running that application on a path, like https://[gateway]/[TX]

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

about.svelte

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

Add index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

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"
  }
  ...
}

Replace << ANT-PROCESS >> with your ANT process id.

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

ERROR

If you receive an error Insufficient funds, make sure you remembered to fund your deployment wallet with ArDrive Turbo credits.

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

SUCCESS

You should now have a Svelte Application on the Permaweb! Great Job!

Repository

A completed version of this example is available here: https://github.com/twilson63/permaweb-minimal-svelte-starteropen 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

Documentation

# Minimal Svelte Starter Kit

# Prerequisites

# Development Dependencies

# Steps

# Create Project

# Create buildscript.js

# Modify package.json

# Create src directory and some src files

# Main.ts

# app.svelte

# counter.svelte

# about.svelte

# Add index.html

# Deploy Permanently

# Generate Wallet

# Fund Wallet

# Setup Permaweb-Deploy

# Update vite.config.ts

# Update package.json

# Run build

# Run deploy

# Response

# Repository

# Summary