From dff3298d60a2f5529071c9a983c0ca434c2f6632 Mon Sep 17 00:00:00 2001 From: Maria Shodunke Date: Tue, 19 Aug 2025 13:04:46 +0100 Subject: [PATCH] Add improvements to walkthrough --- _code-samples/get-started/js/base.html | 17 -- _code-samples/get-started/js/base.js | 20 +- _code-samples/get-started/js/get-acct-info.js | 108 ++++---- _code-samples/get-started/js/index.html | 79 ++++++ _code-samples/get-started/js/package.json | 5 +- .../javascript/build-apps/get-started.md | 259 +++++++++++++----- 6 files changed, 334 insertions(+), 154 deletions(-) delete mode 100644 _code-samples/get-started/js/base.html create mode 100644 _code-samples/get-started/js/index.html diff --git a/_code-samples/get-started/js/base.html b/_code-samples/get-started/js/base.html deleted file mode 100644 index 4b7579a3fe..0000000000 --- a/_code-samples/get-started/js/base.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - XRPL.js Base Example - - - - - -

XRPL.js Example

- - - - - diff --git a/_code-samples/get-started/js/base.js b/_code-samples/get-started/js/base.js index e49f0209bb..2d672fa284 100644 --- a/_code-samples/get-started/js/base.js +++ b/_code-samples/get-started/js/base.js @@ -1,17 +1,11 @@ // In browsers, use a + + + +

XRPL.js Get Started

+
+ + + + diff --git a/_code-samples/get-started/js/package.json b/_code-samples/get-started/js/package.json index 58e2ddda32..43c89bf1e0 100644 --- a/_code-samples/get-started/js/package.json +++ b/_code-samples/get-started/js/package.json @@ -1,5 +1,6 @@ { "dependencies": { - "xrpl": "^4.0.0" - } + "xrpl": "^4.4.0" + }, + "type": "module" } diff --git a/docs/tutorials/javascript/build-apps/get-started.md b/docs/tutorials/javascript/build-apps/get-started.md index 5918da30ac..50937b26ad 100644 --- a/docs/tutorials/javascript/build-apps/get-started.md +++ b/docs/tutorials/javascript/build-apps/get-started.md @@ -1,6 +1,4 @@ --- -html: get-started-using-javascript-library.html -parent: javascript.html seo: description: Build an entry-level JavaScript application for querying the XRP Ledger. top_nav_name: JavaScript @@ -13,95 +11,102 @@ showcase_icon: assets/img/logos/javascript.svg {% code-walkthrough filesets=[ { - "files": [ "/_code-samples/get-started/js/base.html", "/_code-samples/get-started/js/get-acct-info.js"], - "downloadAssociatedFiles": ["/_code-samples/get-started/js/*"], + "files": ["/_code-samples/get-started/js/get-acct-info.js"], + "downloadAssociatedFiles": ["/_code-samples/get-started/js/package.json", "/_code-samples/get-started/js/get-acct-info.js"], + "when": { "environment": "Node" } + }, + { + "files": ["/_code-samples/get-started/js/index.html"], + "downloadAssociatedFiles": ["/_code-samples/get-started/js/index.html"], + "when": { "environment": "Web" } } ] + filters={ + "environment": { + "label": "Environment", + "items": [ + { "value": "Node" }, + { "value": "Web" }, + ] + } + } %} # Get Started Using JavaScript Library -This tutorial guides you through the basics of building an XRP Ledger-connected application in JavaScript or TypeScript using the [`xrpl.js`](https://github.com/XRPLF/xrpl.js/) client library in either Node.js or web browsers. +This tutorial guides you through the basics of building an XRP Ledger-connected application in JavaScript using the [`xrpl.js`](https://github.com/XRPLF/xrpl.js/) client library in either Node.js or web browsers. -The scripts and config files used in this guide are {% repo-link path="_code-samples/get-started/js/" %}available in this website's GitHub Repository{% /repo-link %}. - - -## Learning Goals +## Goals In this tutorial, you'll learn: -* The basic building blocks of XRP Ledger-based applications. -* How to connect to the XRP Ledger using `xrpl.js`. -* How to get an account on the [Testnet](/resources/dev-tools/xrp-faucets) using `xrpl.js`. -* How to use the `xrpl.js` library to look up information about an account on the XRP Ledger. -* How to put these steps together to create a JavaScript app or web-app. +- The basic building blocks of XRP Ledger-based applications. +- How to connect to the XRP Ledger using `xrpl.js`. +- How to get an account on the [Testnet](/resources/dev-tools/xrp-faucets) using `xrpl.js`. +- How to use the `xrpl.js` library to look up information about an account on the XRP Ledger. +- How to put these steps together to create a JavaScript app or web-app. +## Prerequisites -## Requirements +To complete this tutorial, you should meet the following guidelines: -To follow this tutorial, you should have some familiarity with writing code in JavaScript and managing small JavaScript projects. In browsers, any modern web browser with JavaScript support should work fine. In Node.js, **version 14** is recommended. Node.js versions 12 and 16 are also regularly tested. +- Have some familiarity with writing code in JavaScript. +- Have installed Node.js **version 20** or later in your development environment. +- If you want to build a web application, any modern web browser with JavaScript support should work fine. +## Source Code -## Start Building +Click **Download** on the top right of the code preview panel to download the source code. -When you're working with the XRP Ledger, there are a few things you'll need to manage, whether you're adding XRP to your [account](../../../concepts/accounts/index.md), integrating with the [decentralized exchange](../../../concepts/tokens/decentralized-exchange/index.md), or [issuing tokens](../../../concepts/tokens/index.md). This tutorial walks you through basic patterns common to getting started with all of these use cases and provides sample code for implementing them. +## Steps -Here are some steps you use in many XRP Ledger projects: +Follow the steps to create a simple application with `xrpl.js`. -1. [Import the library.](#1-import-the-library) -1. [Connect to the XRP Ledger.](#2-connect-to-the-xrp-ledger) -1. [Get an account.](#3-get-account) -1. [Query the XRP Ledger.](#4-query-the-xrp-ledger) -1. [Listen for Events.](#5-listen-for-events) +### 1. Install Dependencies -### 1. Import the Library - -How you load `xrpl.js` into your project depends on your development environment: - -{% step id="import-web-tag" %} -#### Web Browsers - -Add a `