Problem:
There are certain tech stacks on app development that do not allow external libraries to be linked or imported into the main javascript file. This is a problem since the Tools repository contains separate scripts that work together to generate a token. Modifying each separated files manually into a single file is possible but there will be a large risk of breaking the script logic if handled incorrectly which can result into generating invalid or unusable tokens.
Solution:
To minimize the risk, please use a javascript bundler like WebpackJS to produce a single file. The output will contain all the necessary scripts to generate a valid token.
As a standard, a javascript bundler will automatically include all the linked or imported libraries to create one working file. This is useful for environments that are relying on:
The following steps would be for generating a single javascript file for the RTC Video/Voice and Interactive LiveStreaming tokens.
Prerequisites
- Node v18.19.0 (npm v10.5.0) and up
- VSCode
- Webpack Installation
- Agora Account ( AppID and AppCertificate )
Project Setup
1. Create a new folder and clone Agora Tools in: https://github.com/AgoraIO/Tools.git
2. Open the cloned project on VSCode and navigate to NodeJS folder.
3. While inside the NodeJS folder, create another folder named webpack, right click and select "Open in integrated terminal"
4. While in the terminal, initialize npm by typing the command: "npm init -y"
5. Install webpack resources using the command: npm install --save-dev webpack webpack-cli webpack-node-externals
File Modifications
After the webpack installation, add a new file named webpack.config.js then input the following lines:
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: './src/index.js', // Entry point of your application
target: 'node', // Tells Webpack that we are targeting Node.js (not the browser)
externals: [nodeExternals()], // This ensures that node_modules are not bundled into the output
output: {
filename: 'bundle.js', // Output bundled file
path: path.resolve(__dirname, 'dist'), // Output directory
},
resolve: {
extensions: ['.js'], // Resolves file extensions
},
module: {
rules: [
{
test: /\.js$/, // Transpile JavaScript files
exclude: /node_modules/,
use: {
loader: 'babel-loader', // If you're using Babel (optional for modern JS)
},
},
],
},
mode: 'development', // Use 'production' for minification or 'development' for debugging
};
Optional: You can use babel for older versions of NodeJS: npm install --save-dev babel-loader @babel/core @babel/preset-env ) If babel is included, please create a .babelrc file and include this line: { "presets": ["@babel/preset-env"] }
Next step would be adding a build script on your package.json file:
While still inside the webpack folder, please create another folder named "src" , duplicate the RtcTokenBuilder2Sample.js for recovery and move the copy into webpack/src. Please do not forget to update the locations on the file's import statements.
Lastly, create a new javascript file inside the src folder and import the RtcTokenBuilder2Sample.js.
The final structure should be similar to:
Running the project
1. Open the the integrated terminal again on the webpack folder and run the command "npm run build"
2. The output file should be inside the "dist" folder named bundle.js
3. To test the token, please run the command "node dist/bundle.js" and use it on a Video/Voice or even in an interactive LiveStream.