https://github.com/stellar/soroban-template-astro

frontend template for `soroban contract init`, powered by astro
https://github.com/stellar/soroban-template-astro

soroban soroban-frontend-template soroban-template soroban-template-frontend stellar

Last synced: about 2 months ago
JSON representation

frontend template for `soroban contract init`, powered by astro

• Host: GitHub
• URL: https://github.com/stellar/soroban-template-astro
• Owner: stellar
• Created: 2024-04-18T10:08:24.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-09-10T04:40:54.000Z (3 months ago)
• Last Synced: 2024-11-06T04:09:14.008Z (about 2 months ago)
• Topics: soroban, soroban-frontend-template, soroban-template, soroban-template-frontend, stellar
• Language: Astro
• Homepage:
• Size: 161 KB
• Stars: 4
• Watchers: 19
• Forks: 3
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
# Soroban Frontend in Astro

A Frontend Template suitable for use with `soroban contract init --frontend-template`, powered by [Astro](https://astro.build/).

# Getting Started

- `cp .env.example .env`

- `npm install`

- `npm run dev`

# How it works

If you look in [package.json](./package.json), you'll see that the `start` & `dev` scripts first run the [`initialize.js`](./initialize.js) script. This script loops over all contracts in `contracts/*` and, for each:

1. Deploys to a local network (_needs to be running with `docker run` or `soroban network start`_)

2. Saves contract IDs to `.soroban/contract-ids`

3. Generates TS bindings for each into the `packages` folder, which is set up as an [npm workspace](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#workspaces)

4. Create a file in `src/contracts` that imports the contract client and initializes it for the `standalone` network.

You're now ready to import these initialized contract clients in your [Astro templates](https://docs.astro.build/en/core-concepts/astro-syntax/) or your [React, Svelte, Vue, Alpine, Lit, and whatever else JS files](https://docs.astro.build/en/core-concepts/framework-components/#official-ui-framework-integrations). You can see an example of this in [index.astro](./src/pages/index.astro).