From d5381505d04c31bd03cf06ba6b2d75aeec93cab7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 20 Feb 2026 17:41:52 +0000
Subject: [PATCH 1/2] Initial plan


From f0b25f666c6a506c92d9a71afad54a57a000144a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 20 Feb 2026 17:46:04 +0000
Subject: [PATCH 2/2] docs: Add directory/path instructions to Hello World
 Frontend guide

Co-authored-by: oceans404 <91382964+oceans404@users.noreply.github.com>
---
 .../getting-started/hello-world-frontend.mdx   | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/docs/build/smart-contracts/getting-started/hello-world-frontend.mdx b/docs/build/smart-contracts/getting-started/hello-world-frontend.mdx
index 91f2ec456e..2d1b39851f 100644
--- a/docs/build/smart-contracts/getting-started/hello-world-frontend.mdx
+++ b/docs/build/smart-contracts/getting-started/hello-world-frontend.mdx
@@ -26,16 +26,17 @@ 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:
+We want to create an Astro project with the Hello World contract from the previous lessons integrated. The frontend project should live **alongside** (as a sibling to) your `soroban-hello-world` contract directory, so navigate up one level from your contract project first:
 
 ```sh
-npm create astro@latest
+cd ..  # From inside soroban-hello-world, go up one level
+npm create astro@latest hello-world-frontend
 ```
 
 This project has the following directory structure.
 
 ```sh
-extra-escape
+hello-world-frontend
 ├── astro.config.mjs
 ├── package-lock.json
 ├── package.json
@@ -59,13 +60,14 @@ extra-escape
 
 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/fundamentals/contract-development/types/fully-typed-contracts.mdx).
 
-This is going to use the CLI command `stellar contract bindings typescript`:
+This is going to use the CLI command `stellar contract bindings typescript`. The bindings command needs to be run from your **contract project directory** so that it can resolve the contract alias. Navigate back to `soroban-hello-world` and use a relative path to output the bindings into the frontend:
 
 ```sh
+cd soroban-hello-world  # Back to your contract project directory
 stellar contract bindings typescript \
   --network testnet \
   --contract-id hello_world \
-  --output-dir packages/hello_world
+  --output-dir ../hello-world-frontend/packages/hello_world
 ```
 
 :::tip
@@ -74,10 +76,10 @@ Notice that we were able to use the contract alias, `hello_world`, in place of t
 
 :::
 
-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.
+The binding will be created as a NPM package in the directory `packages/hello_world` inside your frontend project 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.
 
 ```sh
-cd packages/hello_world
+cd ../hello-world-frontend/packages/hello_world
 npm install
 npm run build
 cd ../..
@@ -111,7 +113,7 @@ First we import the binding library, and then we need to define a contract clien
 
 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:
+Jumping down to the HTML section we now want to display the `greeting` text in the browser. Let's see it in action! After the previous `cd ../..`, you should now be in the `hello-world-frontend` directory. Start the dev server:
 
 ```sh
 npm run dev