Skip to content

Commit

Permalink
Update dapp-frontend.mdx
Browse files Browse the repository at this point in the history
  • Loading branch information
elizabethengelman committed Jan 16, 2025
1 parent a8bfda9 commit 3b50e4d
Showing 1 changed file with 21 additions and 9 deletions.
30 changes: 21 additions & 9 deletions docs/build/apps/dapp-frontend.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,13 @@ Let's get started.

You're going to need [Node.js](https://nodejs.org/en/download/package-manager/) v18.14.1 or greater. If you haven't yet, install it now.

We want to initialize our current project as an Astro project. To do this, we can clone a template. You can find Soroban templates on GitHub by [searching for repositories that start with "soroban-template-"](https://github.com/search?q=%22soroban-template-%22&type=repositories). For this tutorial, we'll use [stellar/soroban-template-astro](https://github.com/stellar/soroban-template-astro). We'll also use a tool called [degit](https://github.com/Rich-Harris/degit) to clone the template without its git history. This will allow us to set it up as our own git project.
We want to create an Astro project with the contracts from the previous lesson. To do this, we can clone a template. You can find Soroban templates on GitHub by [searching for repositories that start with "soroban-template-"](https://github.com/search?q=%22soroban-template-%22&type=repositories). For this tutorial, we'll use [stellar/soroban-template-astro](https://github.com/stellar/soroban-template-astro). We'll also use a tool called [degit](https://github.com/Rich-Harris/degit) to clone the template without its git history. This will allow us to set it up as our own git project.

Since you have `node` and its package manager `npm` installed, you also have `npx`. Make sure you're no longer in your `soroban-hello-world` directory and then run:
Since you have `node` and its package manager `npm` installed, you also have `npx`.

```
We're going to create a new project directory with this template to make things easier in this tutorial, so make sure you're no longer in your `soroban-hello-world` directory and then run:

```sh
npx degit stellar/soroban-template-astro first-soroban-app
cd first-soroban-app
git init
Expand Down Expand Up @@ -56,7 +58,11 @@ This project has the following directory structure, which we'll go over in more
└── tsconfig.json
```

The `contracts` are the same ones you walked through in the previous steps of the tutorial.
The `contracts` are the same ones you walked through in the previous steps of the tutorial. Since we already deployed these contracts with aliases, we can reuse the generated contract ID files by copying them from the `soroban-hello-world/.stellar` directory into this project:

```sh
cp -R ../soroban-hello-world/.stellar/ .stellar
```

## Generate an NPM package for the Hello World contract

Expand All @@ -67,17 +73,23 @@ This is going to use the CLI command `stellar contract bindings typescript`:
```bash
stellar contract bindings typescript \
--network testnet \
--contract-id $(cat .stellar/contract-ids/hello_world.txt) \
--contract-id hello_world \
--output-dir packages/hello_world
```

:::tip

Notice that we were able to use the contract alias, `hello-world`, in place of the contract id!

:::

This project is set up as an NPM Workspace, and so the `hello_world` client library was generated in the `packages` directory at `packages/hello_world`.

We attempt to keep the code in these generated libraries readable, so go ahead and look around. Open up the new `packages/hello_world` directory in your editor. If you've built or contributed to Node projects, it will all look familiar. You'll see a `package.json` file, a `src` directory, a `tsconfig.json`, and even a README.

## Generate an NPM package for the Increment contract

Though we can run `soroban contract bindings typescript` for each of our contracts individually, the [soroban-template-astro](https://github.com/stellar/soroban-astro-template) that we used as our template includes a very handy `initialize.js` script that will handle this for all of the contracts in our `contracts` directory.
Though we can run `soroban contract bindings typescript` for each of our contracts individually, the [soroban-template-astro](https://github.com/stellar/soroban-astro-template) project that we used as our template includes a very handy `initialize.js` script that will handle this for all of the contracts in our `contracts` directory.

In addition to generating the NPM packages, `initialize.js` will also:

Expand Down Expand Up @@ -408,7 +420,7 @@ Now you're ready to sign the call to `increment`!
### Call `increment`
Now we can import the `increment` contract client from `soroban_increment_contract` and start using it. We'll again create a new Astro component. Create a new file at `src/components/Counter.astro` with the following contents:
Now we can import the `increment` contract client from `contracts/increment.ts` and start using it. We'll again create a new Astro component. Create a new file at `src/components/Counter.astro` with the following contents:
```html title="src/components/Counter.astro"
<strong>Incrementor</strong><br />
Expand All @@ -417,8 +429,8 @@ Current value: <strong id="current-value" aria-live="polite">???</strong><br />
<button data-increment aria-controls="current-value">Increment</button>
<script>
import { getPublicKey, kit } from "../stellar-wallets-kit";
import incrementor from "../contracts/soroban_increment_contract";
import { getPublicKey, signTransaction } from "../stellar-wallets-kit";
import incrementor from "../contracts/increment";
const button = document.querySelector(
"[data-increment]",
) as HTMLButtonElement;
Expand Down

0 comments on commit 3b50e4d

Please sign in to comment.