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.
await Promise.all([initSatellite(), 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_
.
await Promise.all([
initSatellite({
satelliteId: process.env.NEXT_PUBLIC_SATELLITE_ID
}),
initOrbiter({
satelliteId: process.env.NEXT_PUBLIC_SATELLITE_ID,
orbiterId: process.env.NEXT_PUBLIC_ORBITER_ID
})
]);
Installation
npm i @junobuild/nextjs-plugin -D
Usage
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 });
Local development
When developing locally, use the container
option to inform the plugin that it should accommodate local environment variables.
import { withJuno } from "@junobuild/nextjs-plugin";
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "export"
};
export default withJuno({ nextConfig, juno: { container: true } });
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.
await Promise.all([initSatellite(), 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_
.
await Promise.all([
initSatellite({
satelliteId: import.meta.env.VITE_SATELLITE_ID
}),
initOrbiter({
satelliteId: import.meta.env.VITE_SATELLITE_ID,
orbiterId: import.meta.env.VITE_ORBITER_ID
})
]);
Installation
npm i @junobuild/vite-plugin -D
Usage
import juno from "@junobuild/vite-plugin";
export default defineConfig({
plugins: [juno()]
});
Local development
When developing locally, use the container
option to inform the plugin that it should accommodate local environment variables.
import juno from "@junobuild/vite-plugin";
export default defineConfig({
plugins: [
juno({
container: true
})
]
});
More information
Discover additional options in the library's README.