feat: review frontend examples for deployment (#578)

* feat: review frontend examples for deployment

Signed-off-by: David Dal Busco <david.dalbusco@outlook.com>

* 📄 Update LLMs.txt snapshot for PR review

---------

Signed-off-by: David Dal Busco <david.dalbusco@outlook.com>
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

Author: peterpeterparker

.llms-snapshots/llms-full.txt

@@ -4,8 +4,6 @@ title: Angular
 description: Use Juno with Angular
 toc_min_heading_level: 2
 toc_max_heading_level: 2
-pagination_next: null
-pagination_prev: null
 ---
 
 # Use Juno with Angular
@@ -72,7 +70,7 @@ To initialize your project with the Satellite ID you created, configure it in th
 
 Replace `<DEV_SATELLITE_ID>` with the ID.
 
-```typescript
+```javascript
 import { defineConfig } from "@junobuild/config";
 
 /** @type {import('@junobuild/config').JunoConfig} */
@@ -171,40 +169,36 @@ you to focus on exploring and customizing your app right away.
 
 ---
 
-## Hosting
-
-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.
-
-Otherwise, you can bootstrap a new website using the Juno template by running the following command:
-
-<Bash
-  npm="npm create juno@latest -- --template angular-starter"
-  yarn="yarn create juno -- --template angular-starter"
-  pnpm="pnpm create juno -- --template angular-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 satellite on mainnet.
+Use this guide to deploy your project to production.
 
-:::note
+import CreateSatellite from "./components/create-satellite.mdx";
 
-When following the steps below, make sure to:
+<CreateSatellite index={1} />
 
-1. Register the `satelliteId` in the environment:
-   When you create the satellite using juno build, a `satelliteId` is generated. This `satelliteId` must be copied into the `src/environments/environment.prod.ts` file.
+### 2. Configure your project
 
-2. Configure the dist folder correctly:
-   In Angular, the build artifacts are not always placed directly under the `dist` folder. Instead, they may be located at `dist/<application-name>` or `dist/<application-name>/browser`. When running `juno config init`, you need to provide the full path to ensure that `juno hosting deploy` works as expected.
+Create a `juno.config.mjs` file at the root of your project. Replace the `PROD_SATELLITE_ID` with the ID of the Satellite you created earlier and `dist/<application-name>/browser` with your project's name.
 
-:::
+```javascript
+import { defineConfig } from "@junobuild/config";
+
+/** @type {import('@junobuild/config').JunoConfig} */
+export default defineConfig({
+  satellite: {
+    ids: {
+      development: "<DEV_SATELLITE_ID>",
+      production: "<PROD_SATELLITE_ID>"
+    },
+    source: "dist/<application-name>/browser",
+    predeploy: ["npm run build"]
+  }
+});
+```
 
 import Deploy from "./components/deploy.mdx";
 
-<Deploy index={1} />
+<Deploy index={3} />
 
 [satellite]: ../terminology.md#satellite

docs/guides/angular.mdx

@@ -5,12 +5,8 @@ description: Learn how to integrate Juno with Astro for seamless development. Fo
 keywords: [Astro, integrate Juno, quickstart, hosting, CLI, SDK]
 toc_min_heading_level: 2
 toc_max_heading_level: 2
-pagination_next: null
-pagination_prev: null
 ---
 
-import Link from "@docusaurus/Link";
-
 # Use Juno with Astro
 
 Easily set up and deploy your Astro project with Juno.
@@ -67,7 +63,7 @@ To initialize the library with the Satellite ID you created, configure it in the
 
 Replace `<DEV_SATELLITE_ID>` with the ID.
 
-```typescript
+```javascript
 import { defineConfig } from "@junobuild/config";
 
 /** @type {import('@junobuild/config').JunoConfig} */
@@ -77,7 +73,7 @@ export default defineConfig({
       development: "<DEV_SATELLITE_ID>",
       production: "<PROD_SATELLITE_ID>"
     },
-    source: "out",
+    source: "dist",
     predeploy: ["npm run build"]
   }
 });
@@ -166,28 +162,36 @@ import WhatsNext from "./components/whats-next.md";
 
 ---
 
-## Hosting
+## Deployment
 
-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.
+Use this guide to deploy and host your project to production.
 
-Otherwise, you can bootstrap a new website using the Juno template by running the following command:
+import CreateSatellite from "./components/create-satellite.mdx";
 
-<Bash
-  npm="npm create juno@latest -- --template astro-starter"
-  yarn="yarn create juno -- --template astro-starter"
-  pnpm="pnpm create juno -- --template astro-starter"
-/>
+<CreateSatellite index={1} />
 
-Once you’re set up, continue to the [Deployment](#deployment) section below.
+### 2. Configure your project
 
----
+Create a `juno.config.mjs` file at the root of your project, and replace the `PROD_SATELLITE_ID` with the ID of the Satellite you created earlier.
 
-## Deployment
+```javascript
+import { defineConfig } from "@junobuild/config";
 
-Use this guide to deploy your project to production — directly to a satellite on mainnet.
+/** @type {import('@junobuild/config').JunoConfig} */
+export default defineConfig({
+  satellite: {
+    ids: {
+      development: "<DEV_SATELLITE_ID>",
+      production: "<PROD_SATELLITE_ID>"
+    },
+    source: "dist",
+    predeploy: ["npm run build"]
+  }
+});
+```
 
 import Deploy from "./components/deploy.mdx";
 
-<Deploy index={1} />
+<Deploy index={3} />
 
 [satellite]: ../terminology.md#satellite

docs/guides/astro.mdx

@@ -10,14 +10,6 @@ What would you like to do?
 
   <Link
     className="button button--juno"
-    to="#hosting"
-  >Hosting</Link>
+    to="#deployment"
+  >Deploy</Link>
 </div>
-
-:::note[Options]
-
-Choose **Build** if you want to build a full featured rich application.
-
-Choose **Hosting** if you just want to deploy a website.
-
-:::

docs/guides/components/choice.mdx

@@ -0,0 +1,15 @@
+export const index = 1;
+
+### {props.index}. Create a container
+
+1. Log in to the [Juno Console](https://console.juno.build).
+
+2. Click the **Launch a new satellite** button (the container for your project) from the launchpad
+
+3. Enter a **name** and select **Website**
+
+4. Confirm with **Create a Satellite**
+
+5. The platform will then provision its resources.
+
+6. Once the process is complete, click Continue to access the overview page.

docs/guides/components/create-satellite.mdx

@@ -1,25 +1,79 @@
-import Link from "@docusaurus/Link";
-
 export const index = 1;
 
-### {props.index}. Set up a satellite
+### {props.index}. How to deploy
+
+You can deploy using either [GitHub Actions](#github-actions-deployment) or [CLI](#cli-deployment) (command line interface).
+
+#### GitHub Actions deployment
+
+1. From your Satellite's overview, navigate to the **Setup** tab.
+
+2. Click on **Add an access key**.
+
+3. Generate a new key with the default option. Click **Submit**.
+
+4. Upon successful creation, a **Secret token** will be displayed. Copy the value and save it as an [encrypted secret](https://docs.github.com/en/actions/security-guides/encrypted-secrets) in your GitHub repository or organization, using the key `JUNO_TOKEN`.
+
+5. Create a `deploy.yml` file in the `.github/workflows` subfolder of your repo.
+
+6. Add the following workflow configuration:
+
+```yaml title=".github/workflows/deploy.yml"
+name: Deploy to Juno
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Deploy to Juno
+        uses: junobuild/juno-action@main
+        with:
+          args: hosting deploy
+        env:
+          JUNO_TOKEN: ${{ secrets.JUNO_TOKEN }}
+```
+
+#### CLI deployment
+
+1. Install the CLI
+
+import Cli from "./cli.mdx";
+
+<Cli />
+
+2. Authenticate the CLI. This will open the Juno Console.
+
+```bash
+juno login
+```
 
-If you haven't created a satellite yet, go ahead and [create](../../create-a-satellite.mdx) a new one in the Juno's console.
+:::tip
 
-### {props.index + 1}. Deploy
+An access token is used to identify your terminal. That's why the CLI asks whether you want to encrypt it with a password.
+For security reasons, it's recommended that you do so.
 
-Once your satellite is up and running, you can proceed with uploading your app.
+:::
 
-You can either automate your deployment with GitHub Actions (recommended) or deploy manually from your device. Choose your method:
+3. In the browser window, click **Authorize** to grant permission.
 
-<div style={{display: "flex", gap: "1rem", justifyContent: "center", margin: "2rem 0 2.45rem"}}>
-  <Link
-    className="button button--hero"
-    to="/docs/guides/github-actions"
-  >GitHub Actions</Link>
+4. Deploy your site:
 
-  <Link
-    className="button button--juno"
-    to="/docs/guides/manual-deployment"
-  >Manual</Link>
-</div>
+```bash
+juno hosting deploy
+```

docs/guides/components/deploy.mdx

@@ -5,8 +5,6 @@ description: Learn how to integrate Juno with Next.js. Follow our quickstart gui
 keywords: [Juno, Next.js, integration, quickstart, guide, examples, hosting]
 toc_min_heading_level: 2
 toc_max_heading_level: 2
-pagination_next: null
-pagination_prev: null
 ---
 
 # Use Juno with Next.js
@@ -73,7 +71,7 @@ To initialize the library with the Satellite ID you created, configure it in the
 
 Replace `<DEV_SATELLITE_ID>` with the ID.
 
-```typescript
+```javascript
 import { defineConfig } from "@junobuild/config";
 
 /** @type {import('@junobuild/config').JunoConfig} */
@@ -175,32 +173,22 @@ you to focus on exploring and customizing your app right away.
 
 ---
 
-## Hosting
-
-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="npm create juno@latest -- --template nextjs-starter"
-  yarn="yarn create juno -- --template nextjs-starter"
-  pnpm="pnpm create juno -- --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 satellite on mainnet.
+Use this guide to deploy and host your project to production.
 
 ### 1. Static exports
 
 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.
 
+:::note
+
+If you’re using the official Juno [Next.js plugin](../reference/plugins.mdx#nextjs-plugin), static exports are already configured for you.
+
+:::
+
 In `next.config.js` file:
 
 ```javascript title="next.config.js"
@@ -212,8 +200,32 @@ const nextConfig = {
 module.exports = nextConfig;
 ```
 
+import CreateSatellite from "./components/create-satellite.mdx";
+
+<CreateSatellite index={2} />
+
+### 3. Configure your project
+
+Create a `juno.config.mjs` file at the root of your project, and replace the `PROD_SATELLITE_ID` with the ID of the Satellite you created earlier.
+
+```javascript
+import { defineConfig } from "@junobuild/config";
+
+/** @type {import('@junobuild/config').JunoConfig} */
+export default defineConfig({
+  satellite: {
+    ids: {
+      development: "<DEV_SATELLITE_ID>",
+      production: "<PROD_SATELLITE_ID>"
+    },
+    source: "out",
+    predeploy: ["npm run build"]
+  }
+});
+```
+
 import Deploy from "./components/deploy.mdx";
 
-<Deploy index={2} />
+<Deploy index={4} />
 
 [satellite]: ../terminology.md#satellite