### Install Juno SDK and Core Dependencies Source: https://juno.build/docs/intro/setup-the-sdk Install the Juno SDK and its core Dfinity dependencies, including agent, auth-client, candid, identity, and principal packages. Choose the command for your preferred package manager. ```npm npm i @junobuild/core ``` ```yarn yarn add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` ```pnpm pnpm add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` -------------------------------- ### Scaffold a New Project with Juno CLI Source: https://juno.build/docs/intro/intro Use the Juno command-line interface to quickly initialize a new project. The CLI provides ready-made templates for popular frontend frameworks like Astro, Next.js, React, SvelteKit, Vue, and Angular. Select your preferred package manager (npm, yarn, or pnpm) and follow the interactive prompts to set up your application. ```npm npm create juno@latest ``` ```yarn yarn create juno ``` ```pnpm pnpm create juno ``` -------------------------------- ### Create a new Vue project with Juno template Source: https://juno.build/docs/intro/guides/vue Use the Juno quickstart CLI to scaffold a new Vue project integrated with Juno, providing a pre-configured setup. ```npm npm create juno@latest -- --template vue-starter ``` ```yarn yarn create juno -- --template vue-starter ``` ```pnpm pnpm create juno -- --template vue-starter ``` -------------------------------- ### Initialize Juno Analytics SDK from CDN Source: https://juno.build/docs/intro/build/analytics/setup Demonstrates how to load and initialize the Juno Analytics SDK directly from a CDN (jsDelivr) by adding a script tag to an HTML file. It initializes Orbiter with a specified satellite and orbiter ID upon DOM content loaded, ensuring analytics start when the site is ready. ```HTML ``` -------------------------------- ### Install Juno Analytics Library with npm, yarn, or pnpm Source: https://juno.build/docs/intro/build/analytics/setup Commands to install the `@junobuild/analytics` package using common JavaScript package managers. Choose the command corresponding to your preferred package manager. ```npm npm i @junobuild/analytics ``` ```yarn yarn add @junobuild/analytics ``` ```pnpm pnpm add @junobuild/analytics ``` -------------------------------- ### Install Juno CLI and start local emulator Source: https://juno.build/docs/intro/guides/vue Install the Juno admin CLI globally if it's not already installed, then start the local development emulator to mimic the production environment and access its Console UI. ```npm npm i -g @junobuild/cli ``` ```Shell juno dev start ``` -------------------------------- ### Start Juno Local Development Emulator Source: https://juno.build/docs/intro/guides/nextjs Initiate the Juno local development emulator. This provides an all-in-one local environment that closely mimics the production setup, including the Juno Console UI. ```shell juno dev start ``` -------------------------------- ### Example Calculation for Freezing Threshold Source: https://juno.build/docs/intro/reference/settings This example demonstrates the application of the freezing threshold formula using specific values for idle cycles burned per day and freezing threshold seconds to determine the required cycles for a module to remain active. ```Text required_cycles = (10,000,000,000 × 2,592,000) / 86,400 = 25,920,000,000,000,000 / 86,400 = 300,000,000,000 cycles = 0.3 T Cycles ``` -------------------------------- ### Install Juno CLI Globally Source: https://juno.build/docs/intro/guides/manual-deployment This command installs the Juno command-line interface globally on your system, enabling access to Juno's deployment and management tools. ```npm npm i -g @junobuild/cli ``` ```yarn yarn global add @junobuild/cli ``` ```pnpm pnpm add -g @junobuild/cli ``` -------------------------------- ### Scaffold Juno SvelteKit Example App Source: https://juno.build/docs/intro/guides/sveltekit These commands demonstrate how to quickly scaffold a basic note-taking application integrated with Juno's core features using the Juno CLI. Options are provided for npm, yarn, and pnpm package managers to create the project from a SvelteKit example template. ```npm npm create juno@latest -- --template sveltekit-example ``` ```yarn yarn create juno -- --template sveltekit-example ``` ```pnpm pnpm create juno -- --template sveltekit-example ``` -------------------------------- ### Initialize Juno Satellite in a Web Application Source: https://juno.build/docs/intro/setup-the-sdk Import and call the `initSatellite` function from the `@junobuild/core` package to initialize your Juno satellite. It is generally recommended to initialize the library globally at the top of your application for consistent access. ```javascript import { initSatellite } from "@junobuild/core"; await initSatellite(); ``` -------------------------------- ### Conditionally Initialize Juno Analytics SDK for Production Source: https://juno.build/docs/intro/build/analytics/setup Provides a best practice example for initializing the Juno Analytics SDK only in production environments. This prevents test data from polluting your metrics if your local environment is connected to production, and avoids errors when analytics aren't set up locally during development. ```JavaScript if (DEV) { return; } initOrbiter(); ``` -------------------------------- ### Create a new SvelteKit project with Juno template Source: https://juno.build/docs/intro/guides/sveltekit Use the Juno quickstart CLI to scaffold a new SvelteKit project pre-configured with Juno, providing options for npm, yarn, and pnpm package managers. ```Shell npm create juno@latest -- --template sveltekit-starter ``` ```Shell yarn create juno -- --template sveltekit-starter ``` ```Shell pnpm create juno -- --template sveltekit-starter ``` -------------------------------- ### Initialize Juno Project Configuration Source: https://juno.build/docs/intro/guides/manual-deployment Initializes a new Juno project, generating a configuration file and guiding the user through the authentication process with their Juno Satellite via the browser. This step securely links your machine to your Juno Console. ```cli juno init ``` -------------------------------- ### Install Juno CLI Source: https://juno.build/docs/intro/guides/rust Instructions to install the Juno Command Line Interface globally using different package managers. ```shell npm i -g @junobuild/cli ``` ```shell yarn global add @junobuild/cli ``` ```shell pnpm add -g @junobuild/cli ``` -------------------------------- ### Install Juno CLI Globally Source: https://juno.build/docs/intro/guides/react Install the Juno command-line interface globally to enable running the local emulator and other Juno development tools. ```npm npm i -g @junobuild/cli ``` -------------------------------- ### Start Juno local emulator Source: https://juno.build/docs/intro/guides/sveltekit Initiate the local Juno emulator and Console UI for development, which closely mimics the production environment. ```Shell juno dev start ``` -------------------------------- ### Juno Configuration for Environment-Specific IDs Source: https://juno.build/docs/intro/build/analytics/setup This `juno.config.js` example demonstrates how to configure distinct `satellite` and `orbiter` IDs for different environments, such as `production` and `development`. This setup allows for separate tracking and management of your application across various deployment stages. ```javascript import { defineConfig } from "@junobuild/config"; export default defineConfig({ satellite: { id: "qsgjb-riaaa-aaaaa-aaaga-cai", source: "dist" }, orbiter: { ids: { production: "aaaa-bbbbb-ccccc-ddddd-cai", development: "ffff-eeee-ddddd-ccccc-cai" } } }); ``` -------------------------------- ### Juno CLI: `juno init` Command Reference Source: https://juno.build/docs/intro/reference/cli The `juno init` command sets up a new Juno project by creating a `juno.config` file. This file is crucial for deploying, configuring, and running other CLI commands. Options allow for minimal setup, environment mode, and custom URLs. ```APIDOC Usage: juno init [options] Options: --minimal Skip few prompts and generate a config file with a placeholder satellite ID. -m, --mode Set env mode. For example production or a custom string. Default is production. --container-url Override a custom container URL. If not provided, defaults to production or the local container in development mode. --console-url Specify a custom URL to access the developer Console. -h, --help Output usage information. ``` -------------------------------- ### JavaScript: Example Usage of countDocs Source: https://juno.build/docs/intro/build/datastore/development Shows a simple example of how to use the `countDocs` function to get the number of documents in a specified collection. ```JavaScript import { countDocs } from "@junobuild/core"; const count = await countDocs({ collection: "my_collection_key" }); ``` -------------------------------- ### Create new Astro project with Juno CLI template Source: https://juno.build/docs/intro/guides/astro Use the Juno quickstart CLI to create a new Astro project pre-configured with Juno, choosing your preferred package manager. ```shell npm create juno@latest -- --template astro-starter ``` ```shell yarn create juno -- --template astro-starter ``` ```shell pnpm create juno -- --template astro-starter ``` -------------------------------- ### Install Juno Admin CLI globally Source: https://juno.build/docs/intro/guides/sveltekit Install the Juno command-line interface globally to enable local development features, such as running the emulator. ```Shell npm i -g @junobuild/cli ``` -------------------------------- ### Start Juno Local Development Environment Source: https://juno.build/docs/intro/build/functions/lifecycle Starts the local development environment for Juno using Docker, allowing you to test your functions locally. ```shell juno dev start ``` -------------------------------- ### JavaScript: Example Usage of listDocs with Filters Source: https://juno.build/docs/intro/build/datastore/development Demonstrates how to use the `listDocs` function with various filter, paginate, order, and owner options in a JavaScript environment. ```JavaScript import { listDocs } from "@junobuild/core"; const myList = await listDocs({ collection: "my_collection_key", filter: { matcher: { key: "^doc_", description: "example", createdAt: { matcher: "greaterThan", timestamp: 1627776000n }, updatedAt: { matcher: "between", timestamps: { start: 1627770000n, end: 1627900000n } } }, paginate: { startAfter: "doc_10", limit: 5 }, order: { desc: true, field: "updated_at" }, owner: "some_owner_id_or_principal" } }); ``` -------------------------------- ### Native Logging Example Usage Source: https://juno.build/docs/intro/build/functions/logs This example demonstrates how to use the Internet Computer's native logging system with the `ic_cdk` crate. Messages printed or trapped using `ic_cdk::print` and `ic_cdk::trap` are automatically collected as logs. These logs are persisted within the blockchain up to 4 KiB and are more efficient than custom solutions. ```Rust fn log() { ic_cdk::print("This is a log entry."); ic_cdk::trap("There was an error."); } ``` -------------------------------- ### Install Juno SDK and DFINITY Dependencies Source: https://juno.build/docs/intro/guides/nextjs Install the core Juno SDK along with its required DFINITY agent, authentication client, candid, identity, and principal dependencies into your existing Next.js project. ```npm npm i @junobuild/core ``` ```yarn yarn add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` ```pnpm pnpm add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` -------------------------------- ### Configure URL Rewrites in Juno Source: https://juno.build/docs/intro/reference/configuration This snippet illustrates how to set up URL rewrites in `juno.config.js` for a Juno project. Rewrites allow displaying the same content for multiple URLs, especially useful with pattern matching. It shows an example of rewriting `/hello/**` to `/hello/world.html`. ```javascript import { defineConfig } from "@junobuild/config"; export default defineConfig({ satellite: { id: "qsgjb-riaaa-aaaaa-aaaga-cai", source: "dist", storage: { rewrites: [ { source: "/hello/**", destination: "/hello/world.html" } ] } } }); ``` -------------------------------- ### Install Juno Next.js Plugin Source: https://juno.build/docs/intro/reference/plugins Instructions for adding the @junobuild/nextjs-plugin to your project's development dependencies using npm, yarn, or pnpm. ```npm npm i @junobuild/nextjs-plugin -D ``` ```yarn yarn add @junobuild/nextjs-plugin -D ``` ```pnpm pnpm add @junobuild/nextjs-plugin -D ``` -------------------------------- ### Configure Juno Analytics Orbiter and Satellite IDs in juno.config.js Source: https://juno.build/docs/intro/build/analytics/setup Example `juno.config.js` for defining satellite and orbiter IDs when using Next.js or Vite plugins. This configuration centralizes your project's IDs. Remember to replace the placeholder Orbiter ID with your actual ID. ```JavaScript import { defineConfig } from "@junobuild/config"; export default defineConfig({ satellite: { id: "qsgjb-riaaa-aaaaa-aaaga-cai", source: "dist" }, orbiter: { id: "aaaa-bbbbb-ccccc-ddddd-cai" // <-- Replace with your ID } }); ``` -------------------------------- ### Install Juno SDK into an existing SvelteKit app Source: https://juno.build/docs/intro/guides/sveltekit Install the core Juno SDK and its DFINITY dependencies into an existing SvelteKit project using npm, yarn, or pnpm. ```Shell npm i @junobuild/core ``` ```Shell yarn add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` ```Shell pnpm add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` -------------------------------- ### Create new Angular project with Juno CLI template Source: https://juno.build/docs/intro/guides/angular This command initializes a new Angular project using the Juno quickstart CLI template, setting up the basic structure for a Juno-integrated application. ```npm npm create juno@latest -- --template angular-starter ``` ```yarn yarn create juno -- --template angular-starter ``` ```pnpm pnpm create juno -- --template angular-starter ``` -------------------------------- ### Install SvelteKit Adapter Static for Deployment Source: https://juno.build/docs/intro/guides/sveltekit This command removes the default SvelteKit adapter and installs @sveltejs/adapter-static. This is crucial for generating a pre-rendered or client-side-only frontend application, which is recommended for deployment on the Internet Computer and Juno. ```npm npm rm @sveltejs/adapter-auto && npm i -D @sveltejs/adapter-static ``` -------------------------------- ### Start Juno Local Development Emulator Source: https://juno.build/docs/intro/guides/react Initiate the local Juno emulator, which provides an all-in-one development environment mimicking production, including the Console UI. ```Shell juno dev start ``` -------------------------------- ### Bootstrap New Juno SvelteKit Website Source: https://juno.build/docs/intro/guides/sveltekit These commands allow you to bootstrap a new SvelteKit website pre-configured with Juno. They provide options for npm, yarn, and pnpm to create a new project using the SvelteKit starter template, streamlining the setup process for Juno integration. ```npm npm create juno@latest -- --template sveltekit-starter ``` ```yarn yarn create juno -- --template sveltekit-starter ``` ```pnpm pnpm create juno -- --template sveltekit-starter ``` -------------------------------- ### Create New Next.js Project with Juno CLI Template Source: https://juno.build/docs/intro/guides/nextjs This command initializes a new Next.js project using the Juno quickstart CLI template. It sets up the basic project structure with pre-configured Juno integration. ```npm npm create juno@latest -- --template nextjs-starter ``` ```yarn yarn create juno -- --template nextjs-starter ``` ```pnpm pnpm create juno -- --template nextjs-starter ``` -------------------------------- ### Example of UTM Parameters for Campaign Tracking Source: https://juno.build/docs/intro/build/analytics/development This snippet illustrates the structure of UTM parameters appended to a URL. Juno Analytics automatically processes these standard query parameters (`utm_source`, `utm_medium`, `utm_campaign`) to help track how visitors arrive at your application without requiring additional setup. ```text ?utm_source=newsletter&utm_medium=email&utm_campaign=rocket-launch ``` -------------------------------- ### Start Juno Local Development Emulator Source: https://juno.build/docs/intro/guides/rust Command to start the local development emulator, which requires Docker to be running. ```shell juno dev start ``` -------------------------------- ### Install Juno SDK and DFINITY Dependencies Source: https://juno.build/docs/intro/guides/react Install the core Juno SDK and its required DFINITY agent, auth-client, candid, identity, and principal dependencies into an existing React project. Choose the package manager relevant to your project. ```npm npm i @junobuild/core ``` ```yarn yarn add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` ```pnpm pnpm add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` -------------------------------- ### Initialize Juno Analytics Orbiter using Plugins and Configuration Source: https://juno.build/docs/intro/build/analytics/setup Initializes the Juno Analytics Orbiter when your project uses Juno plugins and a `juno.config` file. Call `initOrbiter()` as early as possible in your application's startup process to ensure proper tracking. ```JavaScript import { initOrbiter } from "@junobuild/analytics"; initOrbiter(); ``` -------------------------------- ### Install Juno CLI Source: https://juno.build/docs/intro/guides/typescript Instructions to install the Juno CLI globally using different package managers (npm, Yarn, pnpm) to set up your development environment. ```npm npm i -g @junobuild/cli ``` ```yarn yarn global add @junobuild/cli ``` ```pnpm pnpm add -g @junobuild/cli ``` -------------------------------- ### Install Juno CLI Globally via npm Source: https://juno.build/docs/intro/reference/cli This command installs the Juno Command Line Interface globally on your system using npm. It provides essential tools for managing and deploying Juno projects. ```Shell npm i -g @junobuild/cli ``` -------------------------------- ### Install Juno Config Types for Intellisense Source: https://juno.build/docs/intro/reference/configuration This command installs the `@junobuild/config` package as a development dependency, providing TypeScript and JavaScript type definitions for enhanced IDE Intellisense when working with Juno configurations. ```bash npm install @junobuild/config --save-dev ``` -------------------------------- ### Install Juno CLI Globally Source: https://juno.build/docs/intro/guides/nextjs Install the Juno command-line interface globally on your system. This CLI is essential for running the local Juno emulator and other development tools. ```npm npm i -g @junobuild/cli ``` -------------------------------- ### Example Juno Satellite Development Configuration (JSON) Source: https://juno.build/docs/intro/reference/emulator/satellite This example demonstrates a `juno.dev.config.json` file. It configures a 'metadata' collection for the Datastore with 'managed' read/write permissions and a 'content' collection for Storage with 'public' read/write permissions. Additionally, it defines an administrative controller with a specific ID. ```JSON { "satellite": { "collections": { "db": [ { "collection": "metadata", "read": "managed", "write": "managed", "memory": "stable", "mutablePermissions": true } ], "storage": [ { "collection": "content", "read": "public", "write": "public", "memory": "stable", "mutablePermissions": true } ] }, "controllers": [ { "id": "535yc-uxytb-gfk7h-tny7p-vjkoe-i4krp-3qmcl-uqfgr-cpgej-yqtjq-rqe", "scope": "admin" } ] } } ``` -------------------------------- ### Install Juno Functions Library Source: https://juno.build/docs/intro/reference/functions/typescript/utils Commands to add the @junobuild/functions library to your project using different package managers. ```npm npm i @junobuild/functions ``` ```yarn yarn add @junobuild/functions ``` ```pnpm pnpm add @junobuild/functions ``` -------------------------------- ### Create New React Project with Juno CLI Template Source: https://juno.build/docs/intro/guides/react Use the Juno CLI to scaffold a new React project with a pre-configured template. This command initializes a new directory with the necessary Juno setup for a React application. ```npm npm create juno@latest -- --template react-starter ``` ```yarn yarn create juno -- --template react-starter ``` ```pnpm pnpm create juno -- --template react-starter ``` -------------------------------- ### Install Juno SDK and Dependencies in NodeJS Source: https://juno.build/docs/intro/guides/nodejs Commands to install the Juno SDK and its DFINITY agent dependencies using npm, yarn, or pnpm package managers for a NodeJS project. ```npm npm i @junobuild/core ``` ```yarn yarn add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` ```pnpm pnpm add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` -------------------------------- ### Juno CLI: Start Module Command Source: https://juno.build/docs/intro/reference/cli The `juno start` command is designed to initiate a specific module. Similar to the stop command, it requires specifying the target module type (satellite, mission-control, or orbiter) with the `--target` option. Users can also define the environment mode and custom URLs for the container or console. ```APIDOC Usage: juno start [options] Options: -t, --target Which module type should be started? Valid targets are satellite, mission-control or orbiter. -m, --mode Set env mode. For example production or a custom string. Default is production. --container-url Override a custom container URL. If not provided, defaults to production or the local container in development mode. --console-url Specify a custom URL to access the developer Console. -h, --help Output usage information. Notes: - Targets can be shortened to s for satellite, m for mission-control and o for orbiter. ``` -------------------------------- ### Bootstrap New Angular Website with Juno Starter Template Source: https://juno.build/docs/intro/guides/angular These commands provide a quick way to bootstrap a new Angular website using the Juno CLI's `angular-starter` template. This is useful for users who don't have an existing Angular app and want to start a new project pre-configured for Juno integration. ```npm npm create juno@latest -- --template angular-starter ``` ```yarn yarn create juno -- --template angular-starter ``` ```pnpm pnpm create juno -- --template angular-starter ``` -------------------------------- ### Start Juno Local Development Emulator Source: https://juno.build/docs/intro/guides/local-development Command to launch the Juno local development emulator and all necessary services within your project folder. It's recommended to run this in a dedicated terminal window. ```Shell juno dev start ``` -------------------------------- ### Install Juno CLI Globally Source: https://juno.build/docs/intro/guides/local-development Instructions to install the Juno Command Line Interface globally using different JavaScript package managers (npm, yarn, pnpm). This is the first step to interact with the Juno local development environment. ```npm npm i -g @junobuild/cli ``` ```yarn yarn global add @junobuild/cli ``` ```pnpm pnpm add -g @junobuild/cli ``` -------------------------------- ### Install Juno SDK into an existing Astro app Source: https://juno.build/docs/intro/guides/astro Install the Juno SDK and its core DFINITY dependencies into your existing Astro project using your preferred package manager. ```shell npm i @junobuild/core ``` ```shell yarn add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` ```shell pnpm add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` -------------------------------- ### Install Juno Admin CLI globally Source: https://juno.build/docs/intro/guides/astro Install the Juno admin command-line interface globally, which is required to run the local emulator and other development tools. ```shell npm i -g @junobuild/cli ``` -------------------------------- ### JavaScript/TypeScript Example: Listing Documents with Advanced Filters Source: https://juno.build/docs/intro/build/storage/development Demonstrates how to use the listDocs function with various optional parameters, including matcher for key, description, and timestamp filtering, paginate for result control, order for sorting, and owner for specific asset ownership. ```JavaScript import { listDocs } from "@junobuild/core"; const myList = await listDocs({ collection: "my_collection_key", filter: { matcher: { key: ".*.png$", // match assets with .png extension description: "holiday", // match description containing 'holiday' createdAt: { matcher: "greaterThan", timestamp: 1627776000n }, updatedAt: { matcher: "between", timestamps: { start: 1627770000n, end: 1627900000n } } }, paginate: { startAfter: "doc_10", limit: 5 }, order: { desc: true, field: "updated_at" }, owner: "some_owner_id_or_principal" } }); ``` -------------------------------- ### Configure Juno Project with defineConfig Source: https://juno.build/docs/intro/guides/github-actions This JavaScript example demonstrates how to define the Juno satellite configuration using `defineConfig`. It specifies the production satellite ID, the build output directory, and a predeploy script for building the project before deployment. Users should replace placeholder values with their specific project details. ```JavaScript import { defineConfig } from "@junobuild/config"; export default defineConfig({ satellite: { ids: { production: "qsgjb-riaaa-aaaaa-aaaga-cai" // Replace with your satellite ID }, source: "dist", // Replace with your build output directory predeploy: ["npm run build"] // Adjust based on your package manager } }); ``` -------------------------------- ### Basic Usage of withJuno in Next.js Config Source: https://juno.build/docs/intro/reference/plugins This snippet demonstrates the minimal setup for integrating the Juno Next.js plugin by wrapping your next.config.js (or similar) with withJuno to automatically load Juno settings. ```JavaScript import { withJuno } from "@junobuild/nextjs-plugin"; export default withJuno(); ``` -------------------------------- ### Start Juno local development emulator Source: https://juno.build/docs/intro/guides/astro Initiate the Juno local emulator and Console UI, providing an all-in-one local environment that closely mimics production. ```shell juno dev start ``` -------------------------------- ### Initialize Juno Project Configuration File Source: https://juno.build/docs/intro/guides/github-actions Use this command to quickly generate a minimal `juno.config` file in your project's root directory. This file is crucial for defining your satellite ID and the source path for your built assets, streamlining the setup process for Juno deployments. ```CLI npx @junobuild/cli init --minimal ``` -------------------------------- ### Install Juno Functions SDK Source: https://juno.build/docs/intro/reference/functions/typescript/sdk Instructions to add the @junobuild/functions library to your project using npm, yarn, or pnpm. Ensure compatibility by following Juno release updates. ```npm npm i @junobuild/functions ``` ```yarn yarn add @junobuild/functions ``` ```pnpm pnpm add @junobuild/functions ``` -------------------------------- ### Bootstrap New Juno Next.js Starter Website Source: https://juno.build/docs/intro/guides/nextjs These commands allow users to bootstrap a new Next.js website using the Juno template, providing a starting point for projects that don't already have an existing Next.js application. This sets up a new project ready for Juno integration. ```npm npm create juno@latest -- --template nextjs-starter ``` ```yarn yarn create juno -- --template nextjs-starter ``` ```pnpm pnpm create juno -- --template nextjs-starter ``` -------------------------------- ### Navigate to Existing Application Directory Source: https://juno.build/docs/intro/guides/react Change the current directory to your existing React application's root folder before installing the Juno SDK. ```Shell cd your-existing-app ``` -------------------------------- ### Manually Initialize Juno SDK with Satellite ID Source: https://juno.build/docs/intro/setup-the-sdk This JavaScript code snippet demonstrates how to initialize the Juno SDK by directly providing the `satelliteId` using the `initSatellite` function from `@junobuild/core`. Users must replace `your-actual-satellite-id` with their specific ID obtained from the Juno console. ```JavaScript import { initSatellite } from "@junobuild/core"; await initSatellite({ satelliteId: "your-actual-satellite-id" }); ``` -------------------------------- ### GitHub Actions Workflow to Publish Serverless Functions Source: https://juno.build/docs/intro/guides/github-actions/publish-functions This GitHub Actions workflow automates the build and publication of serverless functions. It checks out the repository, sets up Node.js, installs dependencies, builds the functions using `juno-action`, and then publishes them to Juno, using a `JUNO_TOKEN` for authentication. It triggers on `workflow_dispatch` and `push` to the `main` branch. ```YAML name: Publish Serverless Functions on: workflow_dispatch: push: branches: [main] jobs: publish: runs-on: ubuntu-latest steps: - name: Check out the repo uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 22 registry-url: "https://registry.npmjs.org" - name: Install Dependencies run: npm ci - name: Build uses: junobuild/juno-action@main with: args: functions build - name: Publish uses: junobuild/juno-action@main with: args: functions publish env: JUNO_TOKEN: ${{ secrets.JUNO_TOKEN }} ``` -------------------------------- ### Bootstrap New React Website with Juno Template Source: https://juno.build/docs/intro/guides/react These commands allow you to bootstrap a new React website using a Juno template. This is useful if you don't already have an existing React application and want to start with a Juno-integrated project. Commands are provided for npm, yarn, and pnpm. ```npm npm create juno@latest -- --template react-starter ``` ```yarn yarn create juno -- --template react-starter ``` ```pnpm pnpm create juno -- --template react-starter ``` -------------------------------- ### Scaffold Juno Note-Taking App Example with CLI Source: https://juno.build/docs/intro/guides/angular These commands demonstrate how to quickly scaffold a basic note-taking application integrated with Juno's core features (authentication, datastore, storage) using the Juno CLI. Users can choose their preferred package manager (npm, yarn, or pnpm) to create the project from the `angular-example` template. ```npm npm create juno@latest -- --template angular-example ``` ```yarn yarn create juno -- --template angular-example ``` ```pnpm pnpm create juno -- --template angular-example ``` -------------------------------- ### Start Juno Local Emulator Source: https://juno.build/docs/intro/guides/typescript Command to kick off the local development emulator, which requires Docker and automatically recompiles and reloads on code changes. ```shell juno dev start --watch ``` -------------------------------- ### Build Frontend Application for Deployment Source: https://juno.build/docs/intro/guides/manual-deployment Prepares your frontend application for deployment by executing the framework's build command, generating optimized static assets in a designated output folder (e.g., 'build', 'out', or 'dist'). This step is crucial before deployment. ```npm npm run build ``` ```yarn yarn build ``` ```pnpm pnpm build ``` -------------------------------- ### Start Juno local emulator Source: https://juno.build/docs/intro/guides/angular Initiate the local Juno emulator, which provides an all-in-one development environment mimicking production, including the Console UI. This allows for local testing and development of Juno-powered features. ```Shell juno dev start ``` -------------------------------- ### Initialize Juno Satellite and Orbiter with Next.js Plugin (Explicit Env Vars) Source: https://juno.build/docs/intro/reference/plugins This example shows how to explicitly use environment variables (e.g., NEXT_PUBLIC_SATELLITE_ID, NEXT_PUBLIC_ORBITER_ID) for initializing Juno's Satellite and Orbiter. This is necessary if a custom prefix other than NEXT_PUBLIC_ is used. ```JavaScript // 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 }); ``` -------------------------------- ### Configure Satellite Source Directory Source: https://juno.build/docs/intro/reference/configuration This example demonstrates configuring the `source` field within the `satellite` section of `juno.config.js`. The `source` specifies the directory containing the built assets for your satellite, such as `dist` for React/Astro/Vue projects, which Juno uses for deployment. ```JavaScript import { defineConfig } from "@junobuild/config"; export default defineConfig({ satellite: { id: "qsgjb-riaaa-aaaaa-aaaga-cai", source: "dist" } }); ``` -------------------------------- ### Navigate to an existing SvelteKit app directory Source: https://juno.build/docs/intro/guides/sveltekit Change the current directory to your existing SvelteKit application before proceeding with Juno SDK installation. ```Shell cd your-existing-app ``` -------------------------------- ### Integrate Juno SDK into an existing Vue application Source: https://juno.build/docs/intro/guides/vue Navigate to your existing Vue project directory and install the Juno SDK core package along with its necessary Dfinity dependencies. ```Shell cd your-existing-app ``` ```npm npm i @junobuild/core ``` ```yarn yarn add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` ```pnpm pnpm add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` -------------------------------- ### Initialize Juno with explicit Vite environment variables Source: https://juno.build/docs/intro/reference/plugins This example shows how to explicitly reference environment variables loaded by the Vite plugin when initializing Juno's Satellite and Orbiter. This approach is necessary if a custom prefix (e.g., VITE_ or PUBLIC_) is used for the environment variables. ```JavaScript // 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 }); ``` -------------------------------- ### Install Juno Vite Plugin Source: https://juno.build/docs/intro/reference/plugins These commands demonstrate how to add the Juno Vite plugin to your project's development dependencies using npm, yarn, or pnpm package managers. Choose the command corresponding to your preferred package manager. ```Shell npm i @junobuild/vite-plugin -D ``` ```Shell yarn add @junobuild/vite-plugin -D ``` ```Shell pnpm add @junobuild/vite-plugin -D ``` -------------------------------- ### CLI: Create Juno App with Vue Example Template Source: https://juno.build/docs/intro/guides/vue Commands to quickly scaffold a basic note-taking app integrated with Juno's core features using various package managers. This template includes authentication, datastore, and storage functionalities. ```npm npm create juno@latest -- --template vue-example ``` ```yarn yarn create juno -- --template vue-example ``` ```pnpm pnpm create juno -- --template vue-example ``` -------------------------------- ### Scaffold Juno Next.js Example App Source: https://juno.build/docs/intro/guides/nextjs These commands demonstrate how to quickly scaffold a basic note-taking app integrated with Juno's core features (Authentication, Datastore, Storage) using different package managers. The CLI will manage configurations and dependencies, allowing immediate exploration and customization. ```npm npm create juno@latest -- --template nextjs-example ``` ```yarn yarn create juno -- --template nextjs-example ``` ```pnpm pnpm create juno -- --template nextjs-example ``` -------------------------------- ### Initialize Juno Analytics Orbiter by Manually Providing IDs Source: https://juno.build/docs/intro/build/analytics/setup Initializes the Juno Analytics Orbiter by directly passing your Satellite and Orbiter IDs. This method is used when you are not leveraging Juno plugins for configuration. Ensure you replace the placeholders with your actual IDs. ```JavaScript import { initOrbiter } from "@junobuild/analytics"; initOrbiter({ satelliteId: "", // replace with your Satellite ID orbiterId: "" // replace with your Orbiter ID }); ``` -------------------------------- ### Install @junobuild/functions library for IC-CDK Source: https://juno.build/docs/intro/reference/functions/typescript/ic-cdk Instructions to add the `@junobuild/functions` library to your project using npm, yarn, or pnpm. This library provides the IC-CDK for JS/TS, enabling interaction with the Internet Computer. ```npm npm i @junobuild/functions ``` ```yarn yarn add @junobuild/functions ``` ```pnpm pnpm add @junobuild/functions ``` -------------------------------- ### Navigate to existing Angular application directory Source: https://juno.build/docs/intro/guides/angular Change the current directory to your existing Angular application's root folder before installing Juno SDK. ```Shell cd your-existing-app ``` -------------------------------- ### Reuse Existing Juno Access Key via CLI Source: https://juno.build/docs/intro/miscellaneous/access-keys To reuse an access key already configured on your local machine for additional Juno modules, execute the `juno login` command. The CLI will detect existing keys and offer an option to reuse them, guiding you through the setup process. ```bash juno login ``` -------------------------------- ### Juno Development Commands Source: https://juno.build/docs/intro/reference/cli Manages local Internet Computer network tasks, including starting and stopping the network. It also provides aliases for 'juno functions build' and 'juno functions eject' commands, streamlining developer workflows. ```CLI Usage: juno dev [options] Subcommands: start Start a local Internet Computer network in a container. stop Stop the local network. build Alias for juno functions build. eject Alias for juno functions eject. ``` -------------------------------- ### GitHub Actions Workflow for Frontend Deployment to Juno Source: https://juno.build/docs/intro/guides/github-actions/deploy-frontend This YAML configuration defines a GitHub Actions workflow named 'Deploy Frontend to Juno'. It triggers on `workflow_dispatch` and pushes to the `main` branch. The job checks out the repository, sets up Node.js v22, installs dependencies using `npm ci`, and then uses the `junobuild/juno-action` to deploy the frontend, requiring a `JUNO_TOKEN` secret for authentication. ```YAML name: Deploy Frontend to Juno on: workflow_dispatch: push: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - name: Check out the repo uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 22 registry-url: "https://registry.npmjs.org" - name: Install Dependencies run: npm ci - name: Deploy to Juno uses: junobuild/juno-action@main with: args: deploy env: JUNO_TOKEN: ${{ secrets.JUNO_TOKEN }} ``` -------------------------------- ### CLI: Bootstrap New Vue Website with Juno Starter Template Source: https://juno.build/docs/intro/guides/vue Commands to bootstrap a new Vue.js website using the Juno starter template via various package managers, for users who don't have an existing Vue app. ```npm npm create juno@latest -- --template vue-starter ``` ```yarn yarn create juno -- --template vue-starter ``` ```pnpm pnpm create juno -- --template vue-starter ``` -------------------------------- ### JavaScript: Set Document in JunoBuild Datastore Source: https://juno.build/docs/intro/guides/rust This JavaScript function defines an interface `Example` and uses `crypto.randomUUID()` to generate a unique key. It then calls `setDoc` to persist a document with a 'hello: world' payload into the 'demo' collection of the Datastore, logging the result. ```JavaScript interface Example { hello: string; } let key: string | undefined; const set = async () => { key = crypto.randomUUID(); const record = await setDoc({ collection: "demo", doc: { key, data: { hello: "world" } } }); console.log("Set done", record); }; ``` -------------------------------- ### Start Local Internet Computer Network Source: https://juno.build/docs/intro/reference/cli Initiates a local Internet Computer network within a container. This command offers options to specify the language for serverless functions (Rust, TypeScript, JavaScript), define cargo or source paths, and enable watch mode for automatic rebuilding upon source file changes. ```CLI Usage: juno dev start [options] Options: -l, --lang Specify the language for building the serverless functions: rust, typescript or javascript. --cargo-path Path to the Rust manifest. --source-path Optional path to the TypeScript or JavaScript entry file. -w, --watch Rebuild your functions automatically when source files change. -h, --help Output usage information. ``` -------------------------------- ### Extend Next.js Config with Juno Plugin Source: https://juno.build/docs/intro/reference/plugins This example shows how to pass an existing Next.js configuration object to withJuno, allowing you to include additional Next.js options (e.g., output: "export", i18n, env) while still benefiting from the Juno plugin's features. ```JavaScript import { withJuno } from "@junobuild/nextjs-plugin"; /** @type {import('next').NextConfig} */ const nextConfig = { output: "export" }; export default withJuno({ nextConfig }); ``` -------------------------------- ### Bootstrap New Astro Website with Juno Template Source: https://juno.build/docs/intro/guides/astro These commands initialize a new Astro project using the Juno template, providing a quick way to set up a new website with Juno integration pre-configured using different package managers. ```npm npm create juno@latest -- --template astro-starter ``` ```yarn yarn create juno -- --template astro-starter ``` ```pnpm pnpm create juno -- --template astro-starter ``` -------------------------------- ### Rust on_set_doc Hook for External API Call Source: https://juno.build/docs/intro/guides/rust This Rust code implements an on_set_doc hook, triggered when a document is set in the Juno Satellite's Datastore. It performs an HTTPS GET request to the Dog CEO API to retrieve a random dog image URL. The response is then deserialized using serde_json, and the extracted image source is used to update the original document in the Datastore. The example demonstrates preparing CanisterHttpRequestArgument, executing http_request_outcall with specified cycles, and handling the API response. ```Rust use ic_cdk::api::management_canister::http_request::{ http_request as http_request_outcall, CanisterHttpRequestArgument, HttpMethod, }; use junobuild_macros::{ on_delete_asset, on_delete_doc, on_delete_many_assets, on_delete_many_docs, on_set_doc, on_set_many_docs, on_upload_asset, }; use junobuild_satellite::{ include_satellite, set_doc_store, OnDeleteAssetContext, OnDeleteDocContext, OnDeleteManyAssetsContext, OnDeleteManyDocsContext, OnSetDocContext, OnSetManyDocsContext, OnUploadAssetContext, SetDoc, }; use junobuild_utils::encode_doc_data; use serde::{Deserialize, Serialize}; // The data of the document we are looking to update in the Satellite's Datastore. #[derive(Serialize, Deserialize)] struct DogData { src: Option, } // We are using the Dog CEO API in this example. // https://dog.ceo/dog-api/ // // Its endpoint "random" returns such JSON data: // { // "message": "https://images.dog.ceo/breeds/mountain-swiss/n02107574_1118.jpg", // "status": "success" // } // // That's why we declare a struct that matches the structure of the answer. #[derive(Serialize, Deserialize)] struct DogApiResponse { message: String, status: String, } #[on_set_doc(collections = ["dogs"])] async fn on_set_doc(context: OnSetDocContext) -> Result<(), String> { // 1. Prepare the HTTP GET request let url = "https://dog.ceo/api/breeds/image/random".to_string(); let request_headers = vec![]; let request = CanisterHttpRequestArgument { url, method: HttpMethod::GET, body: None, max_response_bytes: None, // In this simple example we skip sanitizing the response with a custom function for simplicity reason. transform: None, // We do not require any particular HTTP headers in this example. headers: request_headers, }; // 2. Execute the HTTP request. A request consumes Cycles(!). In this example we provide 2_000_000_000 Cycles (= 0.002 TCycles). // To estimate the costs see documentation: // - https://internetcomputer.org/docs/current/developer-docs/gas-cost#special-features // - https://internetcomputer.org/docs/current/developer-docs/integrations/https-outcalls/https-outcalls-how-it-works#pricing // Total amount of cycles depends on the subnet size. Therefore, on mainnet it might cost ~13x more than what's required when developing locally. Source: https://forum.dfinity.org/t/http-outcalls-cycles/27439/4 // Note: In the future we will have a UI logging panel in console.juno.build to help debug on production. Follow PR https://github.com/junobuild/juno/issues/415. // // We rename ic_cdk::api::management_canister::http_request::http_request to http_request_outcall because the Satellite already includes such a function's name. match http_request_outcall(request, 2_000_000_000).await { Ok((response,)) => { // 3. Use serde_json to transform the response to a structured object. let str_body = String::from_utf8(response.body) .expect("Transformed response is not UTF-8 encoded."); let dog_response: DogApiResponse = serde_json::from_str(&str_body).map_err(|e| e.to_string())?; // 4. Our goal is to update the document in the Datastore with an update that contains the link to the image fetched from the API we just called. let dog: DogData = DogData { src: Some(dog_response.message), }; // 5. We encode those data back to blob because the Datastore holds data as blob. let encode_data = encode_doc_data(&dog)?; // 6. Then we construct the parameters required to call the function that save the data in the Datastore. let doc: SetDoc = SetDoc { data: encode_data, description: context.data.data.after.description, version: context.data.data.after.version, }; ``` -------------------------------- ### Enable User Agent Parser in Juno Analytics SDK Source: https://juno.build/docs/intro/build/analytics/setup Shows how to enable the optional User Agent Parser feature in the Juno Analytics SDK by passing `userAgentParser: true` in the `options` object during the `initOrbiter()` call. This enriches analytics with more detailed browser, operating system, and device model information. ```JavaScript import { initOrbiter } from "@junobuild/analytics"; initOrbiter({ options: { userAgentParser: true } }); ``` -------------------------------- ### Verify Juno Module Upgrade Checksums Source: https://juno.build/docs/intro/faq This code snippet shows an example of a `checksums.txt` file, which contains SHA-256 hashes for Juno module binaries. Developers use these hashes to verify the integrity of proposed module upgrades by comparing them against the hashes of the downloaded binaries. A mismatch indicates a potential issue, and the upgrade should not be approved. ```Plaintext 68c1978c4fe7ad98cc95fd73e20f42feaf66f010e8fe91a7047116001dfcab13 ./console.wasm.gz 31647e69cd5a3639bda65300e37a8f44eb5feb3562e81f29c1ab17a31a867b42 ./mission_control.wasm.gz 87a18c56889690a05adf2b4289b911714c0ac6449108ae0c588203680c2c54d2 ./observatory.wasm.gz 5a74b1224a5a5d14e5d9f0ebe49a4ba6d51780dbde983525b5ef16a976c28f14 ./orbiter.wasm.gz 40b77e22e13aee86ac3872352640443fa27a9bdc098847f15bfafe844a9f58ab ./satellite.wasm.gz ``` -------------------------------- ### Enable Performance Metrics (Web Vitals) in Juno Analytics SDK Source: https://juno.build/docs/intro/build/analytics/setup Illustrates how to enable Web Vitals tracking in the Juno Analytics SDK by setting `performance: true` within the `options` object during `initOrbiter()` initialization. This allows the collection of key performance metrics like TTFB, FCP, LCP, CLS, and INP, which are crucial for assessing user experience. ```JavaScript import { initOrbiter } from "@junobuild/analytics"; initOrbiter({ options: { performance: true } }); ``` -------------------------------- ### Deploy Frontend Assets to Juno Satellite Source: https://juno.build/docs/intro/guides/manual-deployment Deploys the previously built frontend application or website files from your project's root folder to your Juno Satellite. Once uploaded, the application will be live and accessible on the web. ```cli juno deploy ``` -------------------------------- ### Configure Content Security Policy via Juno Build Config Source: https://juno.build/docs/intro/miscellaneous/best-practices This example demonstrates how to set a Content Security Policy (CSP) using the Juno build configuration file (juno.config.ts). By defining HTTP headers within the satellite.storage.headers array, you can instruct your Juno Satellite to include a CSP header in all HTTP responses, providing a centralized and dynamic way to enforce security policies. ```typescript import { defineConfig } from "@junobuild/config"; export default defineConfig({ satellite: { id: "qsgjb-riaaa-aaaaa-aaaga-cai", source: "dist", storage: { headers: [ { source: "**/*", headers: [["Content-Security-Policy", "REPLACE_THIS_WITH_YOUR_RULES"]] } ] } } }); ``` -------------------------------- ### Install Juno Admin CLI globally Source: https://juno.build/docs/intro/guides/angular Install the Juno command-line interface globally to manage Juno projects and run the local emulator. This CLI tool is essential for local development and deployment workflows. ```npm npm i -g @junobuild/cli ``` -------------------------------- ### Install Juno SDK into existing Angular app Source: https://juno.build/docs/intro/guides/angular Install the core Juno SDK and its dependencies into your existing Angular project to enable Juno functionalities. This step is crucial for integrating Juno's features like authentication, datastore, and storage into your application. ```npm npm i @junobuild/core ``` ```yarn yarn add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` ```pnpm pnpm add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` -------------------------------- ### Troubleshooting 'juno' command not recognized in Windows Powershell Source: https://juno.build/docs/intro/troubleshooting This snippet addresses the 'juno' command not recognized error in Windows Powershell after CLI installation. It suggests verifying that npm's installation directory is correctly added to the system's PATH environment variable. ```PowerShell The term 'juno' is not recognized as a name of a cmdlet, function, script file, or executable program. ``` -------------------------------- ### Initialize Juno Functions Project Source: https://juno.build/docs/intro/build/functions/lifecycle Initializes your project for writing serverless functions, setting up the necessary structure and files. ```shell juno functions eject ``` -------------------------------- ### Optional Build Step for Juno Frontend Deployment Source: https://juno.build/docs/intro/guides/github-actions/deploy-frontend This snippet provides an optional GitHub Actions step to build the application using `npm run build`. This step should be added to the workflow if the `juno.config` file does not automatically handle the build process via its `predeploy` field, ensuring the application is compiled before deployment. ```YAML - name: Build run: npm run build ``` -------------------------------- ### Eject Juno Satellite Configuration Source: https://juno.build/docs/intro/guides/rust Command to eject the Satellite configuration at the root of your application, useful if you didn't start with a template. ```shell juno dev eject ``` -------------------------------- ### Navigate to existing Astro application directory Source: https://juno.build/docs/intro/guides/astro Change the current directory to your existing Astro application before proceeding with Juno SDK installation. ```shell cd your-existing-app ``` -------------------------------- ### Initialize Juno Satellite and Orbiter with Next.js Plugin (Automatic) Source: https://juno.build/docs/intro/reference/plugins This code demonstrates how to initialize Juno's Satellite and Orbiter components when using the Next.js plugin, which automatically loads IDs from the project's configuration, eliminating the need for manual environment variables. ```JavaScript // Init a Satellite await initSatellite(); // Init the analytics initOrbiter(); ``` -------------------------------- ### Rust API: count_assets_store Source: https://juno.build/docs/intro/reference/functions/rust/sdk Counts assets in a collection matching the specified filter criteria. This provides a way to get the number of assets that meet certain conditions. ```Rust pub fn count_assets_store( caller: Principal, collection: &CollectionKey, filters: &ListParams, ) -> Result ``` -------------------------------- ### Rust API: list_assets_store Source: https://juno.build/docs/intro/reference/functions/rust/sdk Lists assets in a collection, excluding their content. This function is useful for getting metadata about assets without retrieving their potentially large content. ```Rust pub fn list_assets_store( caller: Principal, collection: &CollectionKey, filters: &ListParams, ) -> Result, String> ```