Skip to content

Latest commit

 

History

History
81 lines (56 loc) · 2.74 KB

README.md

File metadata and controls

81 lines (56 loc) · 2.74 KB

Angular StarterKit for the Internet Computer

This project was generated with Angular CLI version 18.2.0

This starterKit is intended to make it easier for you to get started with development on the Internet Computer with Angular. It is based on the Angular framework and the Internet Computer SDK.

It includes a classic read and store service which is triggered by button click. The backend service is implemented in Motoko.

This starter kit does not use the usual approach of a custom Webpack configuration. The approach is to add the environment variables into the Angular environment files according to the deployment situation. The following deployment situations are currently covered:

  • local (a local replica)
  • playground (Motoko Playground)
  • ic (the Internet Computer mainnet)

It uses an own actor service to get ride of the ready to use actor in src/declarations/backend/index.js. The actor service is implemented in src/app/ic.service.ts.

In this configuration esbuild is used as well.

Only a few npm packages were added to the standard npm packages of Angular. These would be:

See also our blog post on IC Academy Angular StarterKit for the Internet Computer.

Prerequisites

Make sure node.js verson 18.19 or higher is installed on your system. You can download it from nodejs.org.

Make sure that the DFINITY Canister SDK is installed on your system. You can download it from sdk.dfinity.org.

First Setup

# terminal 1
dfx start --clean

# terminal 2
mkdir myapp && cd myapp
npx degit https://github.com/samlinux-development/ic-angular
npm install

Start Development Server

# in terminal 2
# for the first time
dfx deploy backend

# If you changes something in the backend canister reinstall it with dfx deploy backend any time.

# Every time you want to start the frontend or change the deployment environment, 
# because of the environment variables.
# Do not use ng serve in that context, because of the deploy.js script 
# which has to be executed to let Angular know about the environment variables.
npm run start --network=local

Deployment to local replica

npm run deploy --network=local
echo http://$(dfx canister id frontend).localhost:4943

Deployment to Motoko playground

npm run deploy --network=playground

Deployment to Internet Computer mainnet

Is not tested by now. But it should work.