topic Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production. in ArcGIS Web AppBuilder Questions

Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

IanPeebles — Mon, 11 Mar 2019 21:45:48 GMT

I am trying to get this package to work, but having difficulties getting started. I found out a new way on how improve the performance of WAB applications. I was referred to this documentation:

https://github.com/gbochenek/esri-wab-build/

I see the steps to follow, but not able to get these commands to run in command prompt. Which command prompt should I be using?

Are there any screenshots that somebody can provide, so I can follow along?

Would love to give this a try .

My web app builder is installed at: C:\GIS\arcgis-web-appbuilder-2.11\WebAppBuilderForArcGIS

Any help will greatly be appreciated.

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

RobertScheitlin__GISP — Tue, 12 Mar 2019 13:42:32 GMT

Have you installed the prerequisites?

Requirements:

Bower (validated with 1.8.0) installation : npm install -g bower
Nodejs (validated with 6.9.4)
Java 7 or greater
Git

having WAB does not mean that you actually have node installed.

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

IanPeebles — Tue, 12 Mar 2019 14:15:03 GMT

Hello Robert,

I did install Nodejs yesterday afternoon.

Do I need to go to the following location to get Bower? is that a local install as well?

https://bower.io/

I just ran the command:

I do have Java version 8 installed.

I am not sure what Git is

I guess when I get all these components installed, I go to the command prompt? That is where I am getting stuck. Install instructions for the pre-requisites would be useful.

Thank you for your help.

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

RobertScheitlin__GISP — Tue, 12 Mar 2019 14:32:24 GMT

Ian,

Go to the windows start button and the "Node.js" folder and "node.js command prompt"

For bower go to the command prompt above and enter "npm install -g bower"

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

IanPeebles — Tue, 12 Mar 2019 14:45:13 GMT

Robert, I have the nodejs command prompt:

In the regular CMD prompt, I did install Bower:

So now do I go to the nodejs command prompt?

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

RobertScheitlin__GISP — Tue, 12 Mar 2019 14:50:06 GMT

Just like I said in my last reply:

Go to the windows start button and the "Node.js" folder and "node.js command prompt"

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

IanPeebles — Tue, 12 Mar 2019 15:12:29 GMT

OK, thanks for the help so far, this is a learning experience and something new for me. Trying to document this as I go. So when following the steps

1. Navigate to the application to be built (I go through the file structure):

There is no package.json, yet.

2. Create a project.json file (if one does not exist): npm init

or do I create the file manually like in a notepad++?

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

RobertScheitlin__GISP — Tue, 12 Mar 2019 15:17:48 GMT

Do npm init and it will walk you through creating one.

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

IanPeebles — Tue, 12 Mar 2019 15:31:43 GMT

OK, this is where I am getting stuck.

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

RobertScheitlin__GISP — Tue, 12 Mar 2019 15:44:11 GMT

Ian,

The window that you are showing in your screen capture is Not the "node.js command prompt"... that is the "Node.js" link you clicked on.

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

IanPeebles — Tue, 12 Mar 2019 16:26:11 GMT

Alright, I decided to re-install nodejs to make sure everything is OK. So, starting from step #1:

1. Navigate to the application to be built

2. Create a project.json file (if one does not exist): npm init

So now where do I go from here?

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

RobertScheitlin__GISP — Tue, 12 Mar 2019 16:33:19 GMT

Ian,

If you are unsure what it is asking then just press enter.

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

IanPeebles — Tue, 12 Mar 2019 20:15:20 GMT

Robert, thank you much for your extensive help. I am getting further as I was able to create the package.json file through the nodejs command prompt.

I am here:

Add the following to your package.json's scripts object "build": "esri-wab-build" (Note: an optional parameter can be added to build a remote web app builder app. For Example: "esri-wab-build C:\arcgis-web-appbuilder-2.7\WebAppBuilderForArcGIS\server\apps\3")

When I open the package.json file, I have the following block of code:

I add "build": "esri-wab-build" to this block? I tried that, then tried to run"

npm install

npm run build

That created the dist folder, but no builtOut folder within.

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:31:06 GMT

Add to package.json's scripts object. so it looks something like this:

{
  "name": "pv28",
  "version": "1.0.0",
  "description": "WAB site build",
  "main": "env.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "esri-wab-build"
  },
  "keywords": [
    "Build"
  ],
  "author": "Me",
  "license": "None",
  "devDependencies": {
    "esri-wab-build": "^1.1.0"
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

IanPeebles — Wed, 13 Mar 2019 13:23:56 GMT

Robert, I was able to get the script to run and create the build. The zip file was created, then I extracted to an application directory on the server. When launching the application, it just hangs and there are errors in console mode. Really not sure where to go from here. Here are some screenshots:

1. NodeJS Completed Script in Command Prompt

2. Files Created in Application Directory (On Local Machine)

3. Streamlined Application File Structure Following the Extract from the app.zip file

4. Trying to load the application following the extract of the files:

I am further compared to where I was, but still no results.

My workflow is pretty simple:

1. I created the applications on my local machine, customize it as needed, and add in custom widgets.

2. Following the creation of the application, I deploy to a server and it works

This build process is not really intuitive. It would be nice to have some screenshots in prepping the dependencies and etc. I am sure it is a nice utility when it runs.

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

RobertScheitlin__GISP — Wed, 13 Mar 2019 13:41:53 GMT

Ian,

The buildOutput folder has an app folder and an app.zip in it right? For me the app.zip is normally corrupt when opening in WinZip so I always just copy the contents of the "buildOutput \app" folder over to my web server.

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

IanPeebles — Wed, 13 Mar 2019 13:55:19 GMT

Robert, there is a folder named app within the buildOutput folder. Here is a preview:

I then copied the contents to the app folder. When launching, it still fails to load, but I seem some interesting errors in console mode. Looks like a referencing issue?

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

RobertScheitlin__GISP — Wed, 13 Mar 2019 14:48:12 GMT

Ian,

The double reference to your machine name looks like a IIS deploy issue with the website.

Re: Trying to get this to work: Package used to build ESRI Web App Builder Apps for production.

M_TLBC — Fri, 26 Jul 2019 20:59:20 GMT

Hi Ian,

Did you ever figure out what the issue was? I have the exact same errors with the duplicate reference to the machine.

--Actually scratch that question. I was able to remove those errors in the init.js by changing the paths from window.apiURL to just window.url and concatenating the "arcgis-js-api" .

However, although those errors disappeared post, I am still getting a loading error. It's coming from the same file: init.js 201.

Have you or anyone else come across this problem? Did I break it by manually changing init.js?

Michelle