Connect algob project settings with a webapp

In this guide we explain how an algob project can be easily connetced/integrated with your dapp.

About @algo-builder/web

We recently released @algo-builder/web package which allows you to interact with contracts easily. It is designed to be used with web dapps as well as scripts and user programs. For more information check out the using-web section.

About algob

Algob is the CLI (Command Line Interface) for Algo Builder. Think about it as an Ethereum Truffle but for Algorand projects. algob can be included as a library using yarn add @algo-builder/algob and then import it using import * from '@algo-builder/algob' or can be run from command line as described in the project README file.

Usage in Webapp

Currently, it is not possible to use algob directly in a web app, because algob uses nodejs file system. Because of this issue, @algo-builder/web was designed to provide common functionality and support dapp development.

Project structure:

Webapp:
├── assets
│   ├── TEAL files
│   ├── PyTEAL files
├── scripts (algob project scripts)
│   ├── deploy.ts
│   ├── run.ts
├── src (react frontend code)
│   ├── app.js
│   ├── index.js
├── test
│   ├── JS test files
│   ├── .mocharc.json (optional)
├── algob.config.js
├── package.json (common for algob & react-app)

Contracts are present in /assets, scripts are present in /scripts folder, and dapp’s frontend code is available in /src folder.

Checkpoints

In an algob project we persist checkpoints. This is helpful to store deployment information (transaction IDs, asset indexes, etc.) for later use (in future scripts).

Since, @algo-builder/web API can’t load data from files in your webapp, user either needs to:

After you’re able to import checkpoint files (in /artifacts/*.yaml), you can simply add a yaml loader to load files & read data in your react source code. For eg. (reading a logic sig from checkpoints data and getting the contract’s address). As a reference, checkout this file.

Reference

For reference checkout algo-builder-templates/default project. It’s a webapp with integrated with an algob project. You deploy the contracts first in an algob environment (simply using algob deploy). The deployed information in checkpoints is used(rendered) by the dapp’s frontend (for eg. ASA ID).

We have also added a config-overrides.js to override webpack.config.js: