Skip to main content

Use Juno with SvelteKit

Explore how to create a Juno project developed with SvelteKit.

Table of contents


Quickstart

Learn how to create a satellite, set up a collection, and save data from a React app.

1. Set up a satellite and new collection

Create a new satellite in the Juno's console.

After your project is ready, create a collection in your datastore, which we'll call demo, using the console.

2. Create a SvelteKit app

Create a SvelteKit app using the npm create command:

npm create svelte@latest myjunoapp

3. Install the Juno SDK core library

Use @junobuild/core client library which provides a convenient interface for working with Juno from a SvelteKit app.

Navigate to the SvelteKit app and install @junobuild/core.

cd myjunoapp && npm i @junobuild/core

4. Insert data from your app

Create a new file +layout.svelte in src/routes and initialize the library with your public satellite ID.

Add an insert function to persist a document.

+layout.svelte
<script>
import { onMount } from "svelte";
import { initJuno } from "@junobuild/core";

// TODO: Replace 'satelliteId' with your actual satellite ID
onMount(
async () =>
await initJuno({
satelliteId: "aaaaa-bbbbb-ccccc-ddddd-cai",
})
);
</script>

<slot />

Replace the existing content in your +page.svelte file in the same routes directory with the following code.

+page.svelte
<script>
import { setDoc } from "@junobuild/core";

let doc;

const insert = async () =>
(doc = await setDoc({
collection: "demo",
doc: {
key: `my-key-${new Date().getTime()}`,
data: {
hello: "world",
},
},
}));
</script>

<button on:click="{insert}">Insert a document</button>

{#if doc !== undefined}
<span>Key: {doc.key}</span>
{/if}

5. Start the app

Start the app, go to http://localhost:5173 in a browser, click "Insert a document," and you should see the data successfully persisted in your satellite on the blockchain.


Registration-form app

This example demonstrates how to build a basic registration-form app. The app authenticates and identifies the user, stores their information in a simple key-pair database, and allows the user to log in and retrieve their data. The app uses:

  • Juno datastore: a simple key-pair database for storing user data and other information.
  • Juno authentication: easy-to-use SDKs that support truly anonymous authentication.

For sample code and instructions, visit the guide 👉 GitHub repo.


Hosting

If you're looking to deploy your existing app or website developed with SvelteKit and Juno, this guide is for you.

1. Static site generation

The Internet Computer, including Juno, currently does not support Server Side Rendering. Therefore, it is recommended to generate a pre-rendered or client-side-only frontend application.

We suggest using the adapter-static option from SvelteKit and replacing the default adapter.

Remove and install the adapter:

npm rm @sveltejs/adapter-auto && npm i -D @sveltejs/adapter-static

Update the import in svelte.config.js file:

svelte.config.js
import adapter from "@sveltejs/adapter-static";

/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
},
};

export default config;

Create a file +layout.js in src/routes to set the prerender option:

+layout.js
export const prerender = true;

2. Set up a satellite

If you haven't created a satellite yet, go ahead and create a new one in the Juno's console.

3. Install Juno CLI and log in

Install the Juno command line interface by executing the following command in your terminal:

npm i -g @junobuild/cli

After the CLI is ready, log in to your satellite from your terminal to authenticate your device.

juno login

4. Deploy

Build your app:

npm run build

Deploy your project by running the following command from your project’s root folder:

juno deploy

When prompted to provide the name or path of the folder containing your built dapp files, answer build.

5. Open

Open your browser and you should see your deployed app or website.

juno open