3. Build JS Sample Project

Follow the next steps to create a JavaScript web application where you can integrate the UNL SDK. The complete code for this project can be found on our GitHub page.

Init project#

npm init -y

Install webpack and babel#

npm install --save-dev webpack webpack-cli webpack-dev-server regenerator-runtime url-loader @babel/core @babel/preset-env @babel/loader

Add files#

Open your preferred text editor (we use VS Code) and create the src and dist directories.

index.html#

Create the index.html file under the /dist directory and reference the main.js file in the body.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Unl Sdk Tutorials</title>
</head>
<body>
<h1>Unl Sdk Tutorials</h1>
<script src="main.js"></script>
</body>
</html>

package.json#

Add the build, watch and develop commands in package.json.

{
"name": "unl-sdk-tutorials",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch",
"develop": "webpack-dev-server --open && npm run watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.0.0"
}
}

Add the .babelrc and webpack.config.js files.

.babelrc#

{
"presets": ["@babel/preset-env"]
}

webpack.config.js#

module.exports = {
mode: "development",
entry: ["regenerator-runtime/runtime.js", "./src/index.js"],
devServer: {
static: "./dist",
},
module: {
rules: [
{
test: /\.js$/,
use: [{ loader: "babel-loader" }],
exclude: /node_modules/,
},
{
test: /\.(jpg|png|svg)$/,
use: {
loader: "url-loader",
options: {
limit: 25000,
},
},
},
],
},
};

Run the project#

Run the following commands to start the application.

npm run build && npm run develop

Let's see how it looks: