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

Pick you favorite framework
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)

Install the following packages:

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

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

Install package:

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

Add a directory in your project for aqua code. e.g _aqua
Put *.aqua files in that directory
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
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"
  },
  ...
}

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.

3.7 KiB Raw Permalink Blame History