### Start Local HTTP Server
Source: https://docs.plugwallet.ooo/build-an-app-examples/plug-auth-nns
This command starts a local HTTP server in the current directory, allowing the `index.html` and associated files to be served and viewed in a web browser. It requires `http-server` to be installed globally.
```Shell
http-server .
```
--------------------------------
### Start Local HTTP Server in Current Directory
Source: https://docs.plugwallet.ooo/build-an-app-examples/buy-me-a-coffee
Executes the globally installed `http-server` to serve files from the current directory. This command makes your web application accessible via a local HTTP address in your browser.
```bash
http-server .
```
--------------------------------
### Example Output of Running HTTP Server
Source: https://docs.plugwallet.ooo/build-an-app-examples/buy-me-a-coffee
This block shows the typical console output when the `http-server` starts successfully, listing the local IP addresses and port where the server is accessible. These addresses can be used to open the application in a web browser.
```text
Starting up http-server, serving .
Available on:
http://127.0.0.1:8080
http://xxx.xxx.x.xx:8080
```
--------------------------------
### Detecting Plug Extension in Browser Console
Source: https://docs.plugwallet.ooo/developer-guides/getting-started
This JavaScript snippet checks for the presence of the `window.ic.plug` object, which indicates whether the Plug browser extension is installed and active. It's intended for quick testing in the browser developer console to confirm correct installation.
```JavaScript
window.ic.plug && "Plug and play!"
```
--------------------------------
### Request Connection to Plug Wallet
Source: https://docs.plugwallet.ooo/developer-guides/getting-started
This JavaScript snippet initiates a connection request to the Plug wallet using the `window.ic.plug.requestConnect()` method. It should be executed in the browser's developer console. Upon execution, a Plug notification window will pop up, prompting the user to allow or decline the connection. Access to this API is restricted to pages served over HTTP/HTTPS.
```JavaScript
window.ic.plug.requestConnect()
```
--------------------------------
### Initial HTML Scaffolding for Plugged Application
Source: https://docs.plugwallet.ooo/build-an-app-examples/plugged
This snippet provides the basic HTML structure for the 'Plugged' application, including the document title and commented placeholders for stylesheets, application logic, and the main application container.
```HTML
Plugged
```
--------------------------------
### Install Node.js HTTP Server Globally
Source: https://docs.plugwallet.ooo/build-an-app-examples/buy-me-a-coffee
This command installs the `http-server` package globally using npm, making it available from any directory in your terminal. It's a prerequisite for quickly serving local web projects.
```bash
npm install --global http-server
```
--------------------------------
### Launch Local HTTP Server
Source: https://docs.plugwallet.ooo/build-an-app-examples/plugged
Instructions to launch a local HTTP server using the `http-server` command-line tool. This command serves the current directory's files, making `index.html` and other assets accessible via a web browser.
```Shell
http-server .
```
--------------------------------
### Initialize DOM Selectors for Application Elements
Source: https://docs.plugwallet.ooo/build-an-app-examples/plugged
Defines an `els` object to store references to various DOM elements. This snippet shows the initial setup for accessing HTML elements like input fields and buttons using `document.querySelector`.
```JavaScript
// Elements list
const els = {};
// Assign elements to the elements list
els.receiverPrincipalId = document.querySelector('#receiver-principal-id');
els.amount = document.querySelector('#amount');
els.btnConnect = document.querySelector('#btn-connect');
els.btnIsConnected = document.querySelector('#btn-is-connected');
els.btnRequestTransfer = document.querySelector('#btn-request-transfer');
```
--------------------------------
### Connect to Plug Wallet with Whitelist and Host
Source: https://docs.plugwallet.ooo/developer-guides/connect-to-plug
Example demonstrating how to connect to the Plug Wallet by passing optional parameters like `whitelist` (canister IDs) and `host` (network URL) to enable Plug Agent features for interacting with specific canisters.
```JavaScript
(async () => {
// Canister Ids
const nnsCanisterId = 'qoctq-giaaa-aaaaa-aaaea-cai'
// Whitelist
const whitelist = [
nnsCanisterId,
];
// Host
const host = "https://mainnet.dfinity.network";
// Make the request
try {
const publicKey = await window.ic.plug.requestConnect({
whitelist,
host,
timeout: 50000
});
console.log(`The connected user's public key is:`, publicKey);
} catch (e) {
console.log(e);
}
})();
```
--------------------------------
### Example: Initiating a Transfer with Plug `requestTransfer`
Source: https://docs.plugwallet.ooo/developer-guides/balances-transactions
Demonstrates how to use the `requestTransfer` method in JavaScript to send a specified amount to a target Principal ID, including an optional memo. The example shows an asynchronous call and logs the resulting block height.
```javascript
(async () => {
const params = {
to: 'xxxxx-xxxxx-xxxxx-xxxxx',
amount: 2_000_000,
memo: '123451231231'
};
const result = await window.ic.plug.requestTransfer(params);
console.log(result); // { height: number }
})();
```
--------------------------------
### Add Tailwind CSS to HTML Head
Source: https://docs.plugwallet.ooo/build-an-app-examples/plugged
This HTML snippet demonstrates how to include Tailwind CSS base and main stylesheets from a CDN into the `` section of an HTML document, alongside references to custom `main.css` and `app.js` files.
```HTML
Plugged
```
--------------------------------
### Linking External Stylesheets and JavaScript in HTML
Source: https://docs.plugwallet.ooo/build-an-app-examples/plugged
This HTML snippet demonstrates how to link external CSS (main.css) and JavaScript (app.js) files to the 'Plugged' application's index.html. It replaces the comment placeholders with actual and