Update Dapp Frontend Guide #1941
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| Preview is available here: |
ElliotFriend reviewed Nov 5, 2025
| # Develop a Contract with Frontend Templates | ||
| | ||
| This is a continuation of the [Getting Started tutorial](../smart-contracts/getting-started/README.mdx), where you should have deployed two smart contracts to the public network. In this section, we'll create a web app that interacts with the contracts via RPC calls. | ||
| This guide picks up where [Build a Dapp Frontend](https://developers.stellar.org/docs/build/apps/dapp-frontend) left off. From there, we'll: |
There was a problem hiding this comment.
this link will probably need to be updated to remove the domain name, but it's also a link to this page. not sure where we want to point to, but should double-check.
| ## Search GitHub for other Soroban templates | ||
| | ||
| If you're new to frontend, don't worry. We won't go too deep. But it will be useful for you to see and experience the frontend development process used by Soroban apps. We'll cover the relevant bits of JavaScript and Astro, but teaching all of frontend development and Astro is beyond the scope of this tutorial. | ||
| The official template maintained by Stellar Development Foundation (SDF), as used in [Build a Dapp Frontend](https://developers.stellar.org/docs/build/apps/dapp-frontend), lives on GitHub at [stellar/soroban-template-astro](https://github.com/stellar/soroban-astro-template). It uses the [Astro web framework](https://astro.build/). While Astro works with React, Vue, Svelte, and any other UI library, the template opts not to use them, preferring Astro's own templating language, which uses vanilla JavaScript with no UI library. |
There was a problem hiding this comment.
same as above with the link.
also, that astro template got archived, so i'm not sure if we want to point it out to others?
| ## Make your own template | ||
| | ||
| 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`. | ||
| Let’s make our own template! In this example template, we use SolidJS as the JavaScript framework, but other frameworks can be used with minor modifications. The template is using the `hello world` example smart contract, and is a part of the template initialization; bindings for the `hello world` smart contract are created. |
There was a problem hiding this comment.
Suggested change
| Let’s make our own template! In this example template, we use SolidJS as the JavaScript framework, but other frameworks can be used with minor modifications. The template is using the `hello world` example smart contract, and is a part of the template initialization; bindings for the `hello world` smart contract are created. | |
| Let’s make our own template! In this example template, we use SolidJS as the JavaScript framework, but other frameworks can be used with minor modifications. The template is using the `hello_world` example smart contract. As a part of the template initialization, bindings for the `hello_world` smart contract are created. |
| ```bash | ||
| | ||
| In addition to generating the NPM packages, `initialize.js` will also: | ||
| npx degit solidjs/templates/ts soroban-template-solid |
There was a problem hiding this comment.
might be nice to add a # bash comment pointing to where the instructions for command this came from (i'm assuming the solid docs somewhere?)
| | ||
| Let's take a look at the contents of the `.env` file: | ||
| npm install dotenv glob util | ||
| |
There was a problem hiding this comment.
I think you might have some extra line-breaks surrounding some of the bash code blocks. make sure there are no blank lines between the three backticks on either side of the code
| Now that the smart contract has been built, we can deploy the smart contract to the network, so we can invoke the smart contract functions from any client, such as our SolidJS template. | ||
| While `hello` is a simple view-only/read method, `increment` changes on-chain state. This means that someone needs to sign the transaction. So we'll need to add transaction-signing capabilities to the frontend. | ||
| There are three functions related to contract deployment. One that uses the Stellar CLI to deploy the wasm to the network (`deploy()`), one that calls the deploy function for each wasm found (`deployAll()`), in case there is more than one smart contract, and finally a helper function that gets the contract name by parsing the wasm file name. |
There was a problem hiding this comment.
Suggested change
| There are three functions related to contract deployment. One that uses the Stellar CLI to deploy the wasm to the network (`deploy()`), one that calls the deploy function for each wasm found (`deployAll()`), in case there is more than one smart contract, and finally a helper function that gets the contract name by parsing the wasm file name. | |
| There are three functions related to contract deployment. One that uses the Stellar CLI to deploy the Wasm to the network (`deploy()`), one that calls the deploy function for each Wasm found (`deployAll()`), in case there is more than one smart contract, and finally a helper function that gets the contract name by parsing the Wasm file name. |
| `stellar contract bindings typescript --contract-id ${contractid} --output-dir ${dirname}/packages/${alias} --overwrite`, | ||
| ); | ||
| // Build the package | ||
| execSync(`(cd ${dirname}/packages/${alias} && npm i && npm run build)`); |
There was a problem hiding this comment.
might wanna add && cd ${dirname} or something similar to the end of this command?
| ``` | ||
| With the package installed, we are going to create a new simple file where our instantiated kit and simple state will be located. Create the file `src/stellar-wallets-kit.ts` and paste this: | ||
| The `bindAll()` function iterates the `smartContracts[]` array. The reason for not just using the array of wasms, like in the `deployAll()` function, is that we need the contract ID to generate the bindings. |
There was a problem hiding this comment.
Suggested change
| The `bindAll()` function iterates the `smartContracts[]` array. The reason for not just using the array of wasms, like in the `deployAll()` function, is that we need the contract ID to generate the bindings. | |
| The `bindAll()` function iterates the `smartContracts[]` array. The reason for not just using the array of wasms, like in the `deployAll()` function, is that we need the contract ID to invoke the generated bindings functions on the network. |
you can actually generate bindings from a Wasm file, but this will leave you with a client instance that requires you to specify a address
Comment on lines +268 to +269
| `import * as Client from '${alias}';\n` + | ||
| `export default new Client.Client({\n` + |
There was a problem hiding this comment.
Suggested change
| `import * as Client from '${alias}';\n` + | |
| `export default new Client.Client({\n` + | |
| `import { Client } from '${alias}';\n` + | |
| `export default new Client({\n` + |
Comment on lines +473 to +475
| ```javascript | ||
| | ||
| import type { Component } from 'solid-js'; |
There was a problem hiding this comment.
Suggested change
| ```javascript | |
| import type { Component } from 'solid-js'; | |
| ```javascript | |
| import type { Component } from 'solid-js'; |
some more blank lines
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
https://developers-pr1941.previews.kube001.services.stellar-ops.com/docs/build/apps/dapp-frontend