Use Juno with Angular

Explore how to create a Juno project developed with Angular.

What would you like to do?

BuildHosting

Options

Choose Build if you want to build a full featured rich application.

Choose Hosting if you just want to deploy a website.

---

Build

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-stepQuickstart

---

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.

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 directory and install Juno SDK:

cd your-existing-app
npm i @junobuild/core

2. Configure Datastore

Production Path

To use production, set up a satellite and new collection:

• Create a new satellite in the Juno's console.
• After your project is ready, create a collection in your datastore, which we'll call demo, using the console.

Local Development Path

To develop with the local emulator, add a collection named demo within the juno.dev.config.js file.

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

/** @type {import('@junobuild/config').JunoDevConfig} */
export default defineDevConfig(() => ({
  satellite: {
    collections: {
      db: [
        {
          collection: "demo",
          read: "managed",
          write: "managed",
          memory: "stable",
          mutablePermissions: true
        }
      ]
    }
  }
}));

• Once set, run the local emulator:

juno dev start

• If the Juno admin CLI (required for deployment, configuration, or to run the emulator) is not installed yet, run:

npm i -g @junobuild/cli

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.

Add an insert function to persist a document.

app.component.ts

import { Component } from "@angular/core";
import { type Doc, initSatellite, setDoc } from "@junobuild/core";

@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();
  }

  async insert() {
    this.doc = await setDoc({
      collection: "demo",
      doc: {
        key: `my-key-${new Date().getTime()}`,
        data: {
          hello: "world"
        }
      }
    });
  }
}

4. 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 on the blockchain.

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.

---

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. To start, run the appropriate command based on your package manager:

NPM:

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

Yarn:

yarn create juno -- --template angular-example

PNPM:

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.

---

Hosting

If you already have an Angular app, you're all set — proceed to the Deployment section to upload your project to production.

Otherwise, you can bootstrap a new website using the Juno template by running the following command:

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

Once you’re set up, continue to the Deployment section below.

---

Deployment

Use this guide to deploy your project to production — directly to a smart contract on mainnet.

1. Set up a satellite

If you haven't created a satellite yet, go ahead and create a new one in the Juno's console.

2. 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 ActionsManual