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.
Normally you would have a project root folder and inside that your package.json and also your source folder and a "node_modules" folder - it will be this , most likely, that has thousands upon thousands of files in. This is because that's where NPM pulls the code for all the dependencies and it gets enormous! Do NOT map your project root folder to the IFS - this folder should be a local folder on your PC!! As part of your CLI you should have scripts to build and run the project in both debug and live modes (in Angular it's "> npm run start" to start a development build), you'll see the script names if you look in the "scripts" key of the package.json. Usually, during development, a development server is run on your PC when you do "> npm run start" and your project is built and served up from that so you do not need to keep copying stuff to your IBM i in order to test it, and every time you change your source it will automatically be rebuilt and deployed to your local test server, pretty much instantly. There is one caveat to this which I will come back to later.
Once you are ready to deploy your application to the IBM i you also need to build it. In Angular this is done (currently) using Webpack which does lots of cool things. Among them are
* compiling the Typescript code into plain Javascript
* bringing in dependent code
* assembling the code into one or more modules
* minifying the code
The upshot of all this will be a /dist folder (or similar) in your project root when you will find all of the code (and ONLY) the code and other artefacts that need to be deployed to your IBM i - this will most likely be a handful of files, including all of the Javascript and amount to a few tens or hundreds of KB at most. It is the contents of this folder that you should copy to your IBM i. What might not be clear from the above is that Webpack will figure out which JS functions you are depending on and will only include that code so your 15,000 NPM files gets picked over and only the code you actually use will be copied into your final build. A brief look at the Vue CLI website tells me that it also uses webpack so this process will almost certainly be similar. The key points are:
* Do not try to map your project folder to the IFS and store the project there - it's wrong to do so and NPM will murder it!
* Use the CLI to run a local dev server on your PC which will automatically rebuild and refresh on every code change you make - you will see your changes almost immediately
* Only deploy to the IBM i the contents of the folder that is created as the result of a build
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://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Flists.midrange.com%2Fmailman%2Flistinfo%2Fweb400&data=02%7C01%7C%7C6239f626bf604b8e0b5c08d682e3a4b2%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636840311558379359&sdata=IXmu%2BibDKOjA8GX6NeSTrTSWAXZb8TRn827Nl1rrGHg%3D&reserved=0
or email: WEB400-request@xxxxxxxxxxxxxxxxxx
Before posting, please take a moment to review the archives
at
https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Farchive.midrange.com%2Fweb400&data=02%7C01%7C%7C6239f626bf604b8e0b5c08d682e3a4b2%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636840311558379359&sdata=aQQ5YG2Z0rRdjXsCv8RjHdJAO9mwv7feY7%2BO6VgjqTo%3D&reserved=0.
midrange.com
