Skip to main content

Setup the SDK

To add rich features to your web app, follow these steps to connect Juno and enable advanced functionality.

info

If you intend to use Juno solely for hosting purposes, you may skip the following steps.

Initialization​

  1. Install the Juno SDK using npm (or your preferred package manager):
npm i @junobuild/core

Note: If you’re using a framework like SvelteKit or Next.js, you might need to install the version with peer dependencies instead:

npm i @junobuild/core-peer
  1. Initialize your satellite in your web app:
import { initSatellite } from "@junobuild/core";

await initSatellite();

It is generally recommended to initialize globally the library at the top of your application.

Configuration​

To connect your application with your smart contract (your Satellite) and other necessary resources, some configuration is required. This setup ensures your application can securely access and initialize the correct Satellite instance, environment variables, and key settings.

For most developers, the Next.js or Vite plugins streamline this process by managing environment variables automatically. However, if you’re not using one of these plugins, a bit of manual configuration is needed.

Automated​

When using the plugins, the configuration handled through a juno.config file (TypeScript, JavaScript, or JSON) at your project root is automatically injected within your application. The plugins read the file and automatically load the required information when you build and run your dApp.

Juno’s provided templates come preconfigured with these plugins, so you can quickly get started. For details on setting up the plugin yourself, refer to the Next.js or Vite documentation.

Manually configure your application​

If you aren’t using a plugin, you can still configure your application by providing the satelliteId directly. In this case, add or update the following in your configuration file:

import { initSatellite } from "@junobuild/core";

await initSatellite({
  satelliteId: "your-actual-satellite-id"
});

Replace your-actual-satellite-id with your actual ID, available in the console on the overview page.