Skip to content

Commit 6bd614d

Browse files
peterpeterparkergithub-actions[bot]
peterpeterparker
and
github-actions[bot]
authored
feat: split build and deploy in frontend guides (#579)
* feat: split build and deploy in frontend guides Signed-off-by: David Dal Busco <[email protected]> * fix: identation Signed-off-by: David Dal Busco <[email protected]> * feat: split build and deploy Signed-off-by: David Dal Busco <[email protected]> * feat: split build and deploy Signed-off-by: David Dal Busco <[email protected]> * feat: split build and deploy Signed-off-by: David Dal Busco <[email protected]> * feat: titles Signed-off-by: David Dal Busco <[email protected]> * feat: link to deploy Signed-off-by: David Dal Busco <[email protected]> * fix: paths Signed-off-by: David Dal Busco <[email protected]> * 📄 Update LLMs.txt snapshot for PR review --------- Signed-off-by: David Dal Busco <[email protected]> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
1 parent d448b06 commit 6bd614d

19 files changed

Lines changed: 1565 additions & 1506 deletions

File tree

‎.llms-snapshots/llms-full.txt‎

Lines changed: 1001 additions & 1001 deletions
Large diffs are not rendered by default.

‎.llms-snapshots/llms.txt‎

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -92,24 +92,54 @@ Juno is your self-contained serverless platform for building full-stack web apps
9292
## Guides
9393

9494
- [AI](https://juno.build/docs/guides/ai.md): Learn how to use Juno's llms.txt files to provide AI tools with better context for building serverless functions, deploying satellites, and integrating the SDK.
95-
- [Angular](https://juno.build/docs/guides/angular.md): Use Juno with Angular
96-
- [Astro](https://juno.build/docs/guides/astro.md): Learn how to integrate Juno with Astro for seamless development. Follow our quickstart guide and hosting instructions.
95+
- [Angular](https://juno.build/docs/guides/angular.md): Explore how to create a Juno project developed with Angular.
96+
- [Astro](https://juno.build/docs/guides/astro.md): Explore how to create a Juno project developed with Astro.
9797
- [End-to-End Testing](https://juno.build/docs/guides/e2e.md): Learn how to write and run end-to-end (E2E) tests for your Juno project using tools like Playwright and GitHub Actions. Includes emulator setup, authentication handling, and CI integration.
9898
- [Manual](https://juno.build/docs/guides/manual-deployment.md): Learn how to deploy an application to a Juno Satellite from your device using the CLI.
99-
- [Next.js](https://juno.build/docs/guides/nextjs.md): Learn how to integrate Juno with Next.js. Follow our quickstart guide and examples to get started.
99+
- [Next.js](https://juno.build/docs/guides/nextjs.md): Explore how to create a Juno project developed with Next.js.
100100
- [NodeJS](https://juno.build/docs/guides/nodejs.md): SDK usage in a NodeJS or CLI context
101-
- [React](https://juno.build/docs/guides/react.md): Use Juno with React
101+
- [React](https://juno.build/docs/guides/react.md): Explore how to create a Juno project developed with React.
102102
- [Rust](https://juno.build/docs/guides/rust.md): Learn how to develop, integrate, and extend Juno Satellites with serverless functions written in Rust.
103-
- [SvelteKit](https://juno.build/docs/guides/sveltekit.md): Use Juno with SvelteKit
103+
- [SvelteKit](https://juno.build/docs/guides/sveltekit.md): Explore how to create a Juno project developed with SvelteKit.
104104
- [TypeScript](https://juno.build/docs/guides/typescript.md): Learn how to develop, integrate, and extend Juno Satellites with serverless functions written in TypeScript.
105-
- [Vue](https://juno.build/docs/guides/vue.md): Use Juno with Vue
105+
- [Vue](https://juno.build/docs/guides/vue.md): Explore how to create a Juno project developed with Vue.
106+
107+
## Guides - Angular
108+
109+
- [Build an Angular App](https://juno.build/docs/guides/angular/build.md): Learn how to integrate Juno with Angular. Follow our quickstart guide to set up your development environment, configure your project, and start building with Juno.
110+
- [Deploy an Angular App](https://juno.build/docs/guides/angular/deploy.md): Learn how to deploy your Angular project to Juno. Follow the deployment guide to configure static exports, set up your satellite, and publish your site to production.
111+
112+
## Guides - Astro
113+
114+
- [Build an Astro App](https://juno.build/docs/guides/astro/build.md): Learn how to integrate Juno with Astro. Follow our quickstart guide to set up your development environment, configure your project, and start building with Juno.
115+
- [Deploy an Astro Site](https://juno.build/docs/guides/astro/deploy.md): Learn how to deploy your Astro project to Juno. Follow the deployment guide to configure static exports, set up your satellite, and publish your site to production.
106116

107117
## Guides - Github-actions
108118

109119
- [Deploy Frontend](https://juno.build/docs/guides/github-actions/deploy-frontend.md): This section describes how to deploy the frontend of your project using GitHub Actions. The frontend typically includes all client-side assets — such as HTML, CSS, JavaScript, and other static files—that are served to users.
110120
- [Publish Functions](https://juno.build/docs/guides/github-actions/publish-functions.md): This section explains how to automate the build and publication of your serverless functions using GitHub Actions. The process works for functions written in TypeScript or Rust and helps integrate function deployment into your development workflow.
111121
- [Upgrade Functions](https://juno.build/docs/guides/github-actions/upgrade-functions.md): We do not recommend upgrading your container directly from CI in production.
112122

123+
## Guides - Nextjs
124+
125+
- [Build a Next.js App](https://juno.build/docs/guides/nextjs/build.md): Learn how to integrate Juno with Next.js. Follow our quickstart guide to set up your development environment, configure your project, and start building with Juno.
126+
- [Deploy a Next.js App](https://juno.build/docs/guides/nextjs/deploy.md): Learn how to deploy your Next.js project to Juno. Follow the deployment guide to configure static exports, set up your satellite, and publish your site to production.
127+
128+
## Guides - React
129+
130+
- [Build a React App](https://juno.build/docs/guides/react/build.md): Learn how to integrate Juno with React. Follow our quickstart guide to set up your development environment, configure your project, and start building with Juno.
131+
- [Deploy a React App](https://juno.build/docs/guides/react/deploy.md): Learn how to deploy your React project to Juno. Follow the deployment guide to configure static exports, set up your satellite, and publish your site to production.
132+
133+
## Guides - Sveltekit
134+
135+
- [Build a SvelteKit App](https://juno.build/docs/guides/sveltekit/build.md): Learn how to integrate Juno with SvelteKit. Follow our quickstart guide to set up your development environment, configure your project, and start building with Juno.
136+
- [Deploy a SvelteKit App](https://juno.build/docs/guides/sveltekit/deploy.md): Learn how to deploy your SvelteKit project to Juno. Follow the deployment guide to configure static exports, set up your satellite, and publish your site to production.
137+
138+
## Guides - Vue
139+
140+
- [Build a Vue App](https://juno.build/docs/guides/vue/build.md): Learn how to integrate Juno with Vue. Follow our quickstart guide to set up your development environment, configure your project, and start building with Juno.
141+
- [Deploy a Vue App](https://juno.build/docs/guides/vue/deploy.md): Learn how to deploy your Vue project to Juno. Follow the deployment guide to configure static exports, set up your satellite, and publish your site to production.
142+
113143
## Management
114144

115145
- [Monitoring](https://juno.build/docs/management/monitoring.md): Juno Monitoring ensures your containers remain operational by automatically managing cycle balances. Monitor your modules, configure thresholds, and enable auto-refill to prevent downtime effortlessly.

docs/guides/angular.mdx renamed to docs/guides/angular/build.mdx

Lines changed: 23 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,41 @@
11
---
2-
id: angular
3-
title: Angular
4-
description: Use Juno with Angular
2+
sidebar_label: Build
3+
description: Learn how to integrate Juno with Angular. Follow our quickstart guide to set up your development environment, configure your project, and start building with Juno.
4+
keywords:
5+
[Juno, Angular, deployment, hosting, production, guide, static exports]
56
toc_min_heading_level: 2
67
toc_max_heading_level: 2
78
---
89

9-
# Use Juno with Angular
10+
# Build an Angular App
1011

11-
Explore how to create a Juno project developed with Angular.
12-
13-
import Choice from "./components/choice.mdx";
14-
15-
<Choice />
16-
17-
---
18-
19-
## Build
20-
21-
import Build from "./components/build.mdx";
12+
import Build from "../components/build.mdx";
2213

2314
<Build />
2415

2516
---
2617

27-
### Step-by-step
18+
## Step-by-step
2819

2920
This guide provides quickstart instructions for integrating Juno in two scenarios: starting a new project and adding Juno to an existing Angular app.
3021

31-
#### 1. Choose Your Integration Path
22+
### 1. Choose Your Integration Path
3223

3324
You can either start a new project or add Juno to an existing app.
3425

35-
##### Path A: Start a new project with a template
26+
### Path A: Start a new project with a template
3627

3728
Create a new project using the Juno quickstart CLI:
3829

39-
import { Bash } from "../components/bash.mdx";
30+
import { Bash } from "../../components/bash.mdx";
4031

4132
<Bash
4233
npm="npm create juno@latest -- --template angular-starter"
4334
yarn="yarn create juno -- --template angular-starter"
4435
pnpm="pnpm create juno -- --template angular-starter"
4536
/>
4637

47-
##### Path B: Integrate Juno into an existing Angular app
38+
### Path B: Integrate Juno into an existing Angular app
4839

4940
Navigate to your existing app:
5041

@@ -54,17 +45,17 @@ cd your-existing-app
5445

5546
and install Juno SDK:
5647

57-
import Core from "../components/core.mdx";
48+
import Core from "../../components/core.mdx";
5849

5950
<Core />
6051

61-
import Emulator from "./components/emulator.mdx";
52+
import Emulator from "../components/emulator.mdx";
6253

63-
#### 2. Start the Emulator
54+
### 2. Start the Emulator
6455

6556
<Emulator />
6657

67-
#### 3. Configure
58+
### 3. Configure
6859

6960
To initialize your project with the Satellite ID you created, configure it in the `juno.config.mjs` file (or other extension), which should be available at the root.
7061

@@ -94,7 +85,7 @@ export const environment = {
9485
};
9586
```
9687

97-
#### 4. Insert data from your app
88+
### 4. Insert data from your app
9889

9990
In `app.component.ts`, initialize the Satellite.
10091

@@ -136,23 +127,23 @@ export class AppComponent {
136127
}
137128
```
138129

139-
#### 5. Start the app
130+
### 5. Start the app
140131

141132
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.
142133

143-
import WhatsNext from "./components/whats-next.md";
134+
import WhatsNext from "../components/whats-next.mdx";
144135

145-
<WhatsNext />
136+
<WhatsNext path={"/docs/guides/angular/deploy"} />
146137

147138
---
148139

149-
### Quickstart
140+
## Quickstart
150141

151142
This example demonstrates how to quickly deploy a basic note-taking app that integrates Juno's core features:
152143

153-
- [Authentication](../build/authentication/index.md): easy-to-use SDKs that support truly anonymous authentication.
154-
- [Datastore](../build/datastore/index.mdx): a simple key-pair database for storing user data and other information.
155-
- [Storage](../build/storage/index.mdx): a file storage system to store and serve user-generated content, such as photos.
144+
- [Authentication](../../build/authentication/index.md): easy-to-use SDKs that support truly anonymous authentication.
145+
- [Datastore](../../build/datastore/index.mdx): a simple key-pair database for storing user data and other information.
146+
- [Storage](../../build/storage/index.mdx): a file storage system to store and serve user-generated content, such as photos.
156147

157148
Using the Juno CLI, you can easily scaffold this app.
158149

@@ -166,39 +157,3 @@ Using the Juno CLI, you can easily scaffold this app.
166157
Follow the CLI prompts to choose the note-taking app example and select local
167158
development. The CLI will manage all configurations and dependencies, allowing
168159
you to focus on exploring and customizing your app right away.
169-
170-
---
171-
172-
## Deployment
173-
174-
Use this guide to deploy your project to production.
175-
176-
import CreateSatellite from "./components/create-satellite.mdx";
177-
178-
<CreateSatellite index={1} />
179-
180-
### 2. Configure your project
181-
182-
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.
183-
184-
```javascript
185-
import { defineConfig } from "@junobuild/config";
186-
187-
/** @type {import('@junobuild/config').JunoConfig} */
188-
export default defineConfig({
189-
satellite: {
190-
ids: {
191-
development: "<DEV_SATELLITE_ID>",
192-
production: "<PROD_SATELLITE_ID>"
193-
},
194-
source: "dist/<application-name>/browser",
195-
predeploy: ["npm run build"]
196-
}
197-
});
198-
```
199-
200-
import Deploy from "./components/deploy.mdx";
201-
202-
<Deploy index={3} />
203-
204-
[satellite]: ../terminology.md#satellite

‎docs/guides/angular/deploy.mdx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
sidebar_label: Deploy
3+
description: Learn how to deploy your Angular project to Juno. Follow the deployment guide to configure static exports, set up your satellite, and publish your site to production.
4+
keywords: [Juno, Angular, integration, quickstart, guide, build, SDK, emulator]
5+
toc_min_heading_level: 2
6+
toc_max_heading_level: 2
7+
---
8+
9+
# Deploy an Angular App
10+
11+
Use this guide to deploy your project to production.
12+
13+
## 1. Create a container
14+
15+
import CreateSatellite from "../components/create-satellite.mdx";
16+
17+
<CreateSatellite index={1} />
18+
19+
## 2. Configure your project
20+
21+
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.
22+
23+
```javascript
24+
import { defineConfig } from "@junobuild/config";
25+
26+
/** @type {import('@junobuild/config').JunoConfig} */
27+
export default defineConfig({
28+
satellite: {
29+
ids: {
30+
development: "<DEV_SATELLITE_ID>",
31+
production: "<PROD_SATELLITE_ID>"
32+
},
33+
source: "dist/<application-name>/browser",
34+
predeploy: ["npm run build"]
35+
}
36+
});
37+
```
38+
39+
## 3. How to deploy
40+
41+
import Deploy from "../components/deploy.mdx";
42+
43+
<Deploy index={3} />
44+
45+
[satellite]: ../terminology.md#satellite

0 commit comments

Comments
 (0)