Fluence JS Client

Javascript client to Fluence network

WARNING

Client for NodeJS is broken. We will fix that shortly.

Getting started

Adding JS Client for your web application is very easy

1. Pick you favorite framework
2. Add a script tag with the JS Client bundle to your index.html. The easiest way to do so is using CDN (like https://www.jsdelivr.com/ or https://unpkg.com/) The script is large thus we highly recommend to use async attribute

Here is an example using React App and jsdelivr cdn.

  <title>React App</title>
  <script src='https://cdn.jsdelivr.net/npm/@fluencelabs/js-client.web.standalone@0.10.0/dist/js-client.min.js'
    async></script>
</head>

If you can't or don't want to use CDN, feel free to get the script directly from the npm package and host in yourself: https://www.npmjs.com/package/@fluencelabs/js-client.web.standalone. You can find the script in /dist directory of the package. (note: that options means that the developer understands what he's doing and he knows to serve this file from his own web server)

3. Install the following packages:

npm i @fluencelabs/js-client.api @fluencelabs/fluence-network-environment

4. In the beginning of your app do the following:

import { Fluence } from "@fluencelabs/js-client.api";
import { krasnodar } from "@fluencelabs/fluence-network-environment";

Fluence.start({
  relay: krasnodar[3],
});

Use aqua in web application

Once you've added the client you can compile aqua and run it in your application.

To compile aqua use Fluence CLI: https://github.com/fluencelabs/fluence-cli

1. Install package:

npm i -D "@fluencelabs/fluence-cli"

2. Add a directory in your project for aqua code. e.g _aqua

3. Put *.aqua files in that directory

4. Add a directory for compiled aqua files inside you sources. E.G if you app source are located in src folder, you can create src/_aqua

5. To compile aqua code once run npx fluence aqua -i ./_aqua -o ./src/_aqua/ To watch for changes and recompile on the fly add -w flag npx fluence aqua -i ./_aqua -o ./src/_aqua/

Hint it might be a good idea to add these scripts to your package.json file

For example you project structure could look like this:

 ┣ _aqua
 ┃ ┗ demo.aqua
 ┣ src
 ┃ ┣ _aqua
 ┃ ┃ ┗ demo.ts
 ┃ ┗ index.ts
 ┣ package-lock.json
 ┣ package.json
 ┗ tsconfig.json

And your package json:

{
  ...
  "scripts": {
    ...
    "aqua:compile": "fluence aqua -i ./aqua/ -o ./src/_aqua",
    "aqua:watch": "fluence aqua -w -i ./aqua/ -o ./src/_aqua"
  },
  ...
}

6. Now you can import and use call aqua code from your application. e.g;

import { getRelayTime } from "./_aqua/demo";

async function buttonClick() {
  const time = await getRelayTime();
  alert("relay time: " + time);
}

Developing

To hack on the JS Client itself refer to dev page.

Support

Please, file an issue if you find a bug. You can also contact us at Discord or Telegram. We will do our best to resolve the issue ASAP.

Contributing

Any interested person is welcome to contribute to the project. Please, make sure you read and follow some basic rules.

License

All software code is copyright (c) Fluence Labs, Inc. under the Apache-2.0 license.