Folder Structure

The simplest folder structure of the default create-coinweb-dapp hello-world.cm contract will look like the following tree illustration:

my-dapp
├── .cweb_tool
├── .cweb-config
│  ├── calls.yaml.template
│  ├── cweb-pack.yaml
│  ├── dapp-ecosystem.yaml
│  └── mnemonic.txt
├── package.json
├── packages
│  ├── dapp-ui
│  │  ├── package.json
│  │  └── src
│  │     └── index.js
│  └── hello-world.cm
│     ├── package.json
│     └── src
│         ├── offchain
│         │  └── index.js
│         └── onchain
│            └── index.js
└── yarn.lock

This is a yarn workspaces setup with two packages, the hello-world.cm contract module, and the dapp-ui which is a normal npm package.

Folder	Description
.cweb_tool	Caching folder for cweb-tool.
.cweb-config	Contains Coinweb internal configuration files explained in the module repo configuration.
packages	Default yarn workspaces mono repo setup containing the separated packages/modules.
packages/hello-world.cm	The simplest Hello World smart contract module. Note the .cm convention to indicate a contract module.
packages/dapp-ui	This folder includes the selected and curated UI which is preset during create coinweb-dapp execution.
hello-world.cm/src/onchain	The onchain folder contains the logic of the smart contract that is ultimately published to Coinweb.
hello-world.cm/src/offchain	The offchain folder contains the source code that is used to interact with the smart contract from your dApplications front end or back end.

The contract module

The hello-world.cm npm package resides in packages/hello-world.cm. The suffix .cm in the hello-world.cm package name is a convention often used by contract modules.

This package follows our contract module layout meaning that it consists of an onchain smart contract part, in src/onchain/, and an offchain authenticated code part, in src/offchain/. The offchain part is used to bundle code that relates to the smart contract but that should not execute as a smart contract.

note

In the hello world example, the smart contract onchain code simply writes a "hello world" claim to the claims db, while the offchain code exports functions that check if the correct claim was written.

The dApp User Intreface

A curated user interface example is located in the packages/dapp-ui directory.

The UI of the dApp is responsible for interacting with Coinweb (think the smart contracts onchain code) and the user. In the case of the hello world example, all the UI does is fetch the claim written by the smart contract, and invoke the offchain code from the contract module to verify that the claim was indeed written by the correct smart contract utilising the contract id.

In the end your dApp can be everything (a Javascript front end, a command line tool, an iOS App) and entirely independent of the actual contract module onchain code.

---

Please move on to see what the configuration files of a contract module look like.