docs: Fix missing directory context in Hello World Frontend guide

[Copilot]

The Hello World Frontend guide omitted critical working directory context, leaving users confused about where to run npm create astro@latest and stellar contract bindings typescript relative to their contract project.

Changes

• Project initialization: Add cd .. before npm create astro@latest, explicit project name hello-world-frontend, and explanation that the frontend is a sibling to the contract directory
• Directory tree: Replace placeholder name extra-escape with hello-world-frontend
• Bindings generation: Add cd soroban-hello-world before the bindings command with explanation that it must run from the contract directory (to resolve the alias); update --output-dir to use the correct relative path:

  cd soroban-hello-world  # Back to your contract project directory
  stellar contract bindings typescript \
    --network testnet \
    --contract-id hello_world \
    --output-dir ../hello-world-frontend/packages/hello_world

• Bindings build step: Update cd packages/hello_world → cd ../hello-world-frontend/packages/hello_world
• Dev server: Clarify that cd ../.. lands the user in hello-world-frontend, so npm run dev can be run immediately
• Typo fix: "created in as a NPM package" → "created as a NPM package"

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Build: Frontend guide missing directory/path instructions</issue_title>
<issue_description>

What version are you using?

stellar 25.1.0

What did you do?

I followed the "Hello World Frontend" tutorial (https://developers.stellar.org/docs/build/smart-contracts/getting-started/hello-world-frontend) after working through the Setup guide and previous 4 steps, but got confused about where to run the commands. The guide doesn't specify:

• Where to run npm create astro@latest relative to my contract project
• Where to run stellar contract bindings typescript
• How these directories relate to each other

What did you expect to see?

Clearer instructions on working directories and the final structure.

What should the guide say?

The guide needs to explain that:

1. The frontend should be a sibling to your contract project (so you can use the contract alias)
2. Run the bindings command from your contract directory with a relative path to output into the frontend

Add this after "Initialize a frontend toolchain from scratch":

Starting from your contract project directory:

cd ..  # Go up one level
npm create astro@latest hello-world-frontend
cd soroban-hello-world  # Back to your contract project

# Generate bindings with relative path to frontend
stellar contract bindings typescript \
  --network testnet \
  --contract-id hello_world \
  --output-dir ../hello-world-frontend/packages/hello_world

cd ../hello-world-frontend/packages/hello_world
npm install && npm run build
cd ../..

This creates packages/ inside the frontend (required for the import to work) while letting you use the contract alias from your contract directory.

</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Build: Frontend guide missing directory/path instructions #2246

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

Pull request overview

This PR fixes critical directory navigation issues in the Hello World Frontend tutorial that were causing user confusion. The guide previously lacked context about where to run commands relative to the contract project directory.

Changes:

• Added explicit directory navigation instructions with inline comments explaining the working directory context
• Changed placeholder project name from extra-escape to hello-world-frontend for consistency
• Fixed grammar error: "created in as a NPM package" → "created as a NPM package"

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.