ijxkc-rqaaa-aaaal-qcdta-cai.icp0.io Open in urlscan Pro
2a00:fb01:400:200:5000:eeff:fe3d:aa0d  Public Scan

Form analysis
0 forms found in the DOM

Text Content

On IC Academy

Astro + Svelte on the Internet Computer
January 17, 2024 - written by Roland BOLE (Instructor)
In this article you will learn how to use Astro and a Svelte component to
interact with the Internet Computer.
All Posts
Starter Kit
Releases
134


If you are curious about using the popular static site generator Astro as a
frontend application to interact with a Motoko backend canister on the Internet
Computer, then this article is great for you.

For more on Astro checkout the link below.

⚡ Read more on Astro
The web framework for content-driven websites.
astro.build


This starter kit / example presented here gives you a ready to use environment
to get you up and running with Astro + Svelte on the Internet Computer. Besides
that, it includes a more sophisticated Motoko backend canister code than a
simple helloWorld example.

Short note on your own behalf. Svelte and Astro are also used in the IC Academy
courses about the Internet Computer. Although this setup is used for my own
development, I’m happy to share it with all of you.

Let’s start.


BEHIND THE SCENES

This starter kit / example provides a frontend and a backend canister. The
frontend canister hosts the built Astro application and the backend canister
provides the relevant Motoko backend code based on the use case described below.
How the application looks like can be seen in a screenshot below.

How the application looks like.

The use case for this example is a simple glossary database with an ID for each
glossary entry. This schema can stand for everything. However, I wanted to use
something meaningful.

The Astro frontend application uses its Islands architecture to host a Svelte
component. This component queries a specific ID and receives the glossary entry
for that ID if it exists, or nothing if no entry is assigned to the ID. Here,
the Motoko Result object is used to deliver type safe returns.

All glossary entries are stored in a stable hash map. For this purpose, an
external hash map library is used to store all entries.

⚡ Read more on Stable hash maps
A libary for stable hash maps for Motoko by Zhenya Usenko.
github.com


What’s interesting here is that this external library is integrated with MOPS, a
Motoko package manager.

⚡ Read more on MOPS
Mops is a package manager for Motoko.
mops.one


The backend code provides a function called installer that you use to install
some sample data.

Please note, that this function is tied to a given principal ID, so that the
sample data can only be installed or updated from an authorized identity. You
must modify this in backend/main.mo.

# replace the adminPrincipal in backend/main.mo with the principal of your local dfx identity
let adminPrincipal = "yziij-iujbv-ygpuv-....";


Both, the frontend and the backend, are connected with the official JavaScript
agents provided by the Dfinity foundation. No third party tool is needed.

Well, you see there is a lot packed into that example.


HOW TO USE IT

You can use the starter kit for different use cases:

 1. For frontend development, within the local development server.
 2. For backend development. Test your backend canister by using the CLI or the
    Candid user interface which is deployed automatically on your local replica.
 3. For a full test deployment with frontend and backend canister to the local
    replica.
 4. For a complete and free of cycles test deployment on the Motoko playground.
 5. For real project deployments to the IC mainnet.


REQUIREMENTS

To follow this example some requirements must be met. To learn more on the
needed requirements to develop applications on the Internet Computer checkout
the official documentation:

⚡ Read more on the requirements
The Internet Computer is a public network that anyone can join. To join the
network, you need to install the Internet Computer command-line interface (dfx)
and create an identity.
internetcomputer.org


or one of my other blog posts:

⚡ Read more on the requirements
IC Academy helps you in your transition from a WEB2 to a WEB3 developer.
blog.icacademy.at


This article provides a fast Track for you to get up and running.

This fast Track allows you to quickly get started with this example and to study
the source code on your own. This is recommended for experienced developers who
know how to do it. Simply follow the steps below.

However, there is an Extended Track. This track provides you with more
information about how you can create such an application step by step. But, the
Extended Track is so much more.

It is processed as a complete 100% online course that helps you in your
transition from a Web 2.0 to a Web 3.0 developer. This course is currently under
heavy development.

Register to our newsletter and we will keep you updated about the course
development progress.


FAST TRACK - READY TO BUILD

To clone and use the Github repository for your own purpose following the
commands below. Note to get a clean git repository. A tool named digit is used.
Make sure you have installed it. If you have not installed it yet, you can do it
with the following command.

npm install -g degit



PERPARATION

mkdir myapp && cd myapp

# install ic-mops in case you don't have it yet
npm i -g ic-mops

npx degit https://github.com/samlinux-development/ic-astro-svelte
npm install
dfx start --clean --background





SET ADMINPRINCIPAL IN BACKEND/MAIN.MO

To control who can update the glossary database, set your principal ID before
deploying the backend canister.



# Get the principal of your local dfx identity
dfx identity use <identity-name> || dfx identity use default
dfx identity get-principal

# replace the adminPrincipal in backend/main.mo with the principal of your local dfx identity
let adminPrincipal = "yziij-iujbv-ygpuv-...";





DEPLOY TO LOCAL INTERNET COMPUTER REPLICA

Once the Principal ID is set, deploy both the frontend and backend canisters to
the local replica and install the glossary database.



dfx deploy 
dfx canister call backend installer





DEPLOY TO THE MOTOKO PLAYGROUND

The same could be done on the Internet Computer mainnet. To test your
application use the Motoko playground. It offers a 30 minute cycle free
environment to test your application under real circumstances.



dfx deploy --playground
dfx canister --network playground call backend installer


👏 Congratulations, you have successfully deployed an Astro frontend application
and a Motoko backend canister on a local Internet Computer replica running on
your machine or on the Motoko playground.


TIME FOR A CHALLENGE

✅ Change your identity-name to a different one and try to install the glossary
database again. Try it locally and as well on the Motoko playground. What
happens?


USAGE OF THE APPLICATION

Now it’s time to use it in your browser. For both deployment versions you can
call the frontend canister and use the application. Watch out the console logs
for the correct URLs.

Open your browser and use the following URL scheme:


 1. Frontend canister via browser:
    http://127.0.0.1:4943/?canisterId[frontend-canister-Id]
 2. Backend canister via Candid interface:
    http://127.0.0.1:4943/?canisterId=[candid-canister-id]&id=[backend-canister-Id]

> Now, you can start working on your own project. Let’s build something big!

The complete and working repository can be found on Github:

⚡ Astro + Svelte starter
This is a starter dApp for the Internet Computer built with Astro and Svelte.
github.com


Don’t forget to register to our newsletter and we will keep you updated about
the course development progress.

Newer Post
January 2024 Newsletter
Older Post
Get Ready with Svelte 5 on the Internet Computer
Menu
Where to go?
Home
Courses / Certifications
Consulting
Showcase
Blog
Free Quizzes
Newsletter
YouTube Playlists
About IC Academy
About
Bio
Legal
Imprint
Data Privacy

Join our community on OpenChat, a decentralized chat app governed by the people
for the people. OpenChat meets Slack in a decentralized package.
© 2024 IC Academy - Made with ♥ in Austria
powered by SDG - samlinux development