Skip to content

Build: Frontend guide missing directory/path instructions #2246

@oceans404

Description

@oceans404

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.

Metadata

Metadata

Labels

bugSomething isn't workingdev-rel

Type

No type

Projects

Status

No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions