diff --git a/docs/getting-started/create-an-app.mdx b/docs/getting-started/create-an-app.mdx index 6b8fcf4c..a20c5aeb 100644 --- a/docs/getting-started/create-an-app.mdx +++ b/docs/getting-started/create-an-app.mdx @@ -1,6 +1,6 @@ --- -sidebar_position: 5 -title: 4. Create an App +sidebar_position: 6 +title: 5. Create an App description: Make a frontend web app that interacts with your smart contracts. --- @@ -16,7 +16,7 @@ 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. -Then we want to initialize the current directory, `soroban-tutorial`, as an Astro project, but Astro doesn't like that. It wants to create a new directory. So let's go ahead and do that, then move all the contents of the new directory into their parent directory: +Then we want to initialize the current directory, `soroban-tutorial`, as an Astro project, but Astro doesn't like that. It wants to create a new directory. So let's go ahead and do that, then move all the contents of the new directory into its parent directory. From the original `soroban-tutorial` directory, run: ```bash npm create astro@4.0.1 soroban-tutorial -- --template basics --install --no-git --typescript strictest @@ -43,74 +43,27 @@ git commit -m "Initialize Astro project" Before we even open the new frontend files, let's generate an NPM package for the Hello World contract. This is our suggested way to interact with contracts from frontends. These generated libraries work with any JavaScript project (not a specific UI like React), and make it easy to work with some of the trickiest bits of Soroban, like encoding [XDR](https://soroban.stellar.org/docs/fundamentals-and-concepts/fully-typed-contracts). -This is going to use the CLI command `soroban contract bindings typescript`. Unfortunately, the version of `bindings typescript` packaged with CLI v0.9.4 has some bugs, and the fix can't be released yet because the `main` branch of the CLI is broken with futurenet. To work around this, we're going to install a pinned version of the CLI from a fixed-and-still-futurenet-compatible fork. Create a directory called `.cargo` (with the dot; it's a hidden folder): - - mkdir .cargo - -Then add one file to it, `config.toml`. Paste these contents into it: - -```toml -[alias] # command aliases -install_soroban = "install --git https://github.com/AhaLabs/soroban-tools --branch smartdeploy --root ./target soroban-cli --debug" -``` - -Now install the pinned version by using the alias you just set up: - - cargo install_soroban - -This will take a couple minutes; it builds a local version from the `smartdeploy` branch into `target/bin/soroban`. Once it's done, check that it worked: - -```bash -ls target/bin/soroban -``` - -And check the version info of this `smartdeploy` install: - -```bash -./target/bin/soroban --version -``` - -If you want, you can add `./target/bin/` [to your PATH](https://unix.stackexchange.com/questions/26047/how-to-correctly-add-a-path-to-path), so that anytime you're in a project with a locally-installed version of `soroban` in its `target/bin` directory, you'll automatically use it (rather than your global version) when you just type `soroban`. For this project, let's also add a `soroban` script in the root of the project that automatically installs the pinned version if it's not there, then uses it. This will make it easier for your collaborators to work with you. Create a file called just `soroban` and paste the following contents: +This is going to use the CLI command `soroban contract bindings typescript`: ```bash -#!/bin/bash -if [ ! -f ./target/bin/soroban ]; then - cargo install_soroban -fi -./target/bin/soroban "$@" # `$@` expands to all arguments passed to this script -``` - -Make sure it's executable: - -```bash -chmod +x soroban -``` - -Ok, now you can finally generate that NPM package: - -```bash -./soroban contract bindings typescript \ +soroban contract bindings typescript \ --network testnet \ --contract-id $(cat .soroban/hello-id) \ - --output-dir hello-soroban-client + --output-dir node_modules/hello-soroban-client ``` We attempt to keep the code in these generated libraries readable, so go ahead and look around. Open up the new `hello-soroban-client` 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. The README is a great place to start. Go ahead and give it a read. -As it says, when using local libraries, we've had the [most success](https://github.com/stellar/soroban-example-dapp/pull/117#discussion_r1232873560) when generating them directly into the `node_modules` folder, and leaving them out of the `dependencies` section. Yes, this is surprising, but it works the best. Go ahead and move this new library there: - -```bash -mv hello-soroban-client node_modules -``` +As it says, when using local libraries, we've had the [most success](https://github.com/stellar/soroban-example-dapp/pull/117#discussion_r1232873560) when generating them directly into the `node_modules` folder, and leaving them out of the `dependencies` section. Yes, this is surprising, but it works the best. -And then let's update the `package.json` in your `soroban-tutorial` project with a `postinstall` script to make sure the generated library stays up-to-date: +Let's update the `package.json` in your `soroban-tutorial` project with a `postinstall` script to make sure the generated library stays up-to-date: -```diff +```diff title="package.json" "scripts": { ... - "astro": "astro" + "astro": "astro", -+ "postinstall": "./soroban contract bindings typescript --network testnet --contract-id $(cat .soroban/hello-id) --output-dir node_modules/hello-soroban-client" ++ "postinstall": "soroban contract bindings typescript --network testnet --contract-id $(cat .soroban/hello-id) --output-dir node_modules/hello-soroban-client" } ``` @@ -118,7 +71,7 @@ And then let's update the `package.json` in your `soroban-tutorial` project with Now let's open up `src/pages/index.astro` and add some code to call the contract. We'll start by importing the generated library: -```diff +```diff title="src/pages/index.astro" --- import Layout from '../layouts/Layout.astro'; import Card from '../components/Card.astro'; @@ -135,7 +88,7 @@ Now let's open up `src/pages/index.astro` and add some code to call the contract Then find the `