Skip to main content

Build a SvelteKit App

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

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.