| .github | ||
| packages | ||
| .editorconfig | ||
| .gitignore | ||
| .npmrc | ||
| .prettierrc.cjs | ||
| ci.js | ||
| CONTRIBUTING.md | ||
| DEVELOPING.md | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| tsconfig.json | ||
Fluence JS Client
This is the Javascript client for the Fluence network. The main role of the JS client is to connect to the Fluence Network and allow you to integrate Aqua code into your application.
Installation
Adding the Fluence JS client for your web application is very easy.
Browser-based Apps
-
Add a script tag with the JS Client bundle to your
index.html. The easiest way to do this is using a CDN (like JSDELIVR or UNPKG). The script is large, thus we highly recommend to use theasyncattribute.Here is an example using the JSDELIVR CDN:
<head> <title>Cool App</title> <script src="https://cdn.jsdelivr.net/npm/@fluencelabs/js-client.web.standalone@0.13.3/dist/js-client.min.js" async ></script> </head>If you cannot or don't want to use a CDN, feel free to get the script directly from the npm package and host it yourself. You can find the script in the
/distdirectory of the package. (Note: this option means that developers understand what they are doing and know how to serve this file from their own web server.) -
Install the following packages:
npm i @fluencelabs/js-client.api @fluencelabs/fluence-network-environment -
Add the following lines at the beginning of your code:
import { Fluence } from "@fluencelabs/js-client.api"; import { randomKras } from '@fluencelabs/fluence-network-environment'; Fluence.connect(randomKras());
Node.js Apps
-
Install the following packages:
npm i @fluencelabs/js-client.api"@fluencelabs/js-client.node @fluencelabs/fluence-network-environment -
Add the following lines at the beginning of your code:
import '@fluencelabs/js-client.node'; import { Fluence } from "@fluencelabs/js-client.api"; import { randomKras } from '@fluencelabs/fluence-network-environment'; Fluence.connect(randomKras());
Usage in an Application
Once you've added the client, you can compile Aqua and run it in your application. To compile Aqua, use Fluence CLI.
-
Install the package:
npm i -D "@fluencelabs/fluence-cli" -
Add a directory in your project for Aqua code, e.g.,
_aqua. -
Put
*.aquafiles in that directory. -
Add a directory for compiled Aqua files inside your sources. For example, if your app source is located in the
srcdirectory, you can createsrc/_aqua. -
To compile Aqua code once, run
npx fluence aqua -i ./_aqua -o ./src/_aqua/. To watch the changes and to recompile on the fly, add the-wflag:npx fluence aqua -w -i ./_aqua -o ./src/_aqua/.Hint: it might be a good idea to add these scripts to your
package.jsonfile. For example, you project structure could look like this:┣ _aqua ┃ ┗ demo.aqua ┣ src ┃ ┣ _aqua ┃ ┃ ┗ demo.ts ┃ ┗ index.ts ┣ package-lock.json ┣ package.json ┗ tsconfig.jsonThen, your
package.jsonfile should include the following lines:{ ... "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 call Aqua code from your application like this:
import { getRelayTime } from "./_aqua/demo"; async function buttonClick() { const time = await getRelayTime(); alert("relay time: " + time); }
Development
To hack on the Fluence JS Client itself, please refer to the development page.
Documentation
The starting point for all documentation related to Fluence is fluence.dev. We also have an active YouTube channel.
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.