Introduction

This guide walks developers through a sample BTFS DApp called Upload File. The GitHub repository for the DApp can be found here. When deployed, the DApp allows users to select and upload a file from their local drive onto the BTFS network.

Setup

The first step is to install and run a BTFS daemon locally. Once the DApp deploys, it uses the JavaScript SDK to communicate with the local BTFS daemon via the HTTP API endpoints.

Install the BTFS binary. Setup the Cross-Origin Resource Sharing, and start the BTFS daemon. If you started the BTFS daemon before setting CORS, then you must restart the daemon after setting CORS to ensure the configuration settings update takes place.

// Set up the CORS, then start the BTFS daemon:

btfs config --json API.HTTPHeaders.Access-Control-Allow-Origin "[\"*\"]"
btfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials "[\"true\"]"

btfs daemon

After your daemon starts, open another terminal window and git clone the DApp repository:

git clone https://github.com/TRON-US/js-btfs-api

Add Private Key Configuration File

To facilitate the offline signing, the DApp uses the Peer ID and private key of a BTT loaded BTFS account, rather than the local daemon's BTFS Peer ID and private key. This use of another peer ID and private key pair constitutes the "offline" portion of offline signing. We will create a config.json file specifying the Peer ID and private key of the account. Upon deployment, the DApp queries the active directory for the config.json file and imports the key information.

Create a file entitled config.json, with the following contents:

{
  "PeerID" : "<Peer ID of BTT loaded BTFS account>",
  "PrivKey": "<Corresponding Private Key in base64 encoded form plain text>"
}

Store this file in the upload-file-via-browser folder, whish is located under js-btfs-api -> packages -> btfs-http-client -> examples -> upload-file-via-browser.

Install Dependencies

We will install NPM package dependencies at two levels: the BTFS HTTP Client level and the Upload File via Browser DApp level.

BTFS HTTP Client

Navigate to js-btfs-api -> packages -> btfs-http-client. Run npm install in this directory to install all required packages:

// Install BTFS HTTP Client dependencies

cd btfs-http-client
npm install


// Successful Output

npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142

...

added 2329 packages from 1689 contributors and audited 26206 packages in 65.644s
found 15 vulnerabilities (12 low, 1 moderate, 1 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

Next, we need to update the go common utils for the important micro-services, including guard, ledger, and escrow. In the same btfs-http-client folder, run the following command:

npm run-script update-js-btfs-commons

// Successful Output

> ./dloaddeps.sh

guard downloaded.
ledger downloaded.
escrow downloaded.
gogo downloaded.

DApp NPM Packages

From the current btfs-http-client folder, navigate to examples -> upload-file-via-browser. Install the NPM package dependencies:

cd upload-file-via-browser
npm install

// Successful Output

npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

> [email protected] install /Users/js-btfs-api/packages/btfs-http-client/examples/upload-file-via-browser/node_modules/fsevents
> node-gyp rebuild

...

added 841 packages from 587 contributors in 29.235s

Deploy DApp

In the same upload-file-via-browser folder, run npm start:

npm start

// Successful Output:

> [email protected] start /Users/user/Downloads/js-btfs/packages/btfs-http-client/examples/upload-file-via-browser
> parcel index.html

Server running at http://localhost:1234 
✨  Built in 4.22s.

Paste the localhost URL into an internet browser to access the DApp.