### Clone and Setup Juno Hooks Sample Project Source: https://github.com/junobuild/docs/blob/main/blog/2024-02-09-unleashing-the-infinite-with-serverless/index.md Provides bash commands to clone the Juno examples repository and navigate into the `rust/hooks` directory, followed by installing dependencies using `npm ci` to prepare the environment for local development and debugging of Juno hooks. ```bash git clone https://github.com/junobuild/examples cd rust/hooks npm ci ``` -------------------------------- ### Clone and Setup Juno HTTPS Outcalls Sample Project Source: https://github.com/junobuild/docs/blob/main/blog/2024-02-09-unleashing-the-infinite-with-serverless/index.md Provides bash commands to clone the Juno examples repository and navigate into the `rust/https-outcalls` directory, followed by installing dependencies using `npm ci` to prepare the environment for local development and debugging of Juno HTTPS outcalls. ```bash git clone https://github.com/junobuild/examples cd rust/https-outcalls npm ci ``` -------------------------------- ### Scaffold New Project with Juno CLI Source: https://github.com/junobuild/docs/blob/main/docs/intro.mdx Use Juno's command-line interface to quickly set up new projects with pre-configured templates for popular frontend frameworks like Astro, Next.js, React, SvelteKit, Vue, and Angular. ```Bash npm create juno@latest ``` ```Bash yarn create juno ``` ```Bash pnpm create juno ``` -------------------------------- ### Create a new Next.js project with Juno quickstart CLI Source: https://github.com/junobuild/docs/blob/main/docs/guides/nextjs.mdx Use the Juno quickstart CLI to scaffold a new Next.js project with a pre-configured template, simplifying the initial setup process. ```npm npm create juno@latest -- --template nextjs-starter ``` ```yarn yarn create juno -- --template nextjs-starter ``` ```pnpm pnpm create juno -- --template nextjs-starter ``` -------------------------------- ### Clone and Initialize Juno Astro Example Project Source: https://github.com/junobuild/docs/blob/main/blog/2024-01-04-local-development/index.md Instructions to clone the sample Astro project from GitHub, navigate into its directory, and install dependencies using npm. This sets up the dApp for local development. ```bash git clone https://github.com/junobuild/examples/ cd examples/astro npm ci ``` -------------------------------- ### Create New SvelteKit Project with Juno CLI Template Source: https://github.com/junobuild/docs/blob/main/docs/guides/sveltekit.mdx Utilize the Juno quickstart CLI to scaffold a fresh SvelteKit project, pre-configured with Juno, suitable for starting new applications. ```npm npm create juno@latest -- --template sveltekit-starter ``` ```yarn yarn create juno -- --template sveltekit-starter ``` ```pnpm pnpm create juno -- --template sveltekit-starter ``` -------------------------------- ### Create a new Astro project with Juno template Source: https://github.com/junobuild/docs/blob/main/blog/2024-04-30-how-to-build-a-secure-and-decentralized-blog-website-on-the-blockchain/index.md This command initializes a new Astro project using the Juno starter template. It prompts the user for project name, GitHub Actions configuration, local development emulator setup, dependency installation, and Juno CLI tool installation. ```bash npm create juno@latest -- --template astro-starter ``` -------------------------------- ### Start Juno Local Emulator Source: https://github.com/junobuild/docs/blob/main/docs/guides/components/emulator.mdx Starts the Juno local development emulator, which provides an all-in-one environment mimicking production. This command also makes the Console UI available locally. ```bash juno dev start ``` -------------------------------- ### Create new Astro project with Juno CLI template Source: https://github.com/junobuild/docs/blob/main/docs/guides/astro.mdx Use the Juno quickstart CLI to bootstrap a new Astro project pre-configured with Juno, suitable for both new projects and hosting setup. ```bash npm create juno@latest -- --template astro-starter ``` ```bash yarn create juno -- --template astro-starter ``` ```bash pnpm create juno -- --template astro-starter ``` -------------------------------- ### Install Juno Admin CLI Source: https://github.com/junobuild/docs/blob/main/docs/guides/components/emulator.mdx Installs the Juno admin command-line interface globally using npm. This CLI is essential for running the local emulator and interacting with Juno projects. ```bash npm i -g @junobuild/cli ``` -------------------------------- ### Initialize Juno Analytics Orbiter from CDN Source: https://github.com/junobuild/docs/blob/main/docs/build/analytics/setup.mdx Loads and initializes the Juno Analytics SDK directly from a CDN, suitable for projects without local package management. This script fetches the library from jsDelivr and starts analytics when the DOM content is loaded. Replace placeholder IDs with your actual Satellite and Orbiter IDs. ```html ``` -------------------------------- ### Start Juno Local Development Server Source: https://github.com/junobuild/docs/blob/main/docs/reference/cli.mdx Starts the local development server for the Juno project, enabling local testing and development. ```bash juno start ``` -------------------------------- ### Install Juno CLI Globally Source: https://github.com/junobuild/docs/blob/main/blog/2023-07-13-hosting-your-website-on-the-internet-computer/index.md This command installs the Juno command-line interface globally on your machine, enabling interaction with Juno services from your terminal. Ensure Node.js is installed as a prerequisite. ```bash npm i -g @junobuild/cli ``` -------------------------------- ### Scaffold Juno Note-Taking App Example with CLI Source: https://github.com/junobuild/docs/blob/main/docs/guides/sveltekit.mdx Use the Juno CLI to quickly deploy a pre-built note-taking application example, showcasing Juno's authentication, datastore, and storage features. ```npm npm create juno@latest -- --template sveltekit-example ``` ```yarn yarn create juno -- --template sveltekit-example ``` ```pnpm pnpm create juno -- --template sveltekit-example ``` -------------------------------- ### Juno CLI: Start Module Command Usage Source: https://github.com/junobuild/docs/blob/main/docs/reference/cli/start.md Provides the command-line interface usage for `juno start`, detailing options such as `--target` for module type (satellite, mission-control, orbiter) and `--mode` for environment. It also notes the shorthand options for targets. ```CLI 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. -h, --help Output usage information. Notes: - Targets can be shortened to s for satellite, m for mission-control and o for orbiter. ``` -------------------------------- ### Scaffold new Angular project with Juno template Source: https://github.com/junobuild/docs/blob/main/docs/guides/angular.mdx Utilize the Juno quickstart CLI to create a fresh Angular project that comes pre-configured with Juno, providing a rapid setup for development. ```bash npm create juno@latest -- --template angular-starter ``` ```bash yarn create juno -- --template angular-starter ``` ```bash pnpm create juno -- --template angular-starter ``` -------------------------------- ### Start Juno Development Emulator Source: https://github.com/junobuild/docs/blob/main/docs/guides/typescript.mdx This command initiates the local Juno development environment, starting the emulator and enabling automatic recompilation and reloading of code changes upon saving. It requires Docker to be installed and running. ```bash juno dev start --watch ``` -------------------------------- ### Create React Starter Project with Juno CLI Source: https://github.com/junobuild/docs/blob/main/docs/guides/react.mdx Use the Juno quickstart CLI to scaffold a new React project with a pre-configured starter template. This command sets up the basic structure for a Juno-integrated React application, ready for development. ```npm npm create juno@latest -- --template react-starter ``` ```yarn yarn create juno -- --template react-starter ``` ```pnpm pnpm create juno -- --template react-starter ``` -------------------------------- ### Example: Listing Documents with `listDocs` Source: https://github.com/junobuild/docs/blob/main/docs/build/datastore/development.mdx Demonstrates how to use the `listDocs` function from `@junobuild/core` with comprehensive filtering, pagination, ordering, and owner specifications. This example showcases the use of `matcher` for key and description regex, `createdAt` and `updatedAt` timestamp filters, `paginate` for result limits, `order` for sorting, and `owner` for specific document retrieval. ```typescript 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" } }); ``` -------------------------------- ### Install JunoBuild CLI (Bash) Source: https://github.com/junobuild/docs/blob/main/blog/2023-03-28-build-a-web3-app-with-react-js.md This command installs the JunoBuild command-line interface globally using npm, which is necessary for deploying applications to the blockchain. ```bash npm i -g @junobuild/cli ``` -------------------------------- ### Initialize Juno SDK in TypeScript Source: https://github.com/junobuild/docs/blob/main/docs/setup-the-sdk.mdx This snippet demonstrates the basic initialization of the Juno SDK using `initSatellite()`. It's recommended to call this globally at the top of your application to connect to your satellite and enable core features. ```typescript import { initSatellite } from "@junobuild/core"; await initSatellite(); ``` -------------------------------- ### Start Juno Local Satellite with Docker Compose Source: https://github.com/junobuild/docs/blob/main/blog/2024-01-04-local-development/index.md Command to start the Juno local satellite container using the defined `docker-compose.yml` configuration. This initiates the local Internet Computer replica, Internet Identity, and Satellite for development. ```bash docker compose up ``` -------------------------------- ### Install Juno CLI Source: https://github.com/junobuild/docs/blob/main/docs/reference/cli.mdx Globally installs the Juno Command Line Interface using npm, making it available for use across your system. ```bash npm i -g @junobuild/cli ``` -------------------------------- ### Install JunoBuild Core and Dfinity Dependencies Source: https://github.com/junobuild/docs/blob/main/docs/components/core.mdx Commands to install the @junobuild/core package along with its required @dfinity dependencies using npm, yarn, or pnpm. Note that the npm command shown here only includes @junobuild/core, while yarn and pnpm include all necessary Dfinity packages. ```bash npm i @junobuild/core ``` ```bash yarn add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` ```bash pnpm add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal ``` -------------------------------- ### Start Local Development Environment Source: https://github.com/junobuild/docs/blob/main/blog/2024-02-09-unleashing-the-infinite-with-serverless/index.md Initiates the local development environment using Docker, making it ready for coding and testing with hot reloading capabilities. ```bash juno dev start ``` -------------------------------- ### Install Juno Core SDK Source: https://github.com/junobuild/docs/blob/main/blog/2023-05-24-build-a-web3-app-with-vuejs.md Installs the Juno Core SDK package using npm, which is required to integrate Juno into your application. ```bash npm i @junobuild/core ``` -------------------------------- ### Create New Juno Vue Project with CLI Template Source: https://github.com/junobuild/docs/blob/main/docs/guides/vue.mdx Use the Juno quickstart CLI to scaffold a new Vue project with a pre-configured template, providing options for different package managers. ```bash npm create juno@latest -- --template vue-starter ``` ```bash yarn create juno -- --template vue-starter ``` ```bash pnpm create juno -- --template vue-starter ``` -------------------------------- ### Install SvelteKit static adapter Source: https://github.com/junobuild/docs/blob/main/docs/guides/sveltekit.mdx Removes the default SvelteKit adapter and installs the `@sveltejs/adapter-static` development dependency, which is essential for pre-rendering SvelteKit applications. ```bash npm rm @sveltejs/adapter-auto && npm i -D @sveltejs/adapter-static ``` -------------------------------- ### Example JSON Configuration for Satellite Collections and Controllers Source: https://github.com/junobuild/docs/blob/main/docs/reference/emulator/satellite.md Illustrates a `juno.dev.config.json` example that configures a 'metadata' collection for the Datastore, a 'content' collection for Storage, and adds an administrative controller, demonstrating how to apply the defined configuration types. ```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 Command Line Interface Source: https://github.com/junobuild/docs/blob/main/blog/2023-05-24-build-a-web3-app-with-vuejs.md This command installs the Juno Command Line Interface (CLI) globally, allowing you to interact with Juno from your terminal. ```bash npm i -g @junobuild/cli ``` -------------------------------- ### Enable Web Vitals in Juno Analytics SDK Source: https://github.com/junobuild/docs/blob/main/docs/build/analytics/setup.mdx To start collecting performance metrics, enable Web Vitals in the Juno Analytics SDK during initialization. This ensures that the additional logic is only loaded when needed, helping keep your app's initial load size minimal. ```typescript import { initOrbiter } from "@junobuild/analytics"; initOrbiter({ options: { performance: true } }); ``` -------------------------------- ### Start Astro dApp Development Server Source: https://github.com/junobuild/docs/blob/main/blog/2024-01-04-local-development/index.md Command to launch the Astro dApp in development mode. This makes the dApp accessible locally, allowing interaction with the local Juno satellite. ```bash npm run dev ``` -------------------------------- ### Install Juno Core SDK for React Source: https://github.com/junobuild/docs/blob/main/blog/2023-03-28-build-a-web3-app-with-react-js.md This command installs the `@junobuild/core` SDK, which provides the necessary functionalities to integrate Juno into your React application. It's a prerequisite for interacting with your Juno satellite. ```bash npm i @junobuild/core ``` -------------------------------- ### Install JunoBuild Analytics SDK Source: https://github.com/junobuild/docs/blob/main/docs/build/components/analytics.mdx Commands to add the @junobuild/analytics package to your project using npm, yarn, or pnpm. ```bash npm i @junobuild/analytics ``` ```bash yarn add @junobuild/analytics ``` ```bash pnpm add @junobuild/analytics ``` -------------------------------- ### Start Juno Development Emulator Source: https://github.com/junobuild/docs/blob/main/docs/guides/rust.mdx This command initializes the local Juno development environment, including the emulator, which requires Docker to run. ```bash juno dev start ``` -------------------------------- ### List Assets with JunoBuild Core (JavaScript/React) Source: https://github.com/junobuild/docs/blob/main/blog/2023-03-28-build-a-web3-app-with-react-js.md This example illustrates how to fetch and display a list of assets saved on the blockchain using the `listAssets` function from `@junobuild/core`. The function supports various parameters for filtering, ordering, and pagination, though this snippet provides a minimal example listing all assets for the current user. ```javascript import { useContext, useEffect, useState } from "react"; import { AuthContext } from "./Auth"; import { listAssets } from "@junobuild/core"; export const ListAssetsExample = () => { const { user } = useContext(AuthContext); const [assets, setAssets] = useState([]); const list = async () => { const { assets } = await listAssets({ collection: "images", filter: {} }); setAssets(assets); }; useEffect(() => { if ([undefined, null].includes(user)) { setAssets([]); return; } (async () => await list())(); }, [user]); return ( <> {assets.map(({ fullPath, downloadUrl }) => ( ))} ); }; ``` -------------------------------- ### Juno Local Satellite Collection Setup (juno.dev.json) Source: https://github.com/junobuild/docs/blob/main/blog/2024-01-04-local-development/index.md Configuration file for the Juno local satellite, defining a 'counter' collection within the 'db' namespace. This setup ensures the collection is managed for both read and write operations and uses stable memory. ```json { "satellite": { "collections": { "db": [ { "collection": "counter", "read": "managed", "write": "managed", "memory": "stable" } ] } } } ``` -------------------------------- ### Install Juno CLI Globally Source: https://github.com/junobuild/docs/blob/main/docs/guides/components/cli.mdx This snippet provides commands to globally install the Juno Command Line Interface (CLI) tool. The CLI is essential for interacting with the Juno platform, including deploying projects and managing services. Choose the command corresponding to your preferred Node.js package manager (npm, yarn, or pnpm). ```Bash npm i -g @junobuild/cli ``` ```Bash yarn global add @junobuild/cli ``` ```Bash pnpm add -g @junobuild/cli ``` -------------------------------- ### Configure Robots.txt for Crawler Access and Sitemap Source: https://github.com/junobuild/docs/blob/main/blog/2023-08-13-preparing-your-app-for-production-icons-metadata-and-beyond.md This robots.txt configuration allows all web crawlers (User-agent: *) to access all content (Allow: /) on the site. It also explicitly provides the URL to the sitemap.xml file and the host, guiding search engine behavior. ```plaintext User-agent: * Allow: / Sitemap: https://juno.build/sitemap.xml Host: https://juno.build ``` -------------------------------- ### Start Juno Local Development Emulator Source: https://github.com/junobuild/docs/blob/main/docs/guides/local-development.mdx This command launches the Juno local development emulator along with all the services needed to develop your project. It is recommended to run this in a dedicated terminal window or tab. ```bash juno dev start ``` -------------------------------- ### Juno Essential Hooks Example Application Source: https://github.com/junobuild/docs/blob/main/docs/guides/rust.mdx This example showcases the fundamental usage of Juno's serverless function hooks. It provides a basic application where hooks are triggered by frontend actions (setting documents or uploading files), demonstrating how to process and persist data within the Juno ecosystem. ```APIDOC Essential Hooks Example: Purpose: Minimal app demonstrating serverless function hooks in Juno. Functionality: - Frontend interface for setting document in datastore or uploading file to storage. - Associated hooks perform basic operations: - Printing a message when triggered. - Deserializing and serializing a document before updating and persisting it. GitHub Repository: https://github.com/junobuild/examples/tree/main/rust/hooks ``` -------------------------------- ### Example Juno Configuration File Source: https://github.com/junobuild/docs/blob/main/docs/guides/github-actions.mdx This JavaScript configuration file defines the essential settings for a Juno satellite, including its unique ID, the build output directory, and an optional predeploy script to build the application before deployment. Users should replace placeholder values with their specific project details. ```javascript import { defineConfig } from "@junobuild/config"; export default defineConfig({ satellite: { id: "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 } }); ``` -------------------------------- ### Example Usage of listDocs Function with Filters and Pagination Source: https://github.com/junobuild/docs/blob/main/docs/build/storage/development.mdx Illustrates how to call the `listDocs` function with various filter, pagination, order, and owner parameters, demonstrating how to match assets by key, description, creation/update timestamps, and control result limits and sorting. ```typescript 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" } }); ``` -------------------------------- ### Juno Ethereum Address Derivation Example Source: https://github.com/junobuild/docs/blob/main/docs/guides/rust.mdx This example illustrates how to derive an Ethereum address for a Juno user using the Internet Computer's threshold ECDSA mechanism. It highlights the secure generation and distribution of key material and includes functionality to fetch the Ethereum address balance from the Sepolia network. ```APIDOC Ethereum Address Example: Purpose: Derive an Ethereum address for an authenticated Juno user on the Internet Computer. Mechanism: - Hook triggered upon user registration. - Generates Ethereum address using threshold ECDSA. - Public representation stored in the Satellite. - Private key never fully generated or stored on a single node; distributed across multiple nodes via threshold ECDSA. Additional Functionality: - Balance action fetches balance from Sepolia network using Etherscan (public queries, no API key). GitHub Repository: https://github.com/junobuild/examples/tree/main/rust/ethereum-address ``` -------------------------------- ### Install JunoBuild Functions Library Source: https://github.com/junobuild/docs/blob/main/docs/reference/functions/typescript/utils.mdx Instructions to add the @junobuild/functions library to your project using npm, yarn, or pnpm. ```bash npm i @junobuild/functions ``` ```bash yarn add @junobuild/functions ``` ```bash pnpm add @junobuild/functions ``` -------------------------------- ### Initialize Juno Project Configuration Source: https://github.com/junobuild/docs/blob/main/docs/guides/github-actions.mdx This command initializes a minimal `juno.config` file at the root of your project. It's used when a configuration file doesn't already exist, providing a starting point for defining satellite ID and source directory. ```bash npx @junobuild/cli init --minimal ``` -------------------------------- ### Bootstrap New Vue Website for Juno Hosting Source: https://github.com/junobuild/docs/blob/main/docs/guides/vue.mdx Bootstrap a new Vue website using the Juno template as a starting point for hosting, if you don't have an existing application. ```bash npm create juno@latest -- --template vue-starter ``` ```bash yarn create juno -- --template vue-starter ``` ```bash pnpm create juno -- --template vue-starter ``` -------------------------------- ### Navigate to existing Astro project Source: https://github.com/junobuild/docs/blob/main/docs/guides/astro.mdx Change directory to your existing Astro application before installing the Juno SDK. ```bash cd your-existing-app ``` -------------------------------- ### Scaffold Juno Vue Note-Taking App Example Source: https://github.com/junobuild/docs/blob/main/docs/guides/vue.mdx Use the Juno CLI to quickly scaffold and deploy a basic note-taking app that demonstrates Juno's authentication, datastore, and storage features. ```bash npm create juno@latest -- --template vue-example ``` ```bash yarn create juno -- --template vue-example ``` ```bash pnpm create juno -- --template vue-example ``` -------------------------------- ### Scaffold a Juno note-taking app with Next.js example Source: https://github.com/junobuild/docs/blob/main/docs/guides/nextjs.mdx Use the Juno CLI to quickly deploy a basic note-taking app that integrates Juno's core features: authentication, datastore, and storage. The CLI manages configurations and dependencies for local development. ```npm npm create juno@latest -- --template nextjs-example ``` ```yarn yarn create juno -- --template nextjs-example ``` ```pnpm pnpm create juno -- --template nextjs-example ``` -------------------------------- ### Initialize Juno Serverless Functions Source: https://github.com/junobuild/docs/blob/main/blog/2025-04-21-announcing-serverless-functions-in-typescript/index.md Commands to either eject an existing Juno project to add serverless functions or start a new project with serverless function support using the Juno CLI. ```Shell juno dev eject ``` ```Shell npm create juno@latest ``` -------------------------------- ### Initialize Juno Project for Serverless Functions Source: https://github.com/junobuild/docs/blob/main/docs/build/functions/lifecycle.md Configures your project with the appropriate setup based on your language of choice (Rust, TypeScript). This command creates necessary project files like `Cargo.toml`, `lib.rs`, or `index.ts`. ```bash juno dev eject ``` -------------------------------- ### JunoBuild CLI Development Commands Source: https://github.com/junobuild/docs/blob/main/docs/reference/cli/dev.md Overview of `juno dev` subcommands for managing serverless functions and local Internet Computer networks, including building, scaffolding, starting, and stopping. ```Shell Usage: juno dev [options] Subcommands: build Build your serverless functions. The local server supports live reloading. eject Scaffold the necessary files to start coding and building functions in your project. start Start a local Internet Computer network in a container. stop Stop the local network. ``` -------------------------------- ### Configure Pre-deployment Scripts in Juno Source: https://github.com/junobuild/docs/blob/main/docs/reference/configuration.mdx This example demonstrates how to use the `predeploy` option within the satellite configuration to execute scripts or commands before the deployment process begins. It's useful for automating tasks like compiling assets or running tests. ```javascript import { defineConfig } from "@junobuild/config"; export default defineConfig({ satellite: { id: "qsgjb-riaaa-aaaaa-aaaga-cai", source: "dist", predeploy: ["npm run build", "npm run lint"] } }); ``` -------------------------------- ### Log in to JunoBuild Satellite (Bash) Source: https://github.com/junobuild/docs/blob/main/blog/2023-03-28-build-a-web3-app-with-react-js.md After installing the CLI, this command allows you to log in to your Juno satellite from the terminal, granting control of your machine for deployment operations. ```bash juno login ``` -------------------------------- ### Basic Juno Configuration File Example Source: https://github.com/junobuild/docs/blob/main/docs/reference/configuration.mdx This snippet shows a minimal Juno configuration file, defining the satellite ID, source directory, and an optional orbiter ID for analytics mapping. It uses `defineConfig` for type safety and consistency. ```typescript import { defineConfig } from "@junobuild/config"; export default defineConfig({ satellite: { id: "qsgjb-riaaa-aaaaa-aaaga-cai", source: "build" }, orbiter: { id: "eeeee-fffff-ddddd-11111-cai" } }); ``` -------------------------------- ### Juno CLI: Initialize Project Source: https://github.com/junobuild/docs/blob/main/docs/reference/cli/init.md The `juno init` command is used to initialize a new Juno project. It allows for quick setup with minimal prompts or custom environment mode configuration. Use the `--minimal` option to skip prompts and generate a placeholder satellite ID, or `--mode` to specify the environment (e.g., 'production'). ```Shell Usage: juno init [options] Options: -m, --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. -h, --help Output usage information. ``` -------------------------------- ### Configure Astro with Juno Vite Plugin for Local Container Source: https://github.com/junobuild/docs/blob/main/blog/2024-01-04-local-development/index.md Astro configuration demonstrating how to integrate the `@junobuild/vite-plugin`. The `container: true` option is set to enable local development with the Juno Docker container, streamlining the setup. ```javascript import { defineConfig } from "astro/config"; import juno from "@junobuild/vite-plugin"; export default defineConfig({ vite: { plugins: [ juno({ container: true }) ] } }); ``` -------------------------------- ### Install Juno SDK Library Source: https://github.com/junobuild/docs/blob/main/docs/reference/functions/typescript/sdk.mdx Instructions to add the @junobuild/functions library to your project using npm, yarn, or pnpm. This library provides the SDK for interacting with Juno services and should be kept compatible with Juno releases. ```Bash npm i @junobuild/functions yarn add @junobuild/functions pnpm add @junobuild/functions ``` -------------------------------- ### Example URL with UTM Parameters Source: https://github.com/junobuild/docs/blob/main/docs/build/analytics/development.md Illustrates the structure of UTM parameters appended to a URL for campaign tracking. These standard query parameters are automatically processed by Juno Analytics to understand traffic sources and campaign effectiveness. ```APIDOC ?utm_source=newsletter&utm_medium=email&utm_campaign=rocket-launch ``` -------------------------------- ### Initialize Juno Analytics Orbiter with plugins Source: https://github.com/junobuild/docs/blob/main/docs/build/analytics/setup.mdx Initializes the Juno Analytics Orbiter when using plugins, assuming configuration is defined in `juno.config.js`. This function should be called as early as possible in your application's startup process to ensure proper analytics tracking. ```typescript import { initOrbiter } from "@junobuild/analytics"; initOrbiter(); ``` -------------------------------- ### Initialize Juno Marketing Website with Astro Template Source: https://github.com/junobuild/docs/blob/main/blog/2024-07-16-how-to-launch-your-first-memecoin-token-on-the-internet-computer-icp/index.md This command uses `npm` to initialize a new project folder with the latest Juno CLI, specifically using the `astro-starter` template. It's the first step in setting up a marketing website for the token, providing a pre-configured project structure. ```bash npm create juno@latest -- --template astro-starter ``` -------------------------------- ### Configure Environment-Specific Orbiter IDs in Juno Config Source: https://github.com/junobuild/docs/blob/main/docs/build/analytics/setup.mdx This configuration example demonstrates how to define different Orbiter IDs for production and development environments within the `juno.config.js` file. This allows for separate analytics data collection based on the deployment environment. ```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" } } }); ``` -------------------------------- ### Initialize Juno Project Source: https://github.com/junobuild/docs/blob/main/docs/guides/manual-deployment.mdx Initialize your project using the Juno CLI. This command generates a configuration file and prompts you to log in to your Satellite from the terminal, opening the Juno Console in your browser to authenticate and grant necessary module permissions. ```bash juno init ``` -------------------------------- ### Initialize Git and Push Project to GitHub Source: https://github.com/junobuild/docs/blob/main/blog/2024-04-30-how-to-build-a-secure-and-decentralized-blog-website-on-the-blockchain/index.md These commands initialize a local Git repository, link it to a remote GitHub repository, stage all current changes, commit them with a message, and finally push the local 'main' branch to the remote. This establishes the connection for automated deployments via GitHub Actions. ```bash git init git remote add origin https://github.com/sam-thetutor/myfirstBlog.git git add . git commit -m "my first commit" git push -u origin main ``` -------------------------------- ### Scaffold Juno note-taking app example for Angular Source: https://github.com/junobuild/docs/blob/main/docs/guides/angular.mdx Use the Juno CLI to quickly set up a basic note-taking application demonstrating core Juno features like authentication, datastore, and storage. The CLI handles configurations for local development. ```bash npm create juno@latest -- --template angular-example ``` ```bash yarn create juno -- --template angular-example ``` ```bash pnpm create juno -- --template angular-example ``` -------------------------------- ### Calculate Required Cycles for Module Freezing Threshold Source: https://github.com/junobuild/docs/blob/main/docs/reference/settings.md This snippet provides the formula and an example calculation to determine the minimum cycles a module needs to maintain to avoid being frozen. It considers the idle cycle burn rate and the defined freezing threshold duration. ```Mathematics required_cycles = (idle_cycles_burned_per_day × freezing_threshold_seconds) / 86,400 // Substitute the values: 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 ``` -------------------------------- ### Deploy Application with Juno CLI Source: https://github.com/junobuild/docs/blob/main/docs/guides/manual-deployment.mdx Deploy your built application or website to your Juno Satellite from your project's root folder. When prompted, provide the correct folder name containing your built files (e.g., 'build' for SvelteKit, 'out' for Next.js, 'dist' for React/Astro/Vue). Once uploaded, your application will be live. ```bash juno deploy ``` -------------------------------- ### Juno CLI init Command Usage and Options Source: https://github.com/junobuild/docs/blob/main/docs/reference/cli/version.md Provides the command-line interface usage for `juno init`, detailing its options such as checking CLI version, setting environment mode, and displaying help information. ```APIDOC Usage: juno init [options] Options: -c, --cli Check only the version of the CLI. -m, --mode Set env mode. For example production or a custom string. Default is production. -h, --help Output usage information. ``` -------------------------------- ### Define a Basic Sitemap XML File Source: https://github.com/junobuild/docs/blob/main/blog/2023-08-13-preparing-your-app-for-production-icons-metadata-and-beyond.md This XML snippet provides a basic sitemap.xml structure, declaring standard namespaces and including a single URL entry for the main website. It specifies a monthly change frequency and a priority of 0.7 to guide search engine crawling. ```xml https://juno.build/ monthly 0.7 ``` -------------------------------- ### Install Juno CLI globally Source: https://github.com/junobuild/docs/blob/main/blog/2023-04-21-develop-an-angular-app-on-blockchain.md Installs the Juno command-line interface globally using npm, which is required to interact with Juno satellites and deploy applications. ```bash npm i -g @junobuild/cli ``` -------------------------------- ### Deploy Compiled Project to Juno Satellite Source: https://github.com/junobuild/docs/blob/main/blog/2024-04-30-how-to-build-a-secure-and-decentralized-blog-website-on-the-blockchain/index.md After compilation, this command deploys the compiled application files from the 'dist' folder to the connected Juno satellite. Upon successful deployment, it provides a public link to the live application. ```bash juno deploy ``` -------------------------------- ### Install Juno Config Types for IDE Intellisense Source: https://github.com/junobuild/docs/blob/main/docs/reference/configuration.mdx Installs the `@junobuild/config` package as a development dependency. This provides necessary TypeScript types to enable Intellisense in IDEs for Juno configuration files. ```bash npm install @junobuild/config --save-dev ``` -------------------------------- ### Rust Hook: Fetch Dog Image and Update Datastore Source: https://github.com/junobuild/docs/blob/main/blog/2024-02-09-unleashing-the-infinite-with-serverless/index.md This Rust hook demonstrates making HTTP outcalls to the Dog CEO API to fetch a random dog image and subsequently updating a document in the Juno Datastore's 'dogs' collection. It defines necessary data structures for the API response and document, handles the HTTP GET request, deserializes the JSON response, and then encodes and stores the new image URL in the Datastore. The example also provides important context on cycle consumption for HTTP outcalls. ```rust // 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, updated_at: Some(context.data.data.after.updated_at), }; // 7. We store the data in the Datastore for the same caller as the one who triggered the original on_set_doc, in the same collection with the same key as well. set_doc_store( context.caller, context.data.collection, context.data.key, doc, )?; Ok(()) } Err((r, m)) => { let message = format!("The http_request resulted into error. RejectionCode: {r:?}, Error: {m}"); Err(message) } } } ``` -------------------------------- ### Deploy Project to Juno Satellite Source: https://github.com/junobuild/docs/blob/main/blog/2024-04-30-how-to-build-a-secure-and-decentralized-blog-website-on-the-blockchain/index.md This section outlines the steps to deploy the Astro blog project live by creating a satellite on the Juno administration console. It covers navigating to the console, logging in with Internet Identity, launching a new satellite, and providing a name for it. ```APIDOC Deployment Steps: 1. Navigate to Juno Administration Console: URL: https://console.juno.build/ 2. Login: Method: Internet Identity (https://internetcomputer.org/internet-identity) 3. Create New Satellite: Action: Select "Launch new satellite" on dashboard Input: - Name: `myBlogSatellite` Action: Click "Create Satellite" ``` -------------------------------- ### Initialize Juno Project and Connect to Satellite Source: https://github.com/junobuild/docs/blob/main/blog/2024-07-16-how-to-launch-your-first-memecoin-token-on-the-internet-computer-icp/index.md This command initializes a local project and links it to a Juno satellite on the Internet Computer. Users are prompted to log in, select the target satellite, specify the compiled app's directory, and choose the configuration file format (e.g., TypeScript). Upon successful completion, a `juno.config.ts` file is generated at the project root, configuring the connection. ```bash juno init ``` -------------------------------- ### Build Project with Package Managers Source: https://github.com/junobuild/docs/blob/main/docs/guides/manual-deployment.mdx Prepare your application for deployment by building your project using common JavaScript package managers. This step compiles and optimizes your source code into deployable files. ```bash npm run build ``` ```bash yarn build ``` ```bash pnpm build ``` -------------------------------- ### Install Juno SDK Core Package Source: https://github.com/junobuild/docs/blob/main/blog/2023-04-21-develop-an-angular-app-on-blockchain.md This command installs the @junobuild/core package, which is the essential SDK for integrating Juno's blockchain functionalities into your application. It's a necessary first step before configuring your Angular app to communicate with a Juno satellite. ```bash npm i @junobuild/core ``` -------------------------------- ### Deploy Website to Juno Satellite Source: https://github.com/junobuild/docs/blob/main/blog/2023-07-13-hosting-your-website-on-the-internet-computer/index.md Run this command from your project's root folder to deploy your website to its dedicated Juno satellite. During the initial deployment, you will be prompted to select the target satellite, after which your website will be hosted on-chain. ```bash juno deploy ``` -------------------------------- ### Example Web App Manifest Configuration with iOS Workaround Source: https://github.com/junobuild/docs/blob/main/blog/2023-08-13-preparing-your-app-for-production-icons-metadata-and-beyond.md This JSON snippet provides a sample web app manifest configuration. It includes standard properties like name, short_name, start_url, background_color, theme_color, and display mode. Crucially, it demonstrates a workaround for iOS icon discoverability by linking icons to the less secure .raw. domain, which allows iPhones to interpret the images despite certification limitations. ```json { "name": "Juno", "short_name": "Juno", "start_url": "/", "background_color": "#000000", "theme_color": "#000000", "display": "standalone", "icons": [ { "src": "https://satellite-id.raw.icp0.io/icons/icon-48x48.png", "sizes": "48x48", "type": "image/png", "purpose": "any" }, { "src": "https://satellite-id.raw.icp0.io/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png", "purpose": "any" }, { "src": "https://satellite-id.raw.icp0.io/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png", "purpose": "any" }, { "src": "https://satellite-id.raw.icp0.io/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png", "purpose": "any" }, { "src": "https://satellite-id.raw.icp0.io/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { "src": "https://satellite-id.raw.icp0.io/icons/icon-256x256.png", "sizes": "256x256", "type": "image/png", "purpose": "any" }, { "src": "https://satellite-id.raw.icp0.io/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png", "purpose": "any" }, { "src": "https://satellite-id.raw.icp0.io/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { "src": "https://satellite-id.raw.icp0.io/icons/maskable-48x48.png", "sizes": "48x48", "type": "image/png", "purpose": "maskable" }, { "src": "https://satellite-id.raw.icp0.io/icons/maskable-72x72.png", "sizes": "72x72", "type": "image/png", "purpose": "maskable" }, { "src": "https://satellite-id.raw.icp0.io/icons/maskable-96x96.png", "sizes": "96x96", "type": "image/png", "purpose": "maskable" }, { "src": "https://satellite-id.raw.icp0.io/icons/maskable-144x144.png", "sizes": "144x144", "type": "image/png", "purpose": "maskable" }, { "src": "https://satellite-id.raw.icp0.io/icons/maskable-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { "src": "https://satellite-id.raw.icp0.io/icons/maskable-256x256.png", "sizes": "256x256", "type": "image/png", "purpose": "maskable" }, { "src": "https://satellite-id.raw.icp0.io/icons/maskable-384x384.png", "sizes": "384x384", "type": "image/png", "purpose": "maskable" }, { "src": "https://satellite-id.raw.icp0.io/icons/maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ] } ``` -------------------------------- ### Configure Main Astro Blog Page (`index.astro`) Source: https://github.com/junobuild/docs/blob/main/blog/2024-04-30-how-to-build-a-secure-and-decentralized-blog-website-on-the-blockchain/index.md This code replaces the content of the `index.astro` file to set up the main blog page. It imports blog post data from `blogPosts.json`, defines the HTML structure with a header, navigation bar, and dynamically renders articles using the `Article` component. It also includes Tailwind CSS for styling. ```astro --- // Import necessary components and data import blogPosts from '../components/blogPosts.json'; import Article from '../components/Article.astro'; import Background from "../components/Background.astro"; import BaseHead from "../components/BaseHead.astro"; import { SITE_TITLE, SITE_DESCRIPTION, SITE_SOCIAL_IMAGE } from "../consts"; ---
{blogPosts.map((post) => (
))}
``` -------------------------------- ### Display Juno CLI Version Source: https://github.com/junobuild/docs/blob/main/docs/reference/cli.mdx Displays the currently installed version of the Juno CLI. ```bash juno version ``` -------------------------------- ### Compile Project Files Source: https://github.com/junobuild/docs/blob/main/blog/2024-04-30-how-to-build-a-secure-and-decentralized-blog-website-on-the-blockchain/index.md This command compiles the project's source code, typically JavaScript or TypeScript, and outputs the resulting compiled files into the 'dist' folder. It is a standard step before deployment to prepare the application for production. ```bash npm run build ``` -------------------------------- ### Run Token Deployment Script Source: https://github.com/junobuild/docs/blob/main/blog/2024-07-16-how-to-launch-your-first-memecoin-token-on-the-internet-computer-icp/index.md This command executes a shell script named `deploy.sh`, which is presumably responsible for automating the token deployment process. It's a simple command to trigger the pre-configured deployment steps. ```bash ./deploy.sh ``` -------------------------------- ### Navigate to Existing Vue Application Directory Source: https://github.com/junobuild/docs/blob/main/docs/guides/vue.mdx Change the current directory to your existing Vue application's root before installing the Juno SDK. ```bash cd your-existing-app ``` -------------------------------- ### Create Juno Project Snapshot Source: https://github.com/junobuild/docs/blob/main/docs/reference/cli.mdx Creates a snapshot of the Juno project's current state. ```bash juno snapshot ``` -------------------------------- ### Eject Juno Project Configuration Source: https://github.com/junobuild/docs/blob/main/docs/reference/cli.mdx Ejects the Juno project's configuration, potentially exposing underlying setup for advanced customization or migration. ```bash juno eject ``` -------------------------------- ### Install Juno Vite plugin in Astro configuration Source: https://github.com/junobuild/docs/blob/main/docs/guides/astro.mdx Add the Juno Vite plugin to your `astro.config.mjs` file to automatically inject Satellite IDs as environment variables. ```javascript import { defineConfig } from "astro/config"; import juno from "@junobuild/vite-plugin"; import sitemap from "@astrojs/sitemap"; // https://astro.build/config export default defineConfig({ site: "https://hello.com", integrations: [sitemap()], vite: { plugins: [juno()] }, devToolbar: { enabled: false } }); ```