diff --git a/blog/2023-03-28-build-a-web3-app-with-react-js.md b/blog/2023-03-28-build-a-web3-app-with-react-js.md index 564c838c..d77eee71 100644 --- a/blog/2023-03-28-build-a-web3-app-with-react-js.md +++ b/blog/2023-03-28-build-a-web3-app-with-react-js.md @@ -40,7 +40,7 @@ Let’s build our first dapp! In this example, we will create a simple note-taki ### Initialization -Before you can integrate Juno into your ReactJS app, you’ll need to create a satellite. This process is explained in detail in the [documentation](https://juno.build/docs/add-juno-to-an-app/create-a-satellite). +Before you can integrate Juno into your ReactJS app, you’ll need to create a satellite. This process is explained in detail in the [documentation](https://juno.build/docs/create-a-satellite). Moreover, you also need to install the SDK. diff --git a/blog/2023-04-21-develop-an-angular-app-on-blockchain.md b/blog/2023-04-21-develop-an-angular-app-on-blockchain.md index 58d69381..649c2eb9 100644 --- a/blog/2023-04-21-develop-an-angular-app-on-blockchain.md +++ b/blog/2023-04-21-develop-an-angular-app-on-blockchain.md @@ -40,7 +40,7 @@ Let’s start building our first decentralized application, or “dapp” for sh ### Initialization -Before you can integrate Juno into your Angular app, you’ll need to create a satellite. This process is explained in detail in the [documentation](https://juno.build/docs/add-juno-to-an-app/create-a-satellite). +Before you can integrate Juno into your Angular app, you’ll need to create a satellite. This process is explained in detail in the [documentation](https://juno.build/docs/create-a-satellite). Moreover, you also need to install the SDK. diff --git a/blog/2023-05-24-build-a-web3-app-with-vuejs.md b/blog/2023-05-24-build-a-web3-app-with-vuejs.md index 9e985a5a..08baca94 100644 --- a/blog/2023-05-24-build-a-web3-app-with-vuejs.md +++ b/blog/2023-05-24-build-a-web3-app-with-vuejs.md @@ -52,7 +52,7 @@ This tutorial and code sample utilize the Vue Composition API. ### Initialization -Before you can integrate Juno into your app, you'll need to create a satellite. This process is explained in detail in the [documentation](https://juno.build/docs/add-juno-to-an-app/create-a-satellite). +Before you can integrate Juno into your app, you'll need to create a satellite. This process is explained in detail in the [documentation](https://juno.build/docs/create-a-satellite). Moreover, you also need to install the SDK. diff --git a/blog/2024-02-09-unleashing-the-infinite-with-serverless/index.md b/blog/2024-02-09-unleashing-the-infinite-with-serverless/index.md index d8f65c30..3ed3d3ff 100644 --- a/blog/2024-02-09-unleashing-the-infinite-with-serverless/index.md +++ b/blog/2024-02-09-unleashing-the-infinite-with-serverless/index.md @@ -46,7 +46,7 @@ In addition to unveiling this new feature, we're also excited to introduce a bra :::note -Make sure you have Juno's [CLI](/docs/miscellaneous/cli#installation) tool installed on your machine. +Make sure you have Juno's [CLI](/docs/miscellaneous/cli#installing-the-juno-cli) tool installed on your machine. ::: diff --git a/blog/2024-05-20-how-to-redirect-a-route-after-renaming-it.md b/blog/2024-05-20-how-to-redirect-a-route-after-renaming-it.md index ee1f5b4d..17c61bef 100644 --- a/blog/2024-05-20-how-to-redirect-a-route-after-renaming-it.md +++ b/blog/2024-05-20-how-to-redirect-a-route-after-renaming-it.md @@ -64,7 +64,7 @@ Deploy your updated website using GitHub Actions or by running the `juno deploy` Next, configure the redirection in your Juno configuration. This involves specifying the old route and the new route so that requests to the old route are redirected to the new one. -For example, we recently renamed [https://juno.build/docs/add-juno-to-an-app/install-the-sdk-and-initialize-juno](https://juno.build/docs/add-juno-to-an-app/install-the-sdk-and-initialize-juno) to [https://juno.build/docs/add-juno-to-an-app/setup](https://juno.build/docs/add-juno-to-an-app/setup). Therefore, we added the following redirection in our [juno.config.ts](https://github.com/junobuild/docs/blob/main/juno.config.ts) file: +For example, we recently renamed [https://juno.build/docs/install-the-sdk-and-initialize-juno](https://juno.build/docs/install-the-sdk-and-initialize-juno) to [https://juno.build/docs/setup](https://juno.build/docs/setup). Therefore, we added the following redirection in our [juno.config.ts](https://github.com/junobuild/docs/blob/main/juno.config.ts) file: ```typescript import { defineConfig } from "@junobuild/config"; diff --git a/docs/add-juno-to-an-app/deploy.md b/docs/add-juno-to-an-app/deploy.md deleted file mode 100644 index 47910c72..00000000 --- a/docs/add-juno-to-an-app/deploy.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -sidebar_position: 3 -description: Learn how to deploy your app using Juno with our comprehensive guide. Follow these steps to ensure a smooth deployment process. -keywords: - [ - deploy app with Juno, - Juno deployment guide, - how to deploy app, - Juno CLI, - Juno satellite - ] ---- - -# Deploy - -Deploying your app with Juno is straightforward, just like deploying any modern frontend application. - -:::note - -[Node.js](https://nodejs.org/en/download/) version LTS or higher is required. - -::: - -## Build your App - -Before proceeding, ensure that your app is prepared and built for production. Typically, this involves the following steps: - -```bash -npm run build -``` - -## Deploy your App - -To install the [CLI] if you haven't done so already: - -```bash -npm i -g @junobuild/cli -``` - -Once the installation is complete, you can log in to your [satellite] from the terminal. - -```bash -juno login -``` - -Running this command will open Juno's [console] in your browser. You will be prompted to grant access to your machine. - -After setting up authentication, deploy your project by running the following command from the root folder of your project: - -```bash -juno deploy -``` - -During the initial deployment, you will be prompted to select the target satellite. The process should proceed smoothly, and upon completion, your app will be hosted on-chain. - -:::tip - -Juno provides a **GitHub Action** that automates the deployment of your dapp to your satellite. For detailed instructions on how to configure it for your repository, please refer to the documentation [here](../guides/github-actions). - -::: - -[CLI]: ../miscellaneous/cli.mdx -[satellite]: ../terminology.md#satellite -[console]: ../terminology.md#console diff --git a/docs/add-juno-to-an-app/setup.md b/docs/add-juno-to-an-app/setup.md deleted file mode 100644 index 8e15897f..00000000 --- a/docs/add-juno-to-an-app/setup.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Setup - -If you intend to use Juno solely for [hosting](../build/hosting.md) purposes, you may skip the following steps, which are necessary only for implementing advanced features such as [authentication](../build/authentication.md), [datastore](../build/datastore.md) or [storage](../build/storage.md). - -Conversely, if you plan to utilize these rich features, here is how you can connect Juno to your web app. - -## Initialization - -1. Install Juno SDK using npm: - -```bash -npm i @junobuild/core -``` - -2. Initialize your satellite in your web app: - -```typescript -import { initSatellite } from "@junobuild/core"; - -await initSatellite(); -``` - -It is generally recommended to initialize the library at the top of your application. - -If you are using the [Next.js](../miscellaneous/plugins.md#nextjs-plugin) or [Vite](../miscellaneous/plugins.md#vite-plugin) plugins, you can start developing or continue with [deployment](./deploy.md). - ---- - -## Configuration - -No parameters are required to initialize a satellite if you are using plugins, which take care of the environment variables. - -### Automated - -The configuration of your project is set in a `juno.config` file (TypeScript, JavaScript, or JSON) that exists at the root of your project. The [Next.js](../miscellaneous/plugins.md#nextjs-plugin) or [Vite](../miscellaneous/plugins.md#vite-plugin) plugins read the file and automatically load the information required to initialize your dApp when you build and run it. - -### Manually configure your application - -If you are not using a plugin, you need to provide the `satelliteId` when initializing the satellite. Update the initialization as follows: - -```typescript -import { initSatellite } from "@junobuild/core"; - -await initSatellite({ - satelliteId: "your-actual-satellite-id" -}); -``` - -Replace the placeholder `satelliteId` with your actual satellite ID, which can be copied from the [console](https://console.juno.build) on the overview page. - -[satellite]: ../terminology.md#satellite diff --git a/docs/build/authentication.md b/docs/build/authentication.md index 1513d249..e1331e58 100644 --- a/docs/build/authentication.md +++ b/docs/build/authentication.md @@ -23,7 +23,7 @@ You can manage your users in the [authentication](https://console.juno.build/auh :::note -The Juno SDK must be [installed](../add-juno-to-an-app/setup) and initialized in your app to use the authentication features. +The Juno SDK must be [installed](../setup-the-sdk) and initialized in your app to use the authentication features. ::: diff --git a/docs/build/datastore.md b/docs/build/datastore.md index 83450a24..1a7726cb 100644 --- a/docs/build/datastore.md +++ b/docs/build/datastore.md @@ -10,7 +10,7 @@ The Juno Datastore offers a simple key-value model, organized by collections con :::note -To use these features, the Juno SDK must be [installed](../add-juno-to-an-app/setup) and initialized in your app. +To use these features, the Juno SDK must be [installed](../setup-the-sdk) and initialized in your app. ::: diff --git a/docs/build/storage.md b/docs/build/storage.md index 4d7cd641..0b779975 100644 --- a/docs/build/storage.md +++ b/docs/build/storage.md @@ -11,7 +11,7 @@ It offers a powerful and cost-effective object storage solution on the blockchai :::note -To use Juno Storage's features, you must [install](../add-juno-to-an-app/setup) and initialize the Juno SDK in your app. +To use Juno Storage's features, you must [install](../setup-the-sdk) and initialize the Juno SDK in your app. ::: diff --git a/docs/add-juno-to-an-app/create-a-satellite.md b/docs/create-a-satellite.md similarity index 89% rename from docs/add-juno-to-an-app/create-a-satellite.md rename to docs/create-a-satellite.md index 919285b8..3646f981 100644 --- a/docs/add-juno-to-an-app/create-a-satellite.md +++ b/docs/create-a-satellite.md @@ -1,5 +1,4 @@ --- -sidebar_position: 1 description: "Learn how to create a satellite with Juno in this comprehensive guide. Perfect for developers integrating Juno into their projects." keywords: [ @@ -35,6 +34,6 @@ In the creation wizard, there are advanced options available for more experience If you wish to have more control over where your satellite is deployed, you can select the [subnet] for deployment during the creation process. -[satellite]: ../terminology.md#satellite -[Internet Identity]: ../terminology.md#internet-identity -[subnet]: ../terminology.md#subnet +[satellite]: terminology.md#satellite +[Internet Identity]: terminology.md#internet-identity +[subnet]: terminology.md#subnet diff --git a/docs/faq.md b/docs/faq.md index 6851603d..f29ba3e8 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -1,7 +1,3 @@ ---- -sidebar_position: 10 ---- - # FAQ ### Where do I find support? @@ -50,7 +46,7 @@ In contrast, Juno takes a different approach. Developers pre-charge their smart ### Do you have a library for [some other language]? -We officially support [JavaScript](./add-juno-to-an-app/setup). +We officially support [JavaScript](setup-the-sdk). Community-supported libraries and contributions are warmly welcomed. diff --git a/docs/guides/angular.md b/docs/guides/angular.mdx similarity index 67% rename from docs/guides/angular.md rename to docs/guides/angular.mdx index 7fdf8a01..dcf43878 100644 --- a/docs/guides/angular.md +++ b/docs/guides/angular.mdx @@ -5,37 +5,47 @@ description: Use Juno with Angular toc_min_heading_level: 2 toc_max_heading_level: 2 sidebar_position: 5 +pagination_next: null +pagination_prev: null --- # Use Juno with Angular Explore how to create a Juno project developed with Angular. -## Table of contents +import Choice from "./components/choice.mdx"; -- [Quickstart](#quickstart) -- [Note-taking app example](#note-taking-app-example) -- [Hosting](#hosting) + --- -## Quickstart +## Build + +import Build from "./components/build.mdx"; + + + +--- + +### Step-by-step This guide provides quickstart instructions for integrating Juno in two scenarios: starting a new project and adding Juno to an existing Angular app. Additionally, it covers how to develop against a production environment or locally. -### Path A: Start a new project with a template +#### 1. Choose Your Integration Path + +You can either start a new project or add Juno to an existing app. + +##### Path A: Start a new project with a template -1. Create a new project using the Juno quickstart CLI: +Create a new project using the Juno quickstart CLI: ```bash -npm create juno@latest +npm create juno@latest -- --template angular-starter ``` -### Path B: Integrate Juno into an existing Angular app - -1. Add the Juno SDK: +##### Path B: Integrate Juno into an existing Angular app Navigate to your existing app directory and install Juno SDK: @@ -44,16 +54,16 @@ cd your-existing-app npm i @junobuild/core ``` -### 2. Configure Datastore +#### 2. Configure Datastore -#### Production Path +##### Production Path To use production, set up a satellite and new collection: -- [Create a new satellite](../add-juno-to-an-app/create-a-satellite.md) in the Juno's console. +- [Create a new satellite](../create-a-satellite.md) in the Juno's console. - After your project is ready, create a collection in your datastore, which we'll call `demo`, using the [console](https://console.juno.build). -#### Local Development Path +##### Local Development Path To develop with the local emulator, add a collection named `demo` within the `juno.dev.config.js` file. @@ -90,7 +100,7 @@ juno dev start npm i -g @junobuild/cli ``` -### 3. Insert data from your app +#### 3. Insert data from your app In `app.component.ts`, initialize the library with the satellite ID you have created for production, or use `jx5yt-yyaaa-aaaal-abzbq-cai` if you are developing locally with the emulator. @@ -129,13 +139,17 @@ export class AppComponent { } ``` -### 5. Start the app +#### 4. Start the app Start the app, go to [http://localhost:4200](http://localhost:4200) in a browser, click "Insert a document," and you should see the data successfully persisted in your satellite on the blockchain. +import WhatsNext from "./components/whats-next.md"; + + + --- -## Note-taking app example +### Quickstart This example demonstrates how to quickly deploy a basic note-taking app that integrates Juno's core features: @@ -148,70 +162,48 @@ Using the Juno CLI, you can easily scaffold this app. To start, run the appropri NPM: ```bash -npm create juno@latest +npm create juno@latest -- --template angular-example ``` Yarn: ```bash -yarn create juno +yarn create juno -- --template angular-example ``` PNPM: ```bash -pnpm create juno +pnpm create juno -- --template angular-example ```
-Follow the CLI prompts to choose the note-taking app example and select local development. The CLI will manage all configurations and dependencies, allowing you to focus on exploring and customizing your app right away. +Follow the CLI prompts to choose the note-taking app example and select local +development. The CLI will manage all configurations and dependencies, allowing +you to focus on exploring and customizing your app right away. --- ## Hosting -If you're looking to deploy your existing app or website developed with Angular and Juno, this guide is for you. - -### 1. Set up a satellite - -If you haven't created a satellite yet, go ahead and [create](../add-juno-to-an-app/create-a-satellite.md) a new one in the Juno's console. - -### 2. Install Juno CLI and log in - -Install the Juno command line interface by executing the following command in your terminal: +If you already have an [Angular](https://angular.dev/) app, you're all set — proceed to the [Deployment](#deployment) section to upload your project to production. -```bash -npm i -g @junobuild/cli -``` - -After the CLI is ready, log in to your satellite from your terminal to authenticate your device. - -```bash -juno login -``` - -### 3. Deploy - -Build your app: +Otherwise, you can bootstrap a new website using the Juno template by running the following command: ```bash -npm run build +npm create juno@latest -- --template angular-starter ``` -Deploy your project by running the following command from your project’s root folder: +Once you’re set up, continue to the [Deployment](#deployment) section below. -```bash -juno deploy -``` +--- -When prompted to provide the name or path of the folder containing your built dapp files, answer `dist`. +## Deployment -### 4. Open +Use this guide to deploy your project to production — directly to a smart contract on mainnet. -Open your browser and you should see your deployed app or website. +import Deploy from "./components/deploy.mdx"; -```bash -juno open -``` + [satellite]: ../terminology.md#satellite diff --git a/docs/guides/astro.md b/docs/guides/astro.mdx similarity index 66% rename from docs/guides/astro.md rename to docs/guides/astro.mdx index d54593a3..e71d0b63 100644 --- a/docs/guides/astro.md +++ b/docs/guides/astro.mdx @@ -6,36 +6,39 @@ keywords: [Astro, integrate Juno, quickstart, hosting, CLI, SDK] toc_min_heading_level: 2 toc_max_heading_level: 2 sidebar_position: 6 +pagination_next: null +pagination_prev: null --- +import Link from "@docusaurus/Link"; + # Use Juno with Astro -Explore how to create a Juno project developed with Astro. +Easily set up and deploy your Astro project with Juno. -## Table of contents +import Choice from "./components/choice.mdx"; -- [Quickstart](#quickstart) -- [Hosting](#hosting) + --- -## Quickstart +## Build + +This guide provides quickstart instructions for integrating Juno and building a feature-rich application. It also includes guidance on developing in a production environment or locally. -This guide provides quickstart instructions for integrating Juno in two scenarios: starting a new project and adding Juno to an existing Astro app. +### 1. Choose Your Integration Path -Additionally, it covers how to develop against a production environment or locally. +You can either start a new project or add Juno to an existing app. -### Path A: Start a new project with a template +#### Path A: Start a new project with a template -1. Create a new project using the Juno quickstart CLI: +Create a new project using the Juno quickstart CLI: ```bash -npm create juno@latest +npm create juno@latest -- --template astro-starter ``` -### Path B: Integrate Juno into an existing Astro app - -1. Add the Juno SDK: +#### Path B: Integrate Juno into an existing Astro app Navigate to your existing app directory and install Juno SDK: @@ -50,7 +53,7 @@ npm i @junobuild/core To use production, set up a satellite and new collection: -- [Create a new satellite](../add-juno-to-an-app/create-a-satellite.md) in the Juno's console. +- [Create a new satellite](../create-a-satellite.md) in the Juno's console. - After your project is ready, create a collection in your datastore, which we'll call `demo`, using the [console](https://console.juno.build). #### Local Development Path @@ -145,54 +148,34 @@ Add an `insert` function to persist a document. ### 5. Start the app -Start the app, go to [http://localhost:4321/](http://localhost:4321/) in a browser, click "Insert a document," and you should see the data successfully persisted in your satellite on the blockchain. - ---- - -## Hosting - -If you're looking to deploy your existing app or website developed with Astro and Juno, this guide is for you. - -### 1. Set up a satellite +Start the app, go to [http://localhost:4321/](http://localhost:4321/) in a browser, click "Insert a document", and you should see the data successfully persisted in your satellite on the blockchain. -If you haven't created a satellite yet, go ahead and [create](../add-juno-to-an-app/create-a-satellite.md) a new one in the Juno's console. +import WhatsNext from "./components/whats-next.md"; -### 2. Install Juno CLI and log in + -Install the Juno command line interface by executing the following command in your terminal: - -```bash -npm i -g @junobuild/cli -``` - -After the CLI is ready, log in to your satellite from your terminal to authenticate your device. +--- -```bash -juno login -``` +## Hosting -### 3. Deploy +If you already have an [Astro](https://astro.build/) app, you're all set — proceed to the [Deployment](#deployment) section to upload your project to production. -Build your website: +Otherwise, you can bootstrap a new website using the Juno template by running the following command: ```bash -npm run build +npm create juno@latest -- --template astro-starter ``` -Deploy your project by running the following command from your project’s root folder: +Once you’re set up, continue to the [Deployment](#deployment) section below. -```bash -juno deploy -``` +--- -When prompted to provide the name or path of the folder containing your built dapp files, answer `dist`. +## Deployment -### 4. Open +Use this guide to deploy your project to production — directly to a smart contract on mainnet. -Open your browser and you should see your deployed app or website. +import Deploy from "./components/deploy.mdx"; -```bash -juno open -``` + [satellite]: ../terminology.md#satellite diff --git a/docs/guides/components/build.mdx b/docs/guides/components/build.mdx new file mode 100644 index 00000000..cf2c3c96 --- /dev/null +++ b/docs/guides/components/build.mdx @@ -0,0 +1,17 @@ +import Link from "@docusaurus/Link"; + +Ready to implement a feature-rich application with Juno? You can choose a step-by-step approach, building each component gradually, or dive into our quickstart template, which showcases Juno's core features. + +Which path would you like to explore next? + +
+ Step-by-step + + Quickstart +
diff --git a/docs/guides/components/choice.mdx b/docs/guides/components/choice.mdx new file mode 100644 index 00000000..9537fa17 --- /dev/null +++ b/docs/guides/components/choice.mdx @@ -0,0 +1,23 @@ +import Link from "@docusaurus/Link"; + +What would you like to do? + +
+ Build + + Hosting +
+ +:::note[Options] + +Choose **Build** if you want to build a full featured rich application. + +Choose **Hosting** if you just want to deploy a website. + +::: diff --git a/docs/guides/components/deploy.mdx b/docs/guides/components/deploy.mdx new file mode 100644 index 00000000..ebd0a69d --- /dev/null +++ b/docs/guides/components/deploy.mdx @@ -0,0 +1,25 @@ +import Link from "@docusaurus/Link"; + +export const index = 1; + +### {props.index}. Set up a satellite + +If you haven't created a satellite yet, go ahead and [create](../../create-a-satellite.md) a new one in the Juno's console. + +### {props.index + 1}. Deploy + +Once your satellite is up and running, you can proceed with uploading your app to your smart contract. + +You can either automate your deployment with GitHub Actions (recommended) or deploy manually from your device. Choose your method: + +
+ GitHub Actions + + Manual +
diff --git a/docs/guides/components/whats-next.md b/docs/guides/components/whats-next.md new file mode 100644 index 00000000..16e552e7 --- /dev/null +++ b/docs/guides/components/whats-next.md @@ -0,0 +1,5 @@ +:::info[What's Next: Going Live] + +If you used the local development path, make sure to configure your collections in the Juno console for production. Once you're ready to deploy your app for others to access, continue to the [Deployment guide](#deployment). + +::: diff --git a/docs/guides/github-actions.md b/docs/guides/github-actions.md index e639799c..a51f4422 100644 --- a/docs/guides/github-actions.md +++ b/docs/guides/github-actions.md @@ -9,6 +9,8 @@ sidebar_position: 8 Using any features offered by the Juno [CLI] within GitHub Actions is possible. +--- + ## Using GitHub Actions to Deploy Your Decentralized App This guide will walk you through deploying your decentralized app to Juno satellites using the [junobuild/juno-action](https://github.com/junobuild/juno-action) GitHub Action. diff --git a/docs/guides/local-development.md b/docs/guides/local-development.md index ae55ea1d..512cf25b 100644 --- a/docs/guides/local-development.md +++ b/docs/guides/local-development.md @@ -2,7 +2,7 @@ id: local-development title: Local Development description: Set-up the local emulator with Docker -sidebar_position: 9 +sidebar_position: 11 --- # Local Development diff --git a/docs/guides/manual-deployment.md b/docs/guides/manual-deployment.md new file mode 100644 index 00000000..9968be37 --- /dev/null +++ b/docs/guides/manual-deployment.md @@ -0,0 +1,52 @@ +--- +id: manual-deployment +title: Manual Deployment +description: Learn how to deploy an application to a Juno Satellite from your device using the CLI. +sidebar_position: 9 +--- + +# Manual Deployment + +While we recommend using [GitHub Actions](./github-actions.md) for efficient and automated deployments, this guide covers how to manually deploy your Astro app to Juno from your device using the Juno CLI. Follow these steps to set up, build, and deploy your application to a Juno Satellite. + +This approach is ideal for testing or personal projects. + +--- + +### 1. Install Juno CLI and log in + +Install the Juno command line interface by executing the following command in your terminal: + +```bash +npm i -g @junobuild/cli +``` + +After the CLI is ready, log in to your satellite from your terminal to authenticate your device. + +```bash +juno login +``` + +Running this command will open Juno's console in your browser. You will be prompted to grant permissions for your modules (Mission Control — i.e., your wallet, Satellite(s), or Analytics) to access from your machine. + +### 2. Deploy + +Build your project: + +```bash +npm run build +``` + +Deploy your application or website by running the following command from your project’s root folder: + +```bash +juno deploy +``` + +:::tip + +When prompted for the name or path of the folder containing your built dapp files, provide the appropriate folder name for your framework, such as `build` (SvelteKit), `out` (Next.js), or `dist` (React, Astro, or Vue). + +::: + +Wait for the deploy to complete. Once uploaded, it will be live on your Juno Satellite and accessible on the web. diff --git a/docs/guides/nextjs.md b/docs/guides/nextjs.mdx similarity index 69% rename from docs/guides/nextjs.md rename to docs/guides/nextjs.mdx index 1daff113..bc917db4 100644 --- a/docs/guides/nextjs.md +++ b/docs/guides/nextjs.mdx @@ -6,37 +6,47 @@ keywords: [Juno, Next.js, integration, quickstart, guide, examples, hosting] toc_min_heading_level: 2 toc_max_heading_level: 2 sidebar_position: 1 +pagination_next: null +pagination_prev: null --- # Use Juno with Next.js Explore how to create a Juno project developed with Next.js. -## Table of contents +import Choice from "./components/choice.mdx"; -- [Quickstart](#quickstart) -- [Note-taking app example](#note-taking-app-example) -- [Hosting](#hosting) + --- -## Quickstart +## Build + +import Build from "./components/build.mdx"; + + + +--- + +### Step-by-step This guide provides quickstart instructions for integrating Juno in two scenarios: starting a new project and adding Juno to an existing Next.js app. Additionally, it covers how to develop against a production environment or locally. -### Path A: Start a new project with a template +#### 1. Choose Your Integration Path + +You can either start a new project or add Juno to an existing app. -1. Create a new project using the Juno quickstart CLI: +##### Path A: Start a new project with a template + +Create a new project using the Juno quickstart CLI: ```bash -npm create juno@latest +npm create juno@latest -- --template nextjs-starter ``` -### Path B: Integrate Juno into an existing Next.js app - -1. Add the Juno SDK: +##### Path B: Integrate Juno into an existing Next.js app Navigate to your existing app directory and install Juno SDK: @@ -45,16 +55,16 @@ cd your-existing-app npm i @junobuild/core-peer ``` -### 2. Configure Datastore +#### 2. Configure Datastore -#### Production Path +##### Production Path To use production, set up a satellite and new collection: -- [Create a new satellite](../add-juno-to-an-app/create-a-satellite.md) in the Juno's console. +- [Create a new satellite](../create-a-satellite.md) in the Juno's console. - After your project is ready, create a collection in your datastore, which we'll call `demo`, using the [console](https://console.juno.build). -#### Local Development Path +##### Local Development Path To develop with the local emulator, add a collection named `demo` within the `juno.dev.config.ts` file. @@ -90,7 +100,7 @@ juno dev start npm i -g @junobuild/cli ``` -### 3. Insert data from your app +#### 3. Insert data from your app In `Page.tsx`, (if using TypeScript) or the corresponding JavaScript file, initialize the library with the satellite ID you have created for production, or use `jx5yt-yyaaa-aaaal-abzbq-cai` if you are developing locally with the emulator. @@ -137,13 +147,17 @@ export default function Home() { } ``` -### 5. Start the app +#### 4. Start the app Start the app and go to [http://localhost:3000](http://localhost:3000) in a browser. Click "Insert a document" to see the data successfully persisted in your satellite on the blockchain. +import WhatsNext from "./components/whats-next.md"; + + + --- -## Note-taking app example +### Quickstart This example demonstrates how to quickly deploy a basic note-taking app that integrates Juno's core features: @@ -156,33 +170,49 @@ Using the Juno CLI, you can easily scaffold this app. To start, run the appropri NPM: ```bash -npm create juno@latest +npm create juno@latest -- --template nextjs-example ``` Yarn: ```bash -yarn create juno +yarn create juno -- --template nextjs-example ``` PNPM: ```bash -pnpm create juno +pnpm create juno -- --template nextjs-example ```
-Follow the CLI prompts to choose the note-taking app example and select local development. The CLI will manage all configurations and dependencies, allowing you to focus on exploring and customizing your app right away. +Follow the CLI prompts to choose the note-taking app example and select local +development. The CLI will manage all configurations and dependencies, allowing +you to focus on exploring and customizing your app right away. --- ## Hosting -If you're looking to deploy your existing app or website developed with Next.js and Juno, this guide is for you. +If you already have an [Next.js](https://nextjs.org/) app, you're all set — proceed to the [Deployment](#deployment) section to upload your project to production. + +Otherwise, you can bootstrap a new website using the Juno template by running the following command: + +```bash +npm create juno@latest -- --template nextjs-starter +``` + +Once you’re set up, continue to the [Deployment](#deployment) section below. + +--- + +## Deployment + +Use this guide to deploy your project to production — directly to a smart contract on mainnet. ### 1. Static exports -The Internet Computer, including Juno, currently does not support Server Side Rendering. Therefore, it is recommended to generate a pre-rendered or client-side-only frontend application. +The Internet Computer, including Juno, currently does not support Server Side Rendering (_without workaround_). Therefore, it is recommended to generate a pre-rendered or client-side-only frontend application. We suggest using the [static exports](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) option from Next.js. @@ -197,46 +227,8 @@ const nextConfig = { module.exports = nextConfig; ``` -### 2. Set up a satellite - -If you haven't created a satellite yet, go ahead and [create](../add-juno-to-an-app/create-a-satellite.md) a new one in the Juno's console. - -### 3. Install Juno CLI and log in - -Install the Juno command line interface by executing the following command in your terminal: - -```bash -npm i -g @junobuild/cli -``` - -After the CLI is ready, log in to your satellite from your terminal to authenticate your device. - -```bash -juno login -``` - -### 4. Deploy - -Build your app: - -```bash -npm run build -``` - -Deploy your project by running the following command from your project’s root folder: - -```bash -juno deploy -``` +import Deploy from "./components/deploy.mdx"; -When prompted to provide the name or path of the folder containing your built dapp files, answer `out`. - -### 5. Open - -Open your browser and you should see your deployed app or website. - -```bash -juno open -``` + [satellite]: ../terminology.md#satellite diff --git a/docs/guides/react.md b/docs/guides/react.mdx similarity index 66% rename from docs/guides/react.md rename to docs/guides/react.mdx index 732f760e..14522907 100644 --- a/docs/guides/react.md +++ b/docs/guides/react.mdx @@ -5,37 +5,47 @@ description: Use Juno with React toc_min_heading_level: 2 toc_max_heading_level: 2 sidebar_position: 2 +pagination_next: null +pagination_prev: null --- # Use Juno with React Explore how to create a Juno project developed with React. -## Table of contents +import Choice from "./components/choice.mdx"; -- [Quickstart](#quickstart) -- [Note-taking app example](#note-taking-app-example) -- [Hosting](#hosting) + --- -## Quickstart +## Build + +import Build from "./components/build.mdx"; + + + +--- + +### Step-by-step This guide provides quickstart instructions for integrating Juno in two scenarios: starting a new project and adding Juno to an existing React app. Additionally, it covers how to develop against a production environment or locally. -### Path A: Start a new project with a template +#### 1. Choose Your Integration Path + +You can either start a new project or add Juno to an existing app. + +##### Path A: Start a new project with a template -1. Create a new project using the Juno quickstart CLI: +Create a new project using the Juno quickstart CLI: ```bash -npm create juno@latest +npm create juno@latest -- --template react-starter ``` -### Path B: Integrate Juno into an existing React app - -1. Add the Juno SDK: +##### Path B: Integrate Juno into an existing React app Navigate to your existing app directory and install Juno SDK: @@ -44,16 +54,16 @@ cd your-existing-app npm i @junobuild/core ``` -### 2. Configure Datastore +#### 2. Configure Datastore -#### Production Path +##### Production Path To use production, set up a satellite and new collection: -- [Create a new satellite](../add-juno-to-an-app/create-a-satellite.md) in the Juno's console. +- [Create a new satellite](../create-a-satellite.md) in the Juno's console. - After your project is ready, create a collection in your datastore, which we'll call `demo`, using the [console](https://console.juno.build). -#### Local Development Path +##### Local Development Path To develop with the local emulator, add a collection named `demo` within the `juno.dev.config.js` file. @@ -90,7 +100,7 @@ juno dev start npm i -g @junobuild/cli ``` -### 3. Insert data from your app +#### 3. Insert data from your app In `App.jsx`, initialize the library with the satellite ID you have created for production, or use `jx5yt-yyaaa-aaaal-abzbq-cai` if you are developing locally with the emulator. @@ -132,13 +142,17 @@ function App() { export default App; ``` -### 5. Start the app +#### 4. Start the app Start the app and go to [http://localhost:5173](http://localhost:5173) in a browser. Click "Insert a document" to see the data successfully persisted in your satellite on the blockchain. +import WhatsNext from "./components/whats-next.md"; + + + --- -## Note-taking app example +### Quickstart This example demonstrates how to quickly deploy a basic note-taking app that integrates Juno's core features: @@ -151,70 +165,48 @@ Using the Juno CLI, you can easily scaffold this app. To start, run the appropri NPM: ```bash -npm create juno@latest +npm create juno@latest -- --template react-example ``` Yarn: ```bash -yarn create juno +yarn create juno -- --template react-example ``` PNPM: ```bash -pnpm create juno +pnpm create juno -- --template react-example ```
-Follow the CLI prompts to choose the note-taking app example and select local development. The CLI will manage all configurations and dependencies, allowing you to focus on exploring and customizing your app right away. +Follow the CLI prompts to choose the note-taking app example and select local +development. The CLI will manage all configurations and dependencies, allowing +you to focus on exploring and customizing your app right away. --- ## Hosting -If you're looking to deploy your existing app or website developed with React and Juno, this guide is for you. - -### 1. Set up a satellite - -If you haven't created a satellite yet, go ahead and [create](../add-juno-to-an-app/create-a-satellite.md) a new one in the Juno's console. - -### 2. Install Juno CLI and log in - -Install the Juno command line interface by executing the following command in your terminal: +If you already have an [React](https://react.dev/) app, you're all set — proceed to the [Deployment](#deployment) section to upload your project to production. -```bash -npm i -g @junobuild/cli -``` - -After the CLI is ready, log in to your satellite from your terminal to authenticate your device. - -```bash -juno login -``` - -### 3. Deploy - -Build your app: +Otherwise, you can bootstrap a new website using the Juno template by running the following command: ```bash -npm run build +npm create juno@latest -- --template react-starter ``` -Deploy your project by running the following command from your project’s root folder: +Once you’re set up, continue to the [Deployment](#deployment) section below. -```bash -juno deploy -``` +--- -When prompted to provide the name or path of the folder containing your built dapp files, answer `dist`. +## Deployment -### 4. Open +Use this guide to deploy your project to production — directly to a smart contract on mainnet. -Open your browser and you should see your deployed app or website. +import Deploy from "./components/deploy.mdx"; -```bash -juno open -``` + [satellite]: ../terminology.md#satellite diff --git a/docs/guides/rust.md b/docs/guides/rust.md index 4b2a0bab..d161ae79 100644 --- a/docs/guides/rust.md +++ b/docs/guides/rust.md @@ -25,7 +25,7 @@ Learn how to set up your environment to develop additional features for a [satel :::note -Make sure you have Juno's [CLI](/docs/miscellaneous/cli#installation) tool installed on your machine. +Make sure you have Juno's [CLI](/docs/miscellaneous/cli#installing-the-juno-cli) tool installed on your machine. ::: diff --git a/docs/guides/sveltekit.md b/docs/guides/sveltekit.mdx similarity index 69% rename from docs/guides/sveltekit.md rename to docs/guides/sveltekit.mdx index c7fa8692..de41715d 100644 --- a/docs/guides/sveltekit.md +++ b/docs/guides/sveltekit.mdx @@ -5,37 +5,47 @@ description: Use Juno with SvelteKit toc_min_heading_level: 2 toc_max_heading_level: 2 sidebar_position: 3 +pagination_next: null +pagination_prev: null --- # Use Juno with SvelteKit Explore how to create a Juno project developed with SvelteKit. -## Table of contents +import Choice from "./components/choice.mdx"; -- [Quickstart](#quickstart) -- [Note-taking app example](#note-taking-app-example) -- [Hosting](#hosting) + --- -## Quickstart +## Build + +import Build from "./components/build.mdx"; + + + +--- + +### Step-by-step This guide provides quickstart instructions for integrating Juno in two scenarios: starting a new project and adding Juno to an existing SvelteKit app. Additionally, it covers how to develop against a production environment or locally. -### Path A: Start a new project with a template +#### 1. Choose Your Integration Path + +You can either start a new project or add Juno to an existing app. -1. Create a new project using the Juno quickstart CLI: +##### Path A: Start a new project with a template + +Create a new project using the Juno quickstart CLI: ```bash -npm create juno@latest +npm create juno@latest -- --template sveltekit-starter ``` -### Path B: Integrate Juno into an existing SvelteKit app - -1. Add the Juno SDK: +##### Path B: Integrate Juno into an existing SvelteKit app Navigate to your existing app directory and install Juno SDK: @@ -44,16 +54,16 @@ cd your-existing-app npm i @junobuild/core-peer ``` -### 2. Configure Datastore +#### 2. Configure Datastore -#### Production Path +##### Production Path To use production, set up a satellite and new collection: -- [Create a new satellite](../add-juno-to-an-app/create-a-satellite.md) in the Juno's console. +- [Create a new satellite](../create-a-satellite.md) in the Juno's console. - After your project is ready, create a collection in your datastore, which we'll call `demo`, using the [console](https://console.juno.build). -#### Local Development Path +##### Local Development Path To develop with the local emulator, add a collection named `demo` within the `juno.dev.config.ts` file. @@ -89,7 +99,7 @@ juno dev start npm i -g @junobuild/cli ``` -### 3. Insert data from your app +#### 3. Insert data from your app Create a new file `+layout.svelte` in `src/routes` and initialize the library with the satellite ID you have created for production, or use `jx5yt-yyaaa-aaaal-abzbq-cai` if you are developing locally with the emulator. @@ -131,13 +141,17 @@ Replace the existing content in your `+page.svelte` file in the same `routes` di {/if} ``` -### 5. Start the app +#### 4. Start the app Start the app, go to [http://localhost:5173](http://localhost:5173) in a browser, click "Insert a document," and you should see the data successfully persisted in your satellite on the blockchain. +import WhatsNext from "./components/whats-next.md"; + + + --- -## Note-taking app example +### Quickstart This example demonstrates how to quickly deploy a basic note-taking app that integrates Juno's core features: @@ -150,33 +164,49 @@ Using the Juno CLI, you can easily scaffold this app. To start, run the appropri NPM: ```bash -npm create juno@latest +npm create juno@latest -- --template sveltekit-example ``` Yarn: ```bash -yarn create juno +yarn create juno -- --template sveltekit-example ``` PNPM: ```bash -pnpm create juno +pnpm create juno -- --template sveltekit-example ```
-Follow the CLI prompts to choose the note-taking app example and select local development. The CLI will manage all configurations and dependencies, allowing you to focus on exploring and customizing your app right away. +Follow the CLI prompts to choose the note-taking app example and select local +development. The CLI will manage all configurations and dependencies, allowing +you to focus on exploring and customizing your app right away. --- ## Hosting -If you're looking to deploy your existing app or website developed with SvelteKit and Juno, this guide is for you. +If you already have an [SvelteKit](https://svelte.dev/) app, you're all set — proceed to the [Deployment](#deployment) section to upload your project to production. + +Otherwise, you can bootstrap a new website using the Juno template by running the following command: + +```bash +npm create juno@latest -- --template sveltekit-starter +``` + +Once you’re set up, continue to the [Deployment](#deployment) section below. + +--- + +## Deployment + +Use this guide to deploy your project to production — directly to a smart contract on mainnet. ### 1. Static site generation -The Internet Computer, including Juno, currently does not support Server Side Rendering. Therefore, it is recommended to generate a pre-rendered or client-side-only frontend application. +The Internet Computer, including Juno, currently does not support Server Side Rendering (_without workaround_). Therefore, it is recommended to generate a pre-rendered or client-side-only frontend application. We suggest using the [adapter-static](https://kit.svelte.dev/docs/adapter-static) option from SvelteKit and replacing the default adapter. @@ -207,46 +237,8 @@ Create a file `+layout.js` in `src/routes` to set the prerender option: export const prerender = true; ``` -### 2. Set up a satellite - -If you haven't created a satellite yet, go ahead and [create](../add-juno-to-an-app/create-a-satellite.md) a new one in the Juno's console. - -### 3. Install Juno CLI and log in - -Install the Juno command line interface by executing the following command in your terminal: - -```bash -npm i -g @junobuild/cli -``` - -After the CLI is ready, log in to your satellite from your terminal to authenticate your device. - -```bash -juno login -``` - -### 4. Deploy - -Build your app: - -```bash -npm run build -``` - -Deploy your project by running the following command from your project’s root folder: - -```bash -juno deploy -``` +import Deploy from "./components/deploy.mdx"; -When prompted to provide the name or path of the folder containing your built dapp files, answer `build`. - -### 5. Open - -Open your browser and you should see your deployed app or website. - -```bash -juno open -``` + [satellite]: ../terminology.md#satellite diff --git a/docs/guides/vue.md b/docs/guides/vue.mdx similarity index 65% rename from docs/guides/vue.md rename to docs/guides/vue.mdx index 2048419b..3e8e7f37 100644 --- a/docs/guides/vue.md +++ b/docs/guides/vue.mdx @@ -5,37 +5,47 @@ description: Use Juno with Vue toc_min_heading_level: 2 toc_max_heading_level: 2 sidebar_position: 4 +pagination_next: null +pagination_prev: null --- # Use Juno with Vue Explore how to create a Juno project developed with Vue. -## Table of contents +import Choice from "./components/choice.mdx"; -- [Quickstart](#quickstart) -- [Note-taking app example](#note-taking-app-example) -- [Hosting](#hosting) + --- -## Quickstart +## Build + +import Build from "./components/build.mdx"; + + + +--- + +### Step-by-step This guide provides quickstart instructions for integrating Juno in two scenarios: starting a new project and adding Juno to an existing Vue app. Additionally, it covers how to develop against a production environment or locally. -### Path A: Start a new project with a template +#### 1. Choose Your Integration Path + +You can either start a new project or add Juno to an existing app. + +##### Path A: Start a new project with a template -1. Create a new project using the Juno quickstart CLI: +Create a new project using the Juno quickstart CLI: ```bash -npm create juno@latest +npm create juno@latest -- --template nextjs-starter ``` -### Path B: Integrate Juno into an existing Vue app - -1. Add the Juno SDK: +##### Path B: Integrate Juno into an existing Vue app Navigate to your existing app directory and install Juno SDK: @@ -44,16 +54,16 @@ cd your-existing-app npm i @junobuild/core ``` -### 2. Configure Datastore +#### 2. Configure Datastore -#### Production Path +##### Production Path To use production, set up a satellite and new collection: -- [Create a new satellite](../add-juno-to-an-app/create-a-satellite.md) in the Juno's console. +- [Create a new satellite](../create-a-satellite.md) in the Juno's console. - After your project is ready, create a collection in your datastore, which we'll call `demo`, using the [console](https://console.juno.build). -#### Local Development Path +##### Local Development Path To develop with the local emulator, add a collection named `demo` within the `juno.dev.config.ts` file. @@ -89,7 +99,7 @@ juno dev start npm i -g @junobuild/cli ``` -### 3. Insert data from your app +#### 3. Insert data from your app In `App.vue`, initialize the library with the satellite ID you have created for production, or use `jx5yt-yyaaa-aaaal-abzbq-cai` if you are developing locally with the emulator. @@ -123,13 +133,17 @@ Add an `insert` function to persist a document. ``` -### 5. Start the app +#### 4. Start the app Start the app, go to [http://localhost:5173](http://localhost:5173) in a browser, click "Insert a document," and you should see the data successfully persisted in your satellite on the blockchain. +import WhatsNext from "./components/whats-next.md"; + + + --- -## Note-taking app example +### Quickstart This example demonstrates how to quickly deploy a basic note-taking app that integrates Juno's core features: @@ -142,70 +156,48 @@ Using the Juno CLI, you can easily scaffold this app. To start, run the appropri NPM: ```bash -npm create juno@latest +npm create juno@latest -- --template vue-example ``` Yarn: ```bash -yarn create juno +yarn create juno -- --template vue-example ``` PNPM: ```bash -pnpm create juno +pnpm create juno -- --template vue-example ```
-Follow the CLI prompts to choose the note-taking app example and select local development. The CLI will manage all configurations and dependencies, allowing you to focus on exploring and customizing your app right away. +Follow the CLI prompts to choose the note-taking app example and select local +development. The CLI will manage all configurations and dependencies, allowing +you to focus on exploring and customizing your app right away. --- ## Hosting -If you're looking to deploy your existing app or website developed with Vue and Juno, this guide is for you. - -### 1. Set up a satellite - -If you haven't created a satellite yet, go ahead and [create](../add-juno-to-an-app/create-a-satellite.md) a new one in the Juno's console. - -### 2. Install Juno CLI and log in - -Install the Juno command line interface by executing the following command in your terminal: +If you already have an [Vue](https://vuejs.org/) app, you're all set — proceed to the [Deployment](#deployment) section to upload your project to production. -```bash -npm i -g @junobuild/cli -``` - -After the CLI is ready, log in to your satellite from your terminal to authenticate your device. - -```bash -juno login -``` - -### 3. Deploy - -Build your app: +Otherwise, you can bootstrap a new website using the Juno template by running the following command: ```bash -npm run build +npm create juno@latest -- --template vue-starter ``` -Deploy your project by running the following command from your project’s root folder: +Once you’re set up, continue to the [Deployment](#deployment) section below. -```bash -juno deploy -``` +--- -When prompted to provide the name or path of the folder containing your built dapp files, answer `dist`. +## Deployment -### 4. Open +Use this guide to deploy your project to production — directly to a smart contract on mainnet. -Open your browser and you should see your deployed app or website. +import Deploy from "./components/deploy.mdx"; -```bash -juno open -``` + [satellite]: ../terminology.md#satellite diff --git a/docs/intro.md b/docs/intro.md index d32fb6db..ef4b5a7c 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -1,11 +1,10 @@ --- -sidebar_position: 1 description: Explore Juno's smart contracts, serverless functions, and hosting capabilities. Start building with Juno today! --- # Getting Started -Start your Juno journey by launching your first **[Satellite](/docs/add-juno-to-an-app/create-a-satellite.md)** – a feature-packed smart contract designed for your project. +Start your Juno journey by launching your first **[Satellite](./create-a-satellite.md)** – a feature-packed smart contract designed for your project. A Satellite is your project’s all-in-one container, **giving you full control 🔐** over authentication, a key-pair datastore (akin to a simple "database"), file storage, serverless functions, and hosting. @@ -15,7 +14,7 @@ It’s everything you need to run your app – no external resources required. ## Integrating Juno into an Existing App -After creating your Satellite, you're ready to put it to use. Follow our [step-by-step guidance](./add-juno-to-an-app/setup) to install the SDK and initialize your app, connecting it to your container. +After creating your Satellite, you're ready to put it to use. Follow our [step-by-step guidance](setup-the-sdk) to install the SDK and initialize your app, connecting it to your container. --- diff --git a/docs/pricing.md b/docs/pricing.md index 2ac5dd69..e84b1264 100644 --- a/docs/pricing.md +++ b/docs/pricing.md @@ -1,5 +1,4 @@ --- -sidebar_position: 12 description: Discover Juno's pricing structure, including operating costs, transaction fees, and cost examples. Learn how to manage and optimize your expenses. keywords: [ diff --git a/docs/setup-the-sdk.md b/docs/setup-the-sdk.md new file mode 100644 index 00000000..3ed27160 --- /dev/null +++ b/docs/setup-the-sdk.md @@ -0,0 +1,84 @@ +--- +description: Learn how to set up the Juno SDK in your web application to access advanced features, including authentication, datastore, and storage options. This guide provides step-by-step instructions for configuring and initializing Juno, with options for both automated and manual setup. +keyowrds: + [ + Juno SDK setup, + Juno integration, + web app features, + authentication, + datastore, + storage, + satellite configuration, + Next.js plugin, + Vite plugin, + Juno hosting, + Juno deployment, + initialize Juno + ] +--- + +# Setup the SDK + +To add rich features to your web app, follow these steps to connect Juno and enable advanced functionality. + +:::info + +If you intend to use Juno solely for **[hosting](build/hosting.md)** purposes, you may skip the following steps. + +::: + +--- + +## Initialization + +1. Install the Juno SDK using npm (or your preferred package manager): + +```bash +npm i @junobuild/core +``` + +**Note:** If you’re using a framework like SvelteKit or Next.js, you might need to install the version with peer dependencies instead: + +```bash +npm i @junobuild/core-peer +``` + +2. Initialize your satellite in your web app: + +```typescript +import { initSatellite } from "@junobuild/core"; + +await initSatellite(); +``` + +It is generally recommended to initialize globally the library at the top of your application. + +--- + +## Configuration + +To connect your application with your smart contract (your Satellite) and other necessary resources, some configuration is required. This setup ensures your application can securely access and initialize the correct Satellite instance, environment variables, and key settings. + +For most developers, the [Next.js](miscellaneous/plugins.md#nextjs-plugin) or [Vite](miscellaneous/plugins.md#vite-plugin) plugins streamline this process by managing environment variables automatically. However, if you’re not using one of these plugins, a bit of manual configuration is needed. + +### Automated + +When using the plugins, the configuration handled through a `juno.config` file (TypeScript, JavaScript, or JSON) at your project root is automatically injected within your application. The plugins read the file and automatically load the required information when you build and run your dApp. + +Juno’s provided templates come preconfigured with these plugins, so you can quickly get started. For details on setting up the plugin yourself, refer to the [Next.js](miscellaneous/plugins.md#nextjs-plugin) or [Vite](miscellaneous/plugins.md#vite-plugin) documentation. + +### Manually configure your application + +If you aren’t using a plugin, you can still configure your application by providing the `satelliteId` directly. In this case, add or update the following in your configuration file: + +```typescript +import { initSatellite } from "@junobuild/core"; + +await initSatellite({ + satelliteId: "your-actual-satellite-id" +}); +``` + +Replace `your-actual-satellite-id` with your actual ID, available in the [console](https://console.juno.build) on the overview page. + +[satellite]: terminology.md#satellite diff --git a/docs/terminology.md b/docs/terminology.md index 1dd9880c..1b8670ba 100644 --- a/docs/terminology.md +++ b/docs/terminology.md @@ -1,7 +1,3 @@ ---- -sidebar_position: 9 ---- - # Terminology In Juno, we use some terms that may be unfamiliar to some. This page provides a summary of the most commonly used terms. diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md index 4ca021c1..9d8b9392 100644 --- a/docs/troubleshooting.md +++ b/docs/troubleshooting.md @@ -1,7 +1,3 @@ ---- -sidebar_position: 11 ---- - # Troubleshooting ### Windows Powershell diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 261d0bae..02ade2e9 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -66,7 +66,7 @@ const config: Config = { docs: { sidebarPath: "sidebars.ts", editUrl: "https://github.com/junobuild/docs/edit/main/", - exclude: ["**/miscellaneous/cli/**"] + exclude: ["**/miscellaneous/cli/**", "**/guides/components/**"] }, blog: { showReadingTime: true, @@ -177,7 +177,7 @@ const config: Config = { }, { label: "Add Juno to an app", - to: "/docs/add-juno-to-an-app/create-a-satellite" + to: "/docs/create-a-satellite" }, { label: "Guides and examples", diff --git a/juno.config.ts b/juno.config.ts index 212f64a0..e469e843 100644 --- a/juno.config.ts +++ b/juno.config.ts @@ -32,7 +32,7 @@ const redirects: StorageConfigRedirect[] = [ }, { source: "/docs/add-juno-to-an-app/install-the-sdk-and-initialize-juno", - location: "/docs/add-juno-to-an-app/setup", + location: "/docs/add-juno-to-an-app/setup-the-sdk", code: 301 }, { @@ -40,6 +40,26 @@ const redirects: StorageConfigRedirect[] = [ location: "/docs/add-juno-to-an-app/deploy", code: 301 }, + { + source: "/docs/add-juno-to-an-app/deploy", + location: "/docs/category/guides-and-examples", + code: 301 + }, + { + source: "/docs/category/add-juno-to-an-app", + location: "/docs/category/guides-and-examples", + code: 301 + }, + { + source: "/docs/add-juno-to-an-app/create-a-satellite", + location: "/docs/create-a-satellite", + code: 301 + }, + { + source: "/docs/add-juno-to-an-app/setup", + location: "/docs/setup-the-sdk", + code: 301 + }, { source: "/docs/miscellaneous/sdk-usage-in-anodejs-context", location: "/docs/guides/nodejs", diff --git a/sidebars.ts b/sidebars.ts index 27aa85d2..0574b418 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -3,17 +3,20 @@ import type { SidebarsConfig } from "@docusaurus/plugin-content-docs"; const sidebars: SidebarsConfig = { docs: [ "intro", + "create-a-satellite", + "setup-the-sdk", { type: "category", - label: "Add Juno to an App", + label: "Guides and Examples", link: { type: "generated-index", - description: "Follow this guide to integrate Juno in your project." + description: + "Start building with your preferred technologies. Explore our quick start guides and tutorials, designed to assist you in hosting and developing web dapps using your favorite frameworks." }, items: [ { type: "autogenerated", - dirName: "add-juno-to-an-app" + dirName: "guides" } ] }, @@ -32,21 +35,6 @@ const sidebars: SidebarsConfig = { } ] }, - { - type: "category", - label: "Guides and Examples", - link: { - type: "generated-index", - description: - "Start building with your preferred technologies. Explore our quick start guides and tutorials, designed to assist you in hosting and developing web dapps using your favorite frameworks." - }, - items: [ - { - type: "autogenerated", - dirName: "guides" - } - ] - }, { type: "category", label: "Miscellaneous",