Setup the SDK
To add rich features to your web app, follow these steps to connect Juno and enable advanced functionality.
If you intend to use Juno solely for hosting purposes, you may skip the following steps.
Initialization
- Install the Juno SDK:
- npm
- yarn
- pnpm
npm i @junobuild/core
yarn add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal
pnpm add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal
- 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.