Repository: stellar/stellar-docs
Pull request #1318: Adding a build dapp step to guide #945
Author: login: carstenjacobsen
Created: 2025-03-04T09:36:06Z | Merged: 2025-03-13T18:03:29Z

Adding a part of the [Build a Dapp Frontend](https://developers.stellar.org/docs/build/apps/dapp-frontend) page as the 5th step in the [Getting Started](https://developers.stellar.org/docs/build/smart-contracts/getting-started) guide. 

The entire Build a Dapp Frontend page could just be moved to the Getting Started guide, but it seems to be too comprehensive with two ways to bind the contracts, integration of wallet etc. In my opinion the Getting Started guide should be short and only have information needed to get started. 

The Build a Dapp Frontend does have a lot of useful information, so I think it still belongs in the Build Applications section.


Diff:
diff --git a/docs/build/apps/dapp-frontend.mdx b/docs/build/apps/dapp-frontend.mdx
index e3e6b6ef0e..d5b78be64c 100644
--- a/docs/build/apps/dapp-frontend.mdx
+++ b/docs/build/apps/dapp-frontend.mdx
@@ -3,7 +3,6 @@ sidebar_position: 70
 sidebar_label: Build a Dapp Frontend
 title: "Build a dapp Frontend: Connect Wallets, Handle Transactions & More"
 description: "Learn how to build a dapp frontend that connects to smart contracts. Explore best practices for integrating wallets, handling transactions, and interacting with the Stellar network."
-pagination_prev: build/smart-contracts/getting-started/deploy-increment-contract
 ---
 
 # Build a Dapp Frontend
diff --git a/docs/build/smart-contracts/getting-started/deploy-increment-contract.mdx b/docs/build/smart-contracts/getting-started/deploy-increment-contract.mdx
index 515ceca934..453ee3d5e1 100644
--- a/docs/build/smart-contracts/getting-started/deploy-increment-contract.mdx
+++ b/docs/build/smart-contracts/getting-started/deploy-increment-contract.mdx
@@ -3,7 +3,6 @@ sidebar_position: 40
 title: "Deploy the Increment Smart Contract on Testnet Using the CLI: A Guide"
 sidebar_label: 4. Deploy the Increment Contract
 description: "Follow this step-by-step guide in the final section of Getting Started to learn how to deploy the increment smart contract on Testnet using the Stellar CLI."
-pagination_next: build/apps/dapp-frontend
 ---
 
 # 4. Deploy the Increment Contract
diff --git a/docs/build/smart-contracts/getting-started/hello-world-frontend.mdx b/docs/build/smart-contracts/getting-started/hello-world-frontend.mdx
new file mode 100644
index 0000000000..3172409ef2
--- /dev/null
+++ b/docs/build/smart-contracts/getting-started/hello-world-frontend.mdx
@@ -0,0 +1,134 @@
+---
+sidebar_position: 50
+sidebar_label: "5. Build a Hello World Frontend"
+title: "Build a frontend for the Hello World contract"
+description: "Build a frontend for the Hello World contract by using Stellar CLI to generate TypeScript bindings."
+pagination_next: build/apps/dapp-frontend
+---
+
+# 5. Build a Hello World Frontend
+
+In the previous examples, we invoked the contracts using the Stellar CLI, and in this last part of the guide we'll create a web app that interacts with the Hello World contract through TypeScript bindings.
+
+:::info
+
+This example shows one way of creating a binding between a contract and a frontend, for a more comprehensive guide see the [Build a Dapp Frontend](../../apps/dapp-frontend.mdx) documentation.
+
+:::
+
+## Initialize a frontend toolchain
+
+You can build a Stellar dapp with any frontend toolchain or integrate it into any existing full-stack app. For this tutorial, we're going to use [Astro](https://astro.build/). Astro works with React, Vue, Svelte, any other UI library, or no UI library at all. In this tutorial, we're not using a UI library. The smart contract-specific parts of this tutorial will be similar no matter what frontend toolchain you use.
+
+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 smart contract 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.
+
+Let's get started.
+
+You're going to need [Node.js](https://nodejs.org/en/download/package-manager/) v20 or greater. If you haven't yet, install it now.
+
+We want to create an Astro project with the Hello World contract from the previous lessons integrated. To do this, we install the default Astro project:
+
+```bash
+npm create astro@latest
+```
+
+This project has the following directory structure.
+
+```bash
+extra-escape
+├── astro.config.mjs
+├── package-lock.json
+├── package.json
+├── packages
+├── public
+├── README.md
+├── src
+│   ├── assets
+│   │   ├── astro.svg
+│   │   └── background.svg
+│   ├── components
+│   │   └── Welcome.astro
+│   ├── layouts
+│   │   └── Layout.astro
+│   └── pages
+│       └── index.astro
+└── tsconfig.json
+```
+
+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 ../.stellar/ .stellar
+```
+
+## Generate an NPM package for the Hello World contract
+
+Before we 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 smart contracts on Stellar, like encoding [XDR](../../../learn/encyclopedia/contract-development/types/fully-typed-contracts.mdx).
+
+This is going to use the CLI command `stellar contract bindings typescript`:
+
+```bash
+stellar contract bindings typescript \
+  --network testnet \
+  --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!
+
+:::
+
+The binding will be created in as a NPM package in the directory `packages/hello_world` as specified in the CLI command. We'll need to build the bindings package, since (in its initial state) the package is mostly TypeScript types and stubs for the various contract functions.
+
+```bash
+cd packages/hello_world
+npm install
+npm run build
+cd ../..
+```
+
+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.
+
+## Call the contract from the frontend
+
+Now let's open up `src/pages/index.astro` and use the binding to call the `hello` contract function with an argument.
+
+The default Astro project consists of a page (`pages/index.astro`) and a welcome component (`component/Welcome.astro`), and we don't need any of that code. Replace the `pages/index.astro` code with this code (the welcome component will not be needed):
+
+```ts title="src/pages/index.astro"
+---
+import * as Client from './packages/hello_world';
+
+const contract = new Client.Client({
+   ...Client.networks.testnet,
+   rpcUrl: 'https://soroban-testnet.stellar.org:443'
+});
+
+const { result } = await contract.hello({to: "Devs!"});
+const greeting = result.join(" ");
+---
+
+<h1>{greeting}</h1>
+```
+
+First we import the binding library, and then we need to define a contract client we can use for invoking the contract function we deployed to testnet in a previous step.
+
+The `hello()` contract function is invoked synchronously with the argument `{to: "Devs!"}` and the expected response is an array consisting of "Hello" and "Devs!". We join the result array and the constant `greeting` should now hold the text `Hello Devs!`
+
+Jumping down to the HTML section we now want to display the `greeting` text in the browser. Let's see it in action! Start the dev server:
+
+```bash
+npm run dev
+```
+
+And open [localhost:4321](http://localhost:4321) in your browser. You should see the greeting from the contract!
+
+You can try updating the argument to `{ to: 'Stellar' }`. When you save the file, the page will automatically update.
+
+:::info
+
+When you start up the dev server with `npm run dev`, you will see similar output in your terminal as when you ran `npm run init`. This is because the `dev` script in package.json is set up to run `npm run init` and `astro dev`, so that you can ensure that your deployed contract and your generated NPM package are always in sync. If you want to just start the dev server without the initialize.js script, you can run `npm run astro dev`.
+
+:::


Reviews:
user: login: briwylde08
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-04T17:30:10Z
user: login: ElliotFriend
body: looking pretty good so far! left a couple comments/suggestions
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T15:56:48Z
user: login: carstenjacobsen
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T10:09:35Z
user: login: carstenjacobsen
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T10:11:49Z
user: login: carstenjacobsen
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T10:12:22Z
user: login: carstenjacobsen
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T10:13:18Z
user: login: ElliotFriend
body: great work! Happy to see this added to the tutorial!
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T15:33:06Z

Review comments:
diff_hunk: @@ -0,0 +1,130 @@
+---
+sidebar_position: 50
+sidebar_label: "5. Build a Hello World Frontend"
+title: "Build a frontend for the Hello World contract"
+description: "Build a frontend for the Hello World contract by using Stellar CLI to generate TypeScript bindings."
+---
+
+# 5. Build a Hello World Frontend
+
+In the previous examples we invoked the contracts using the Stellar CLI, and in this last part of the guide we'll create a web app that interacts with the Hello World contract through TypeScript bindings.
+
+:::info
+
+This example shows one way of creating a binding between a contract and a frontend, for a more comprehensive guide see the [Build a Dapp Frontend](../../apps/dapp-frontend.mdx) documentation.
+
+:::
+
+## Initialize a frontend toolchain
+
+You can build a Soroban app with any frontend toolchain or integrate it into any existing full-stack app. For this tutorial, we're going to use [Astro](https://astro.build/). Astro works with React, Vue, Svelte, any other UI library, or no UI library at all. In this tutorial, we're not using a UI library. The Soroban-specific parts of this tutorial will be similar no matter what frontend toolchain you use.
path: docs/build/smart-contracts/getting-started/hello-world-frontend.mdx
user: login: briwylde08
body: Can we say Stellar app instead of Soroban app throughout the documentation? I think we will eventually move away from using "Soroban" as much as newcomers don't necessarily know what Soroban is, they just know Stellar.
created_at: 2025-03-04T17:21:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,130 @@
+---
+sidebar_position: 50
+sidebar_label: "5. Build a Hello World Frontend"
+title: "Build a frontend for the Hello World contract"
+description: "Build a frontend for the Hello World contract by using Stellar CLI to generate TypeScript bindings."
+---
+
+# 5. Build a Hello World Frontend
+
+In the previous examples, we invoked the contracts using the Stellar CLI, and in this last part of the guide we'll create a web app that interacts with the Hello World contract through TypeScript bindings.
+
+:::info
+
+This example shows one way of creating a binding between a contract and a frontend, for a more comprehensive guide see the [Build a Dapp Frontend](../../apps/dapp-frontend.mdx) documentation.
+
+:::
+
+## Initialize a frontend toolchain
+
+You can build a Soroban app with any frontend toolchain or integrate it into any existing full-stack app. For this tutorial, we're going to use [Astro](https://astro.build/). Astro works with React, Vue, Svelte, any other UI library, or no UI library at all. In this tutorial, we're not using a UI library. The Soroban-specific parts of this tutorial will be similar no matter what frontend toolchain you use.
+
+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.
+
+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.
path: docs/build/smart-contracts/getting-started/hello-world-frontend.mdx
user: login: ElliotFriend
body: We probably want to recommend node v20 or greater. v18 is set to reach EOL next month
created_at: 2025-03-12T15:49:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,130 @@
+---
+sidebar_position: 50
+sidebar_label: "5. Build a Hello World Frontend"
+title: "Build a frontend for the Hello World contract"
+description: "Build a frontend for the Hello World contract by using Stellar CLI to generate TypeScript bindings."
+---
+
+# 5. Build a Hello World Frontend
+
+In the previous examples we invoked the contracts using the Stellar CLI, and in this last part of the guide we'll create a web app that interacts with the Hello World contract through TypeScript bindings.
+
+:::info
+
+This example shows one way of creating a binding between a contract and a frontend, for a more comprehensive guide see the [Build a Dapp Frontend](../../apps/dapp-frontend.mdx) documentation.
+
+:::
+
+## Initialize a frontend toolchain
+
+You can build a Soroban app with any frontend toolchain or integrate it into any existing full-stack app. For this tutorial, we're going to use [Astro](https://astro.build/). Astro works with React, Vue, Svelte, any other UI library, or no UI library at all. In this tutorial, we're not using a UI library. The Soroban-specific parts of this tutorial will be similar no matter what frontend toolchain you use.
path: docs/build/smart-contracts/getting-started/hello-world-frontend.mdx
user: login: ElliotFriend
body: I'd second this.

Also, the places below where we call it `first-soroban-app`, we might consider using `first-stellar-app` instead?
created_at: 2025-03-12T15:51:17Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,130 @@
+---
+sidebar_position: 50
+sidebar_label: "5. Build a Hello World Frontend"
+title: "Build a frontend for the Hello World contract"
+description: "Build a frontend for the Hello World contract by using Stellar CLI to generate TypeScript bindings."
+---
+
+# 5. Build a Hello World Frontend
+
+In the previous examples, we invoked the contracts using the Stellar CLI, and in this last part of the guide we'll create a web app that interacts with the Hello World contract through TypeScript bindings.
+
+:::info
+
+This example shows one way of creating a binding between a contract and a frontend, for a more comprehensive guide see the [Build a Dapp Frontend](../../apps/dapp-frontend.mdx) documentation.
+
+:::
+
+## Initialize a frontend toolchain
+
+You can build a Soroban app with any frontend toolchain or integrate it into any existing full-stack app. For this tutorial, we're going to use [Astro](https://astro.build/). Astro works with React, Vue, Svelte, any other UI library, or no UI library at all. In this tutorial, we're not using a UI library. The Soroban-specific parts of this tutorial will be similar no matter what frontend toolchain you use.
+
+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.
+
+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 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`.
+
+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
+git add .
+git commit -m "first commit: initialize from stellar/soroban-template-astro"
+```
+
+This project has the following directory structure, which we'll go over in more detail below.
+
+```bash
+├── contracts
+│   ├── hello_world
+│   └── increment
+├── CONTRIBUTING.md
+├── Cargo.toml
+├── Cargo.lock
+├── initialize.js
+├── package-lock.json
+├── package.json
+├── packages
+├── public
+├── src
+│   ├── components
+│   │   └── Card.astro
+│   ├── env.d.ts
+│   ├── layouts
+│   │   └── Layout.astro
+│   └── pages
+│       └── index.astro
+└── tsconfig.json
+```
+
+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
+
+Before we 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](../../../learn/encyclopedia/contract-development/types/fully-typed-contracts.mdx).
+
+This is going to use the CLI command `stellar contract bindings typescript`:
+
+```bash
+stellar contract bindings typescript \
+  --network testnet \
+  --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.
+
+## Call the contract from the frontend
path: docs/build/smart-contracts/getting-started/hello-world-frontend.mdx
user: login: ElliotFriend
body: before we get to this step, they'll need to `cd packages/hello_world && npm run build` or something similar. The bindings command's output these days notifies the user about this, but we should still include that in these instructions.
created_at: 2025-03-12T15:54:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,130 @@
+---
+sidebar_position: 50
+sidebar_label: "5. Build a Hello World Frontend"
+title: "Build a frontend for the Hello World contract"
+description: "Build a frontend for the Hello World contract by using Stellar CLI to generate TypeScript bindings."
path: docs/build/smart-contracts/getting-started/hello-world-frontend.mdx
user: login: ElliotFriend
body: It might be nice to include the `pagination_next` element here, pointing to that `build/apps/dapp-frontend` doc. Almost like "this was a nice baseline, jump over here for something that's a touch more advanced"
created_at: 2025-03-12T15:56:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,130 @@
+---
+sidebar_position: 50
+sidebar_label: "5. Build a Hello World Frontend"
+title: "Build a frontend for the Hello World contract"
+description: "Build a frontend for the Hello World contract by using Stellar CLI to generate TypeScript bindings."
path: docs/build/smart-contracts/getting-started/hello-world-frontend.mdx
user: login: carstenjacobsen
body: Done
created_at: 2025-03-13T10:09:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,130 @@
+---
+sidebar_position: 50
+sidebar_label: "5. Build a Hello World Frontend"
+title: "Build a frontend for the Hello World contract"
+description: "Build a frontend for the Hello World contract by using Stellar CLI to generate TypeScript bindings."
+---
+
+# 5. Build a Hello World Frontend
+
+In the previous examples, we invoked the contracts using the Stellar CLI, and in this last part of the guide we'll create a web app that interacts with the Hello World contract through TypeScript bindings.
+
+:::info
+
+This example shows one way of creating a binding between a contract and a frontend, for a more comprehensive guide see the [Build a Dapp Frontend](../../apps/dapp-frontend.mdx) documentation.
+
+:::
+
+## Initialize a frontend toolchain
+
+You can build a Soroban app with any frontend toolchain or integrate it into any existing full-stack app. For this tutorial, we're going to use [Astro](https://astro.build/). Astro works with React, Vue, Svelte, any other UI library, or no UI library at all. In this tutorial, we're not using a UI library. The Soroban-specific parts of this tutorial will be similar no matter what frontend toolchain you use.
+
+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.
+
+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 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`.
+
+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
+git add .
+git commit -m "first commit: initialize from stellar/soroban-template-astro"
+```
+
+This project has the following directory structure, which we'll go over in more detail below.
+
+```bash
+├── contracts
+│   ├── hello_world
+│   └── increment
+├── CONTRIBUTING.md
+├── Cargo.toml
+├── Cargo.lock
+├── initialize.js
+├── package-lock.json
+├── package.json
+├── packages
+├── public
+├── src
+│   ├── components
+│   │   └── Card.astro
+│   ├── env.d.ts
+│   ├── layouts
+│   │   └── Layout.astro
+│   └── pages
+│       └── index.astro
+└── tsconfig.json
+```
+
+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
+
+Before we 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](../../../learn/encyclopedia/contract-development/types/fully-typed-contracts.mdx).
+
+This is going to use the CLI command `stellar contract bindings typescript`:
+
+```bash
+stellar contract bindings typescript \
+  --network testnet \
+  --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.
+
+## Call the contract from the frontend
path: docs/build/smart-contracts/getting-started/hello-world-frontend.mdx
user: login: carstenjacobsen
body: Fixed by refactoring the Astro part of the guide
created_at: 2025-03-13T10:11:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,130 @@
+---
+sidebar_position: 50
+sidebar_label: "5. Build a Hello World Frontend"
+title: "Build a frontend for the Hello World contract"
+description: "Build a frontend for the Hello World contract by using Stellar CLI to generate TypeScript bindings."
+---
+
+# 5. Build a Hello World Frontend
+
+In the previous examples, we invoked the contracts using the Stellar CLI, and in this last part of the guide we'll create a web app that interacts with the Hello World contract through TypeScript bindings.
+
+:::info
+
+This example shows one way of creating a binding between a contract and a frontend, for a more comprehensive guide see the [Build a Dapp Frontend](../../apps/dapp-frontend.mdx) documentation.
+
+:::
+
+## Initialize a frontend toolchain
+
+You can build a Soroban app with any frontend toolchain or integrate it into any existing full-stack app. For this tutorial, we're going to use [Astro](https://astro.build/). Astro works with React, Vue, Svelte, any other UI library, or no UI library at all. In this tutorial, we're not using a UI library. The Soroban-specific parts of this tutorial will be similar no matter what frontend toolchain you use.
+
+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.
+
+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.
path: docs/build/smart-contracts/getting-started/hello-world-frontend.mdx
user: login: carstenjacobsen
body: Done
created_at: 2025-03-13T10:12:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,130 @@
+---
+sidebar_position: 50
+sidebar_label: "5. Build a Hello World Frontend"
+title: "Build a frontend for the Hello World contract"
+description: "Build a frontend for the Hello World contract by using Stellar CLI to generate TypeScript bindings."
+---
+
+# 5. Build a Hello World Frontend
+
+In the previous examples we invoked the contracts using the Stellar CLI, and in this last part of the guide we'll create a web app that interacts with the Hello World contract through TypeScript bindings.
+
+:::info
+
+This example shows one way of creating a binding between a contract and a frontend, for a more comprehensive guide see the [Build a Dapp Frontend](../../apps/dapp-frontend.mdx) documentation.
+
+:::
+
+## Initialize a frontend toolchain
+
+You can build a Soroban app with any frontend toolchain or integrate it into any existing full-stack app. For this tutorial, we're going to use [Astro](https://astro.build/). Astro works with React, Vue, Svelte, any other UI library, or no UI library at all. In this tutorial, we're not using a UI library. The Soroban-specific parts of this tutorial will be similar no matter what frontend toolchain you use.
path: docs/build/smart-contracts/getting-started/hello-world-frontend.mdx
user: login: carstenjacobsen
body: Done by using a standard Astro install instead of the template install 
created_at: 2025-03-13T10:13:18Z
author_association: CONTRIBUTOR

PR comments:
user: login: stellar-jenkins
created_at: 2025-03-04T09:44:51Z
body: **Something went wrong with PR preview build please check**
author_association: NONE
user: login: stellar-jenkins
created_at: 2025-03-04T10:01:06Z
body: **Preview is available here:**<br>http://developers-pr1318.previews.kube001.services.stellar-ops.com
author_association: NONE
user: login: stellar-jenkins
created_at: 2025-03-04T10:16:32Z
body: **Preview is available here:**<br>http://developers-pr1318.previews.kube001.services.stellar-ops.com
author_association: NONE
user: login: stellar-jenkins
created_at: 2025-03-04T17:40:27Z
body: **Preview is available here:**<br>http://developers-pr1318.previews.kube001.services.stellar-ops.com
author_association: NONE
user: login: stellar-jenkins
created_at: 2025-03-12T22:02:18Z
body: **Preview is available here:**<br>http://developers-pr1318.previews.kube001.services.stellar-ops.com
author_association: NONE
user: login: stellar-jenkins
created_at: 2025-03-13T09:10:46Z
body: **Something went wrong with PR preview build please check**
author_association: NONE
user: login: stellar-jenkins
created_at: 2025-03-13T09:20:26Z
body: **Something went wrong with PR preview build please check**
author_association: NONE
user: login: stellar-jenkins
created_at: 2025-03-13T09:31:27Z
body: **Preview is available here:**<br>http://developers-pr1318.previews.kube001.services.stellar-ops.com
author_association: NONE
user: login: stellar-jenkins
created_at: 2025-03-13T09:45:21Z
body: **Preview is available here:**<br>http://developers-pr1318.previews.kube001.services.stellar-ops.com
author_association: NONE
user: login: stellar-jenkins
created_at: 2025-03-13T10:05:33Z
body: **Preview is available here:**<br>http://developers-pr1318.previews.kube001.services.stellar-ops.com
author_association: NONE