> For the complete documentation index, see [llms.txt](https://docs.xaman.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.xaman.dev/environments/xapps-dapps/xappbuilder/connecting-localhost-to-xappbuilder.md).

# Connecting localhost to xAppBuilder

{% embed url="<https://www.youtube.com/watch?v=F0giTJuzYvI>" %}

**Step 1: Create Your xApp**

Begin by opening your preferred code editor (in this case, we are using VS Code). Establish a project folder, and within this, create an index.html file. Type some text between the body tag.

Next, install the Live Server extension for VS Code.

Then, initiate the Live Server by clicking the 'Go Live' button/link located in the bottom right corner of VS Code. Take note of the port number that is displayed.

**Step 2: Make Your Website or Web Service Globally Accessible**

In your terminal, execute the command npm install -g localtunnel. If you encounter a permission error, use sudo npm install -g localtunnel.

Following this, run `lt --port 5500`, making sure to replace '5500' with the port number noted in Step 1.

The terminal will output a unique URL. Copy this, and open it in your browser. Here, submit your IP address (if you are unsure of your IP, a quick Google search of 'whatsmyip' will provide it).

For further information about this package, you can refer to the official [Localtunnel documentation](https://theboroer.github.io/localtunnel-www/).

**Step 3: Set Up Your Xumm Developer Console Account**

Navigate to the [Xumm Developer Console](https://apps.xumm.dev/) and create an xApp account.

Paste the URL acquired in Step 2 into the 'WebApp URL' section. In the 'Debug Device ID' section, enter your device ID (which can be found by navigating through Xumm -> settings -> advanced -> Device ID).

**Step 4: Access Your xApp on xAppBuilder**

Open xAppBuilder and scan the provided QR code using Xumm. Afterward, click on the xApp within xAppBuilder.

Now, when you make and save changes to your code in the VS code editor, these changes will be reflected in xAppBuilder, allowing for real-time modifications and testing.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.xaman.dev/environments/xapps-dapps/xappbuilder/connecting-localhost-to-xappbuilder.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.