Version 4.4.1 of the JSDO is now available as an NPM package:

The NPM package for the JSDO contains the following library files:

  • progress.all.js
  • progress.jsdo.js

Minified versions and corresponding map files are also included in the package.

The file progress.all.js includes support for Kendo UI DataSource.
The file progress.jsdo.js can be used if support for Kendo UI is not required.

You can use the library files by just placing them in a folder in your web application and referring to them from your HTML file.

Example:

    <script src="lib/progress.all.min.js"></script>
    <script src="example014.js"></script>

Webpack provides another way to access the JSDO library. With this approach, you do not need to copy the library files to another location. 

You would import the NPM package into your application using the require() function in your JavaScript. Webpack would process the require() function and generate a bundle file for your app.
In the HTML file, you would point to the bundle file.

    <script src="./bundle.js"></script>

The webpack-dev-server provides a convenient way of working with the NPM package in your development environment. The server can watch for changes to source code and refresh the web application. The NPM package can be updated by just running npm update.

This article provides an introduction to using the NPM package for the JSDO with the webpack-dev-server.

The sample files used in this article can be downloaded from the Documents area and installed using the following commands:

Link

Installation

    unzip webapp
    cd webapp
    npm install
    node node_modules\webpack-dev-server\bin\webpack-dev-server.js

The zip file includes a package.json file with the dependencies. The npm install command will download dependencies, including webpack and webpack-dev-server. This operation may take a while.

You can access the example014.html file from http://localhost:8080.

Steps

The following sections show how to configure the NPM package for the JSDO with webpack-dev-server from scratch:

Creating a New Project Folder

To work with npm and webpack, create a new folder:
    mkdir webapp
    cd webapp
    npm init -f

The npm init command with the -f options creates a package.json file with default values. If you are sharing this app, you may want to update the various fields including description, author and license.

Installing the JSDO NPM package

To install the JSDO NPM package run the following npm command:
    npm install @progress/jsdo

Installing webpack-dev-server

The webpack-dev-server can be installed local to the project:

npm install webpack-dev-server webpack --dev-save

You can install webpack and webpack-dev-server globally using "npm install -g".

The "--dev-save" option is used to specify that that there is a dependency to webpack during development.

Installing Webpack loaders

npm install babel-loader babel-core babel-preset-es2015 html-loader raw-loader --save-dev

HTML file configuration

To HTML file refers to the bundle file (example: bundle.js).

<!DOCTYPE html> <html> <head> <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.blueopal.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.blueopal.mobile.min.css" /> <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script> <!-- <script src="lib/progress.all.min.js"></script> <script src="example014.js"></script> --> <script src="./bundle.js"></script> </head> <body> <h1>Customers</h1> <div id="example"> <div id="grid"></div> </div> </body> </html>

JavaScript Code

The JavaScript code uses the require() function to import the NPM package.

/*global alert, $, progress, require */ require("@progress/jsdo"); $(function () { 'use strict'; var serviceURI = "http://oemobiledemo.progress.com/OEMobileDemoServices"; var catalogURI = "http://oemobiledemo.progress.com/OEMobileDemoServices/static/CustomerService.json"; function createGrid() { console.log("DEBUG: createGrid(): [TEST] "); $('#grid').kendoGrid({ dataSource: { serverFiltering: true, serverSorting: true, serverPaging: true, type: "jsdo", transport: { jsdo: "Customer", countFnName: "count" }, error: function (e) { var messages = ""; if (e.errorThrown) { messages += e.errorThrown.message + "\n"; } e.sender.transport.jsdo.getErrors().forEach(function (err) { messages += err.error + "\n"; }); alert("Error: \n" + messages); } }, selectable: "multiple row", navigatable: true, filterable: true, height: 400, groupable: true, reorderable: true, resizable: true, sortable: true, pageable: { refresh: true, pageSizes: true, pageSize: 10, buttonCount: 5 }, editable: 'inline', toolbar: ['create'], columns: [ { field: 'CustNum', title: 'Cust Num', width: 100 }, {field: 'Name'}, {field: 'State'}, {field: 'Country'}, {command: ['edit', 'destroy'], title: '&nbsp;', width: '250px'} ] }); } try { // Create a new session object progress.data.getSession({ serviceURI: serviceURI, catalogURI: catalogURI, authenticationModel: "anonymous" }).then(function (/* jsdosession, result, info */) { createGrid(); }, function (/* jsdosession, result, info */) { alert("Error while creating session."); }); } catch (e) { alert("Error instantiating objects: " + e); } });

Webpack Configuration File

To work with webpack, you would need a configuration file called webpack.config.js.

This file contains the information on the bundle to build for the app and also loaders to preprocess files.

module.exports = {
    entry: './example014.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    },
    devServer: {
        port: 8080,
        contentBase: '.',
        watchContentBase: true
    }
};

Running the webpack-dev-server

You can run the webpack-dev-server using the following command:

node node_modules\webpack-dev-server\bin\webpack-dev-server.js

The webpack-dev-server is available at http://localhost:8080/ based on the configuration.

===