Skip to main content

Build an Angular App

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​

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

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​

Create a new project using the Juno quickstart CLI:

npm create juno@latest -- --template angular-starter

Path B: Integrate Juno into an existing Angular app​

Navigate to your existing app:

cd your-existing-app

and install Juno SDK:

npm i @junobuild/core

2. Start the Emulator​

If the Juno admin CLI (required to run the emulator) is not installed yet, run:

npm i -g @junobuild/cli

Once installed, start the local emulator:

juno emulator start

Open the Console UI at http://localhost:5866/.

note

When developing locally, you get an all-in-one emulator that closely mimics the production environment. This includes providing Juno and its Console UI locally.

Sign in, create a Satellite, navigate to the Datastore section, and create a collection named demo.

3. Configure​

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.

Replace <DEV_SATELLITE_ID> with the ID.

import { defineConfig } from "@junobuild/config";

/** @type {import('@junobuild/config').JunoConfig} */
export default defineConfig({
  satellite: {
    ids: {
      development: "<DEV_SATELLITE_ID>",
      production: "<PROD_SATELLITE_ID>"
    },
    hosting: {
      source: "out",
      predeploy: ["npm run build"]
    }
  }
});

In addition, add also the ID to your environment.ts file:

export const environment = {
  satelliteId: "<DEV_SATELLITE_ID>"
};

4. Insert data from your app​

In app.component.ts, initialize the Satellite.

Add an insert function to persist a document.

app.component.ts
import { Component } from "@angular/core";
import { type Doc, initSatellite, setDoc } from "@junobuild/core";
import { environment } from "../environments/environment";

@Component({
  selector: "app-root",
  template: `
    <button (click)="insert()">Insert a document</button>
    <span *ngIf="doc !== undefined">Key: {{ doc.key }}</span>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  doc: Doc<{ hello: string }> | undefined = undefined;

  async ngOnInit() {
    await initSatellite({
      satelliteId: environment.satelliteId
    });
  }

  async insert() {
    this.doc = await setDoc({
      collection: "demo",
      doc: {
        key: window.crypto.randomUUID(),
        data: {
          hello: "world"
        }
      }
    });
  }
}

5. Start the app​

Start the app, go to http://localhost:4200 in a browser, click "Insert a document," and you should see the data successfully persisted in your satellite.

What's Next: Going Live

Once you're ready to deploy your app for others to access, continue to the Deployment guide.

Quickstart​

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

  • Authentication: easy-to-use SDKs that support truly anonymous authentication.
  • Datastore: a simple key-pair database for storing user data and other information.
  • Storage: a file storage system to store and serve user-generated content, such as photos.

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

npm create juno@latest -- --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.