Skip to main content

Use Juno with SvelteKit

Explore how to create a Juno project developed with SvelteKit.

What would you like to do?

Options

Choose Build if you want to build a full featured rich application.

Choose Hosting if you just want to deploy a website.

Build​

Ready to implement a feature-rich application with Juno? You can choose a step-by-step approach, building each component gradually, or dive into our quickstart template, which showcases Juno's core features.

Which path would you like to explore next?

Step-by-step​

This guide provides quickstart instructions for integrating Juno in two scenarios: starting a new project and adding Juno to an existing SvelteKit app.

1. Choose Your Integration Path​

You can either start a new project or add Juno to an existing app.

Path A: Start a new project with a template​

Create a new project using the Juno quickstart CLI:

npm create juno@latest -- --template sveltekit-starter
Path B: Integrate Juno into an existing SvelteKit app​

Navigate to your existing app:

cd your-existing-app

and install Juno SDK:

npm i @junobuild/core

2. Start the Emulator​

If the Juno admin CLI (required to run the emulator) is not installed yet, run:

npm i -g @junobuild/cli

Once installed, start the local emulator:

juno dev start

Open the Console UI at http://localhost:5866/.

note

When developing locally, you get an all-in-one emulator that closely mimics the production environment. This includes providing Juno and its Console UI locally.

Sign in, create a Satellite, navigate to the Datastore section, and create a collection named demo.

3. Configure​

To initialize the library with the Satellite ID you created, configure it in the juno.config.ts file (or other extension), which should be available at the root of your project.

Replace <DEV_SATELLITE_ID> with the ID.

import { defineConfig } from "@junobuild/config";

export default defineConfig({
  satellite: {
    ids: {
      development: "<DEV_SATELLITE_ID>",
      production: "<PROD_SATELLITE_ID>"
    },
    source: "build",
    predeploy: ["npm run build"]
  }
});

4. Install the Plugin (If Needed)​

If you didn't start your project from a template, you'll need to install the plugin to automatically inject the Satellite ID into your app as an environment variable.

Proceed as documented here.

5. Insert data from your app​

Create a new file +layout.svelte in src/routes and initialize your Satellite for your app.

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

  onMount(initSatellite);
</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: window.crypto.randomUUID(),
        data: {
          hello: "world"
        }
      }
    }));
</script>

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

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

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

What's Next: Going Live

Once you're ready to deploy your app for others to access, continue to the Deployment guide.

Quickstart​

This example demonstrates how to quickly deploy a basic note-taking app that integrates Juno's core features:

  • Authentication: easy-to-use SDKs that support truly anonymous authentication.
  • Datastore: a simple key-pair database for storing user data and other information.
  • Storage: a file storage system to store and serve user-generated content, such as photos.

Using the Juno CLI, you can easily scaffold this app.

npm create juno@latest -- --template sveltekit-example

Follow the CLI prompts to choose the note-taking app example and select local development. The CLI will manage all configurations and dependencies, allowing you to focus on exploring and customizing your app right away.

Hosting​

If you already have an SvelteKit app, you're all set — proceed to the Deployment section to upload your project to production.

Otherwise, you can bootstrap a new website using the Juno template by running the following command:

npm create juno@latest -- --template sveltekit-starter

Once you’re set up, continue to the Deployment section below.

Deployment​

Use this guide to deploy your project to production — directly to a smart contract on mainnet.

1. Static site generation​

The Internet Computer, including Juno, currently does not support Server Side Rendering (without workaround). 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. Deploy​

Once your satellite is up and running, you can proceed with uploading your app to your smart contract.

You can either automate your deployment with GitHub Actions (recommended) or deploy manually from your device. Choose your method: