Re: best way to build a web page app on ibm i using a CLI

What you're doing is very similar to what we also do, except we use our own little framework instead of the PHP part you have done, but the SP and SPA concept is the same.

It's not entirely clear to me at what absolute URL your web-service is to be found, but I'm assuming that the ../../../ part of the URL is to get you back to the root, so your PHP web service is to be found at:

your.ibmi.com/site/common/json_CallProc.php

in which case it's not necessary to use the "../../../" you can simply use "GET /site/common/json_CallProc.php". This is still relative to the host but starts at the root. You can then set-up the dev server to forward any URL that starts "/site/common" (or whatever is enough to uniquely identify the path to your API) to the backend. My Angular set-up is like this in proxy.config.json:

{
"/webspi": {
"target": "http://ouribmi-europe.local:8080";,
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}

Where "webspi" is the URL under which our APIs live (so your PHP stuff) and the target is the IBM i. Now what happens is that the Angular development server running on the PC will serve up the web app from the local drive EXCEPT when it sees a URL that matches (or part-matches) "/webspi", is these cases the requests are forwarded to the IBM i. So when my app makes a request like this "POST /webspi/sp/default/CUST_SP_Query", the local dev server intercepts it and forwards it to "http://ouribmi-europe.local:8080/webspi/sp/default/CUST_SP_Query";. This is quite similar to the reverse proxying set-up I explained to Booth in another thread, except his was done on the Apache server.

Incidentally, I would use a POST request not a GET request to your API if you wish to be a little more RESTful, GET requests are not supposed to contain a request body and they are also supposed to be idempotent and safe, that is to say, they are not expected to make changes to the database. In your (and my) case, you are executing a stored procedure not GETting a resource, so POST is the better choice here. We use a GET request to a procedure to document it, so if you do a GET
to http://ouribmi-europe.local:8080/webspi/sp/default/CUST_SP_Query you'll get back a JSON structure describing the parameters of the procedure.

Tim.


________________________________
From: WEB400 <web400-bounces@xxxxxxxxxxxxxxxxxx> on behalf of Steve Richter <stephenrichter@xxxxxxxxx>
Sent: 25 January 2019 20:14
To: Web Enabling the IBM i (AS/400 and iSeries)
Subject: Re: [WEB400] best way to build a web page app on ibm i using a CLI

this make sense. thanks.

the live dev server is what I am thinking about.

I use $.ajax to call a PHP web service. This is done so the SPA web page
can call up to the server and get some data from DB2 The web service is
passed the name of an SQL procedure to run on the IBM i. And the web
service then runs db2_connect and db2_execute to call the sql procedure.
The PHP web service then returns the result set from that SQL procedure as
JSON data to the SPA javascript code.

The web service PHP is located at
"../../../site/common/json_CallProc.php". But if running on the local dev
server that PHP page must be on the dev server? Or do I have to change
the URL of the web service to an absolute path?

Should I be doing this a different way? I do not see how it can work from
a dev server. Even if I solve the cross site scripting problem.

here is what the $.ajax call to the PHP web service looks like:

$.ajax(
{
type: 'GET',
url: "../../../site/common/json_CallProc.php",
data: {
proc: 'poReq_createRequisition', libl: libl,
parm1: cono, parm2: itcl, parm3: itsc, parm4: vnno,
parm5: reqnum, parm6: whid, parm7:buyr, parm8:userName,
debug: 'Y', joblog
},
cache: false,
success: function (text)
{
let rows = JSON.parse(text);
resolve( rows );
},
dataType: 'text'
});




On Fri, Jan 25, 2019 at 1:03 PM Tim Fathers <X700-IX2J@xxxxxxxxxxx> wrote:

I'm not sure if this post will be much help or not because I don't use Vue
I use Angular, but I suspect the basic principles are similar.


I mentioned above a small caveat, that is that you will run into a cross
site scripting error or your backed just won't be reachable when you are
serving your web app from the local server during development. In order to
fix this you must change the settings of your local server to forward your
API requests to the IBM i backend. How you do this depends on what server
is built into the Vue CLI but if you get stuck I can probably figure out
how to do it.

If I get a chance I will make a small Vue project and could then probably
give you some more accurate info, but I hope this is of some use in the
meantime.

Tim.






________________________________
From: WEB400 <web400-bounces@xxxxxxxxxxxxxxxxxx> on behalf of Steve
Richter <stephenrichter@xxxxxxxxx>
Sent: 25 January 2019 17:38
To: Web Enabling the AS400 / iSeries
Subject: [WEB400] best way to build a web page app on ibm i using a CLI

I have been using vue.js to write SPA type web apps for the IBM i. Been
getting terrific results. The advantage of vue over react and angular being
you do not need to use a CLI to create a web page. Just use a <script> tag
to access the vue framework.

But I would like to use a CLI. That is where all the tooling is. Things
like babel, typescript, ES6 modules. webpack partial loading. So I would
like to give the VUE CLI a try.

Problem is, running vue cli to setup a basic project created 15,000 files
in the project folder. Running VUE CREATE ( vue cli command used to create
a vue project ) took over 5 minutes when I set the current directory to the
IFS HOME folder. And for that entire time there were QZLSFILET jobs
running on the IBM i. I worry the IBM i will not be able to handle so many
files in the IFS, that the CPU usage will impact other users.

My setup is that node, npm and the vue cli are installed on my windows PC.
I map a network drive from the PC to the IBM i. Then to create the web
project using the vue cli I start powershell, set the current drive to the
mapped IFS drive, and run VUE CREATE project_name.

This worked. But all the files on the IFS? And 5 minutes to create the
project.

Are there other ways to do this? I figure I have to have the entire
project folder within the htdocs folder of the PHP web server on the IBM i.

thanks,
--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
list
To post a message email: WEB400@xxxxxxxxxxxxxxxxxx
To subscribe, unsubscribe, or change list options,
visit:
https://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Feur04.safelinks.protection.outlook.com%2F%3Furl%3Dhttps%253A%252F%252Flists.midrange.com%252Fmailman%252Flistinfo%252Fweb400%26data%3D02%257C01%257C%257C6239f626bf604b8e0b5c08d682e3a4b2%257C84df9e7fe9f640afb435aaaaaaaaaaaa%257C1%257C0%257C636840311558379359%26sdata%3DIXmu%252BibDKOjA8GX6NeSTrTSWAXZb8TRn827Nl1rrGHg%253D%26reserved%3D0&amp;data=02%7C01%7C%7Cd4b8e88efe7a493329d808d682f9653d%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636840404992535829&amp;sdata=hDzix34fVWz0l%2BHULndznVVL%2FHDc5wHL7MRTLteeQ0M%3D&amp;reserved=0
or email: WEB400-request@xxxxxxxxxxxxxxxxxx
Before posting, please take a moment to review the archives
at
https://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Feur04.safelinks.protection.outlook.com%2F%3Furl%3Dhttps%253A%252F%252Farchive.midrange.com%252Fweb400%26data%3D02%257C01%257C%257C6239f626bf604b8e0b5c08d682e3a4b2%257C84df9e7fe9f640afb435aaaaaaaaaaaa%257C1%257C0%257C636840311558379359%26sdata%3DaQQ5YG2Z0rRdjXsCv8RjHdJAO9mwv7feY7%252BO6VgjqTo%253D%26reserved%3D0&amp;data=02%7C01%7C%7Cd4b8e88efe7a493329d808d682f9653d%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636840404992545840&amp;sdata=eB7qMrV1pOnG3jbPg5KwmRJ%2F1XJ9wYK4MYuZClv4QO8%3D&amp;reserved=0
.

--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
list
To post a message email: WEB400@xxxxxxxxxxxxxxxxxx
To subscribe, unsubscribe, or change list options,
visit: https://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Flists.midrange.com%2Fmailman%2Flistinfo%2Fweb400&amp;data=02%7C01%7C%7Cd4b8e88efe7a493329d808d682f9653d%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636840404992545840&amp;sdata=7tiqUGeMKw4Btv7UeP9J%2FDv6cQjapYL%2BvFExuM2YvRg%3D&amp;reserved=0
or email: WEB400-request@xxxxxxxxxxxxxxxxxx
Before posting, please take a moment to review the archives
at https://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Farchive.midrange.com%2Fweb400&amp;data=02%7C01%7C%7Cd4b8e88efe7a493329d808d682f9653d%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636840404992545840&amp;sdata=xQrUTbyXU%2F5mXC01LteBaw%2FzmnVS5gGF8Mx5nZrzq8g%3D&amp;reserved=0.

--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing list
To post a message email: WEB400@xxxxxxxxxxxxxxxxxx
To subscribe, unsubscribe, or change list options,
visit: https://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Flists.midrange.com%2Fmailman%2Flistinfo%2Fweb400&amp;data=02%7C01%7C%7Cd4b8e88efe7a493329d808d682f9653d%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636840404992545840&amp;sdata=7tiqUGeMKw4Btv7UeP9J%2FDv6cQjapYL%2BvFExuM2YvRg%3D&amp;reserved=0
or email: WEB400-request@xxxxxxxxxxxxxxxxxx
Before posting, please take a moment to review the archives
at https://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Farchive.midrange.com%2Fweb400&amp;data=02%7C01%7C%7Cd4b8e88efe7a493329d808d682f9653d%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636840404992555851&amp;sdata=IpVMTRd4FdKEmJy%2FkrnRsQvdXchTHXWQArZnSzcRZa4%3D&amp;reserved=0.