diff --git a/docs/build/apps/dapp-frontend.mdx b/docs/build/apps/dapp-frontend.mdx index a60cc175e..fa8ab25d6 100644 --- a/docs/build/apps/dapp-frontend.mdx +++ b/docs/build/apps/dapp-frontend.mdx @@ -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 @@ -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 @@ -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: @@ -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" Incrementor
@@ -417,8 +429,8 @@ Current value: ???