build scripts for WAB app

[#1]

Use this script to build your app created by WAB developer edition.

[StanMcShinsky]

Junshan Liu could you explain more about what this does and how to implement it?

-Stan

[RebeccaStrauch__GISP]

This is from the readme.md

This script is for building app that by WAB.

===================================================

Why do you need to build your app?

------------------------------

Generally speaking, you may have 2 reasons:

* To speed up your app's loading performance.

* You do not want to share your source code to the end user.

How to run?

------------------------------

* Make user you have `Node.js` and `JRE` installed.

* Create a folder that is named `arcgis-js-api` under your app's root folder.

* Download Dojo Toolkit SDK and put `dojo`, `dijit`, `dojox`, `util` under `arcgis-js-api`. The folder tree looks like this:

```

  <app folder>

    |_arcgis-js-api

      |_dojo

      |_dijit

      |_dojox

      |_util

    |_buildScripts

```

* Open `cmd`, cd folder `buildScripts`, run `npm install`, then run `build.bat`.

* Waiting for the build process to complete. The build output will be available at `<app folder>/buildOutput` folder.

**Please note that bacause there is no ArcGIS JavaScript API source code available, there will be some errors when building, but the output works.**

[StanMcShinsky]

Interesting. I will have to give this a try.

-Stan

[RebeccaStrauch__GISP]

I haven't tried it yet either, but I agree it looks interesting.

[JeremieCornet1]

Thanks Junshan Liu ! It's a great tool !

Will this scripts be included and maintain with wab's releases ?

Or maybe available on github ?

NB 1 : I've tested it on a simple app and more than twice less files are loaded. Great !

NB  2 : for installation of dojo's dependencies (in arcgis-js-api), i have add it with bower :

Add to the buildScripts folder :

- .bowerrc file :

{

    "directory": "../arcgis-js-api"

}

- bower.json file :

{

  "name": "wab-builderscripts-dojo",

  "version": "0.1",

  "dependencies": {

    "dijit": "1.10.4",

    "dojo": "1.10.4",

    "dojox": "1.10.4",

    "util": "dojo-util#1.10.4"

  },

  "devDependencies": {}

}

And then, add in build.bat the bower's dependencies installation after node modules installation :

cmd /c "npm install"

cmd /c "bower install"

You must have bower installed in node.js (npm install -g bower).

[JeremieCornet1]

I don't manage to include custom widgets in build.

It seems the Widget.js compression failed. After build, the file content is just :

//>>built

If i watch in buildOutput\app-packages on build, i can see that the Widget.js.uncompressed.js is correct so i assume this is the js compression which failed.

If i replace the builded Widget.js content by Widget.js.uncompressed.js content, it works.

Any idea or advice ?

Example of widget with this problem :

magis-nc/esri-webappbuilder-widget-url · GitHub

[JunshanLiu]

It's very cool to add dependencies by using bower!

[JunshanLiu]

Could you have a look at the build-report.txt, this file should be in app-packages folder.

You can find details about the build process in this file. If there is an error, you should find it in this file.

[JeremieCornet1]

Thanks,

An error :

Widget.js.uncompressed.js:45: ERROR - Parse error. IE8 (and below) will parse trailing commas in array and object literals incorrectly. If you are targeting newer versions of JS, set the appropriate language_in option.

          name: 'Url',

Google closure compiler failed to minify the Widget.js.uncompressed.js

By using in _app.profile.js 'comments' for optmize and layerOptimize (instead of closure), it works.

I will try to find what is wrong in my js file for google closure (I will made some test directly with google closure).

[JunshanLiu]

Remove the last comma resolve your issue?

[JeremieCornet1]

This line wasn't a last comma.

I passed the widget.js file in Closure Compiler Service to see errors and there were 2 "last comma" errors but not in the lines that were in the build-report.txt (strange !).

After removing this 2 errors, it works like a charm for js. I have some parts of my widget's css that doesn't pass yet in compiler but i will fix this.

Thanks Junshan Liu​ !

[KacieBaker]

We heard about this at the UC and love the idea. The build worked for us except for with the custom widgets such as eSearch (it copies over, but the widget breaks because it cant find the css, string.js or widget.html). What will we need to do to have the custom widgets included in the buildOutput besides simply copying the missing files over? We like the idea of not sharing our source code for certain applications we have.

[JeremieCornet1]

In build, the eSearch Widget.js is empty (except comments).

It's a js syntax issue which fails the google closure compilation.

When adding custom widgets in build, you could verify js files in Closure Compiler Service to see errors that will cause compilation failures.

I pass the eSearch Widget.js in this service and there is one error on line 2036.

Replace this line with

if (this.map && this.map.infoWindow) {

[KacieBaker]

​Thank you Jeremie. We made the change the compiler showed as an error, ran it through the compiler again with 0 errors, then ran the build and only the Search still wont build. When looking through the build-report.txt we notice a lot (100 or so) of "parse error - syntax errors" for widget.js, even before we add any of our own data. It doesn't seem like anyone else is having this issue though, any suggestions?

[JeremieCornet1]

Sometimes, it seems what you must correct warnings too.

With the last version of eSearch Widget, there is one warning on line 736 :

Replace this.nls.continue with this.nls["continue"]

I've tried with this correction and the widget is succesfully built.

[RobertScheitlin__GISP]

Hmm.. I wonder if continue is a reserved word are a function name in compiler?

Never mind I see the error, so it is a keyword issue

Keywords and reserved words are not allowed as unquoted property names in older versions of JavaScript. If you are targeting newer versions of JavaScript, set the appropriate language_in option. at line 736 character 32
  label: this.nls.continue,


[RebeccaStrauch__GISP]

New version from Junshan Liu  for 1.2 available  buildScripts-1.2.zip

[JunshanLiu]

For 1.3: buildScripts-1.3.zip