DISCLAIMER: This is a work in progress!
This repository contains a template to get started with developing full-stack DAML applications. The demo application covers the following aspects:
- A DAML model of a simple social network
- A UI written in TypeScript and React
The UI is developed using React, Semantic UI and its official React integration. The whole project was bootstrapped with Create React App. Regardless of these choices, all DAML specific aspects of the UI client are written in plain TypeScript and the UI framework should hence be easily replaceable.
Before you can run the application, you need to install the DAML SDK and yarn package manager for JavaScript.
You can make a copy of this project either by clicking the "Use this template" button above or by cloning this repository directly via
git clone https://github.com/digital-asset/create-daml-app.git
Once you have copy of the project, there are two steps to build it. First, we need to generate TypeScript code bindings for the compiled DAML model. At the root of the repository, run
daml build
daml codegen ts .daml/dist/create-daml-app-0.1.0.dar -o daml-ts -p package.json
The latter command generates TypeScript packages in the daml-ts directory and
updates the package.json with the new dependencies.
Next, install all dependencies and build the app by running
yarn install
yarn workspaces run build
To start the application, there are again two steps. First start a DAML ledger using
daml start --start-navigator=no
(We're not using DAML Navigator here, hence we don't start it.) This must continue running to serve ledger requests.
Then in another terminal window, start the UI server via
cd ui/
yarn start
This should open a browser window with a login screen. If it doesn't, you can manually point your browser to http://localhost:3000.
You can log into the app by providing a user name, say Alice. For simplicity
of this app, there is no password or sign-up required. You will be greeted by
a screen indicating that you're not following anyone and that you don't have
any followers yet. You can change this by following someone in the upper box,
say Bob. After that, let's log out in the top right corner and log in as Bob.
As Bob, we can see that we are not following anyone and that Alice is follwing
us. We can follow Alice by clicking the plus symbol to the right of here name.
Deploying create-daml-app to the hosted DAML platform
project:DABL is quite simple. Log into your DABL
account, create a new ledger and upload your DAML models and your UI.
To upload the DAML models, compile them into a DAR by executing
daml build -o create-daml-app.dar
at the root of your repository. Afterwards, open to the DABL website, select
the ledger you want to deploy to, go to the "DAML" selection and upload the
DAR create-daml-app.dar you have just created.
To upload the UI, create a ZIP file containing all your UI assets by executing
daml build
daml codegen ts .daml/dist/create-daml-app-0.1.0.dar -o daml-ts/src
yarn workspaces run build
(cd ui && zip -r ../create-daml-app-ui.zip build)
at the root of the repository. Afterwards, select the "UI Assets" tab of your
chosen ledger on the DABL website, upload the ZIP file
(create-daml-app-ui.zip) you have just created and publish it.
To see your deployed instance of create-daml-app in action, follow the
"Visit site" link at the top right corner of your "UI Assets" page.
There are many directions in which this application can be extended. Regardless of which direction you pick, the following files will be the most interesting ones to familiarize yourself with:
daml/User.daml: the DAML model of the social networkdaml-ts/src/create-daml-app-0.1.0/User.ts(once you've generated it): a reflection of the types contained in the DAML model in TypeScriptui/src/components/MainView.tsx: a React component using the HTTP Ledger API and rendering the main features
TBD
TBD