Use Juno with Angular
Explore how to create a Juno project developed with Angular.
What would you like to do?
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-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
- yarn
- pnpm
npm create juno@latest -- --template angular-starter
yarn create juno -- --template angular-starter
pnpm create juno -- --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
- yarn
- pnpm
npm i @junobuild/core
yarn add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal
pnpm add @junobuild/core @dfinity/agent @dfinity/auth-client @dfinity/candid @dfinity/identity @dfinity/principal
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 dev start
Open the Console UI at http://localhost:5866/.
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>"
},
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.
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 on the blockchain.
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
- yarn
- pnpm
npm create juno@latest -- --template angular-example
yarn create juno -- --template angular-example
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
- yarn
- pnpm
npm create juno@latest -- --template angular-starter
yarn create juno -- --template angular-starter
pnpm create juno -- --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.
When following the steps below, make sure to:
-
Register the
satelliteId
in the environment: When you create the satellite using juno build, asatelliteId
is generated. ThissatelliteId
must be copied into thesrc/environments/environment.prod.ts
file. -
Configure the dist folder correctly: In Angular, the build artifacts are not always placed directly under the
dist
folder. Instead, they may be located atdist/<application-name>
ordist/<application-name>/browser
. When runningjuno init
, you need to provide the full path to ensure thatjuno deploy
works as expected.
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: