This tutorial was updated on 2023-01-02 09:45:33 -0300.

1. Introduction

In this tutorial, you will see how this web application is built:

  1. STATUS: This tutorial is a WORK IN PROGRESS. So, at this moment, it is an incomplete tutorial even though The final code is present.

  2. To get a Git repository with all the steps presented in this tutorial, you will need to build it yourself because, at this moment, I will only share the Git repo of this tutorial with the participants of my Web3 mentoring. But, the steps followed in this tutorial will be available in a video on my Odysee channel. Please don’t ask me to share the entire Git repository as I won’t help you.

The link above shows you an application that offers two possibilities:

  1. Register/ Login a user using Firebase (Web2).

  2. Login using Metamask and Moralis (Web3).

I wrote an additional tutorial where I followed some steps shown by the Moralis team (using React instead of SvelteKit) to achieve the web3 login feature done in this tutorial. Here is the running application produced by following the steps in this tutorial.

2. Setting up the tools you will need to follow this tutorial

To follow this tutorial you will need a modern Linux environment with some tools installed.

Expand this to read more about my Linux environment.

I’ll use a Linux Ubuntu 22.04 to follow the steps in here. You will need the following tools installed:

  • Node.js.

  • pnpm.

  • Visual Studio Code. Future updates of this tutorial will aggregate the use of devcontainers, a very useful tool.

These are the versions of the tools above, running on my environment:

$ node -v

$ npm -v

Open a Bash shell on your environment and copy and paste the next commands to it.

To keep a better organization of your shell terminals, I recommend you to use the tmux.

Clone this tutorial to your local machine and change your current directory to it:

shell: default
git clone $repo && cd $(basename $repo)

If you intend only to run The final code you can skip directly to that session. Otherwise …​

Install some Bash functions that you will execute on this tutorial:

shell: default
. ./
Expand this to see the content of the script.
#!/usr/bin/env bash

TUT_DIR=$(cd "$(dirname "$BASH_SOURCE[0]")"; pwd)

tut() {
  case "$1" in
      (cd "$TUT_DIR"/files; rsync -R $1 $OLDPWD)
      git apply "$TUT_DIR"/files/$1
      sed -i "/^$TUT_MARK/,+1d" $PROFILE
      cd "$TUT_DIR"

if ! grep -q -e "^$TUT_MARK" $PROFILE
  echo "$TUT_MARK" >> $PROFILE
  echo ". $TUT_DIR/" >> $PROFILE

3. Creating the SvelteKit project

shell: default
pnpm create svelte@latest sveltekit-web3-login-private
Expand this to see my options when I ran the command above.

creating the sveltekit project

shell: default
cd sveltekit-web3-login-private && rm -f
shell: default
pnpm i && \
git init && git add -A && \
git commit -m 'Initial commit'

Open another shell (I will name it as pnpm) and, inside it, type:

shell: pnpm
pnpm run dev -- --open

Open the default site: http://localhost:5173

4. Creating the 'About' page

4.1. Testing a simple change

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5982b0a..2aebcde 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,2 @@
 <h1>Welcome to SvelteKit</h1>
-<p>Visit <a href=""></a> to read the documentation</p>
+<p>Visit <a href=""></a></p>
shell: default
tut apply 01.diff
shell: default
git add . && \
git commit -m 'Made a simple change'

4.2. Adding an 'About' page

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2aebcde..3c0827f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,2 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href=""></a></p>
+<h1>SvelteKit Web3 Login</h1>
+<a href="/about">About</a>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
new file mode 100644
index 0000000..8572216
--- /dev/null
+++ b/src/routes/about/+page.svelte
@@ -0,0 +1,3 @@
+<p>A page to test Web3 login on SvelteKit.</p>
+<a href="/">Home</a>
shell: default
tut apply 02.diff
shell: default
git add . && \
git commit -m 'Added an About page'

5. Building static pages (Static Site Generation - SSG)

Stop vite on pnpm shell (by typing pCtrl+C) and add an new dependencie to the project:

shell: pnpm
pnpm i -D @sveltejs/adapter-static@latest svelte-preprocess && \
git add .

Optionally we can also uninstall @sveltejs/adapter-auto we the following command.
But for now let’s skip this step and continue this tutorial.

shell: pnpm
pnpm rm -D @sveltejs/adapter-auto

Update svelte.config.js:

diff --git a/svelte.config.js b/svelte.config.js
index 87f198f..5cb2550 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,14 +1,18 @@
-import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import preprocess from 'svelte-preprocess';
+import adapter from '@sveltejs/adapter-static';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: preprocess(),
 	kit: {
-		adapter: adapter()
+		adapter: adapter({
+			pages: 'build',
+			assets: 'build',
+			fallback: null
+		})
shell: default
tut apply 03.diff && \
tut add src/routes/+layout.js
shell: pnpm
pnpm run build && tree build

Test the build locally:

shell: pnpm
serve -l 5173 build

Commit all the changes:

shell: default
git add . && \
git commit -m 'Updated to SSG'

6. Deploy to GitHub Pages

Press Ctrl+C to stop the serve running on pnpm terminal.

Add gh-pages to package.json:

shell: pnpm
pnpm i -D gh-pages && \
git add package.json pnpm-lock.yaml

We’ll need to update svelte.config.js according to this diff:

diff --git a/svelte.config.js b/svelte.config.js
index 5cb2550..b6eecf5 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -12,7 +12,10 @@ const config = {
 			pages: 'build',
 			assets: 'build',
 			fallback: null
-		})
+		}),
+		paths: {
+			base: process.env.NODE_ENV === 'production' ? '/sveltekit-web3-login' : ''
+		}
shell: default
tut apply 04.diff

Also, we’ll need to update the pages.

First, src/routes/+page.svelte:

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3c0827f..c71bcd1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,6 @@
+  import { base } from '$app/paths';
 <h1>SvelteKit Web3 Login</h1>
-<a href="/about">About</a>
+<a href="{base}/about">About</a>
shell: default
tut apply 05.diff

Then, src/routes/about/+pages.svelte:

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 8572216..ed1df81 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,3 +1,7 @@
+  import { base } from '$app/paths';
 <p>A page to test Web3 login on SvelteKit.</p>
-<a href="/">Home</a>
+<a href="{base}/">Home</a>
shell: default
tut apply 06.diff

Finally, we’ll create a deploy script:

diff --git a/package.json b/package.json
index 03f33b8..6d1339d 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
+		"predeploy": "NODE_ENV=production npm run build",
+		"deploy": "touch build/.nojekyll && gh-pages -d build -t true",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
shell: default
tut apply 07.diff

Now, let’s commit all theses changes.

shell: default
git add . && \
git commit -m 'Added gh-pages support'

To deploy on GitHub Pages, let’s first configure the origin for this repo.

  1. Before executing this command, substitute my GitHub account (paulojeronimo) with yours or the next command will fail!

shell: default
git remote add origin$repo.git &&
git repo set-default

Next, type the command below.

  1. Note that you will need the GitHub CLI (gh) installed to this command succeeds!

  2. If the repo sveltekit-web3-login already exists, you will need to delete it first with this command: gh repo delete --confirm. So, this will "undeploy" the project from GitHub Pages.

shell: default
gh repo create $repo --public && \
pnpm run deploy
Obviously, you will be using your own account. So the URL in your case will be different (

7. Putting the redundant code in a layout file

The piece of redudant code in the pages above will be moved to a new file:

  import { base } from '$app/paths';

  <a href="{base}/">Home</a>
  <a href="{base}/about">About</a>


After that we’ll need to remove that code that was redundant in the pages:

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c71bcd1..fcfec57 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1 @@
-  import { base } from '$app/paths';
 <h1>SvelteKit Web3 Login</h1>
-<a href="{base}/about">About</a>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index ed1df81..ae068f6 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,7 +1 @@
-  import { base } from '$app/paths';
-<p>A page to test Web3 login on SvelteKit.</p>
-<a href="{base}/">Home</a>

So, let’s apply these changes:

shell: default
tut add src/routes/+layout.svelte && \
tut apply 08.diff

Start vite again and refresh http://localhost:5173 to note the changes:

shell: pnpm
pnpm run dev

Finally, commit the updates:

shell: default
git add . && \
git commit -m 'Created src/routes/+layout.svelte'

8. Building a Navbar (using sveltestrap)

Type an Ctrl+C on the pnpm shell to add Sveltestrap.

shell: pnpm
pnpm i sveltestrap && \
git add .

9. Many other topics …​


10. The final code

After completing all the steps followed in this tutorial (including the steps not yet documented), the final code and the instructions to put it running on GitHub Pages, are available in the directory "final-code" of this tutorial.

10.1. Running locally

First, you need to clone the repository of this tutorial. After that, copy and paste the following commands to your command line:

cd final-code && \
pnpm install && pnpm run dev

10.2. Deploying to GitHub Pages

Inside the final-code directory, type:

npm run build && npm run deploy