Skip to main content

Plugins

Juno provides various plugins to simplify your development workflow. We also warmly welcome community contributions. If you would like to create or submit plugins or any libraries, please reach out or explore our repository!

Next.js Plugin​

If you are developing your app using Next.js, this plugin automatically loads Satellite and Orbiter IDs from your project's configuration file.

These values allow you to instantiate Juno in your code without the need to manually define environment variables.

// Init a Satellite
await initSatellite();

// Init the analytics
initOrbiter();

However, if you wish to explicitly use the environment variables that are loaded by the plugin, you can do so. This is notably required if you specify a prefix other than NEXT_PUBLIC_.

// Init a Satellite
await initSatellite({ satelliteId: process.env.NEXT_PUBLIC_SATELLITE_ID });

// Init the analytics
initOrbiter({
  satelliteId: process.env.NEXT_PUBLIC_SATELLITE_ID,
  orbiterId: process.env.NEXT_PUBLIC_ORBITER_ID
});

Installation​

Add it to your dev dependencies with:

npm i @junobuild/nextjs-plugin -D

Usage​

In your Next.js config file — whether it's next.config.js, next.config.ts, next.config.mjs or else — wrap your configuration with withJuno to automatically load Juno settings:

import { withJuno } from "@junobuild/nextjs-plugin";

export default withJuno();

The plugin sets the build output to export by default. You can override the option or provide additional options as follows:

import { withJuno } from "@junobuild/nextjs-plugin";

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export"
};

export default withJuno({ nextConfig });

In other words, if you want to include additional Next.js configuration (e.g. i18n, env etc.), just define them in your nextConfig object and pass it to withJuno.

Local development​

By default, the plugin supports local development and loads environment variables accordingly.

You can use the container option to:

  • Provide a custom container URL (e.g. for an emulator running on a specific port), or
  • Set it to false to disable local development behavior entirely.
next.config.mjs
import { withJuno } from "@junobuild/nextjs-plugin";

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export"
};

export default withJuno({ nextConfig, juno: { container: false } });

More information​

Discover additional information in the library's README.

Vite Plugin​

If you are developing your app using Vite, this plugin automatically loads the Satellite ID from your project's configuration file. If you are using analytics, it also loads the Orbiter ID too.

These values allow you to instantiate Juno in your code without the need to manually define environment variables.

// Init a Satellite
await initSatellite();

// Init the analytics
initOrbiter();

However, if you wish to explicitly use the environment variables that are loaded by the plugin, you can do so. This is notably required if you specify a prefix other than the default, such as VITE_ or PUBLIC_.

// Init a Satellite
await initSatellite({ satelliteId: import.meta.env.VITE_SATELLITE_ID });

// Init the analytics
initOrbiter({
  satelliteId: import.meta.env.VITE_SATELLITE_ID,
  orbiterId: import.meta.env.VITE_ORBITER_ID
});

Installation​

Add it to your dev dependencies with:

npm i @junobuild/vite-plugin -D

Usage​

Add the plugin to your Vite configuration — whether you're using TypeScript or JavaScript — to automatically load Juno settings:

vite.config.js
import juno from "@junobuild/vite-plugin";

export default defineConfig({
  plugins: [juno()]
});

Local development​

By default, the plugin supports local development and loads environment variables accordingly.

You can use the container option to:

  • Provide a custom container URL (e.g. for an emulator running on a specific port), or
  • Set it to false to disable local development behavior entirely.
vite.config.js
import juno from "@junobuild/vite-plugin";

export default defineConfig({
  plugins: [
    juno({
      container: false
    })
  ]
});

More information​

Discover additional options in the library's README.