Thursday, 7 September, 2017 UTC


Summary

Recently I was looking for a framework for Vue / Vue2 where is possible to use one source code to create applications for browsers and mobile devices (both ios and android). My goal was to minimize writing separate apps to browsers and mobile devices. On websites we can find a list of professional tools from Weez at the top. But I focused on Quasar Framework (http://quasar-framework.org) and its unmatched possibilities that hit Weez’s head. That’s why I’d like today to sacrifice this article about quasar. My goal is to create one application that will work on different devices. I am most interested in working as mobile applications for IOS and Android as generated compiled packages.
Our main goal as You can see below: running application on browser, android and ios systems.
  Vue2 project on Quasar framework – creating html website
Let’s create our first Vue2 App.
At the beginning, we have to install quasar client package
$ npm install -g quasar-cli
Now, we will generate sample project bases on vue 2 and quasar
# create starter boilerplate folder
$ quasar init  
# example: quasar init default my-project
 
$ cd 
 
# npm install dependencies
$ npm install
Structure of generated project directories is following:
Presented solution uses two ways of generating destination transpiled page:
1. Debug mode   – server side rendering Vue 2 project in DEBUG mode, which is equipped with hot reload:
$ quasar dev [theme]
# start with 'mat' theme
$ quasar dev
# or
$ quasar dev mat
# start with 'ios' theme
$ quasar dev ios
You can see our application on all devices (also mobiles) as html website works perfect.
2. Release mode – destination solution is generated by Quasar before running server and copied into /dist directory. The Quasar client can pack everything together and optimize your App for production. It minifies source code, extracts vendor components and leverages browser cache, and much more.
# build for production
$ quasar build
# build for production with specific theme
$ quasar build mat
$ quasar build ios
According to Quasar documentation, very interesting is described features: “..You are able to create an ad-hoc web server to serve static-content web files from a folder. Browser sessions are automatically refreshed when content changes. User click/scroll can be synchronized…”
# Serve dist folder
# (must build app before that or else current folder will be served):
$ quasar serve
# ..or serve a full or relative path
$ quasar serve dist
$ quasar serve ./dist
$ quasar serve /work/quasar-app/dist
 
 
Vue2 project on Quasar framework – Quasar Play App
For created project Quasar delivers Quasar Play application,  accessible only for devices base on android system.  Main goal this application is developing our application directly on the phone.
$ quasar dev --play
 
After installation Quasar Play Application on Your physical mobile device working on android system and after running this app, You can add running server instance our app to Quasar Play by scanning presented scan code (screen above) or inputing url directly
Vue2 project on Quasar framework – creating mobile application for IOS and Android
Now, we can focus on the most interesting part of this post, generation of packages for ios and android devices. I assume that Android Studio and Xcode applications  have been installed and configured on uor local machine – so this step I will skip (more info on http://quasar-framework.org/guide/cordova-wrapper.html)
To generate mobile versions we will use Cordova Platform.
First install Cordova Platform on your machine:
$ npm install -g cordova
To transform a Quasar project into a working Cordova app, run command:
$ quasar wrap cordova
Come into cordova directory and install additional plugin cordova-plugin-crosswalk-webview.  It is highly recommended plugin to avoid problems  with unexpected behavior on older platforms.
$ cd cordova
$ cordova plugin add cordova-plugin-crosswalk-webview
Add android platform
$ cordova platform add android
Run android version on emulator
$ cordova run android
Build android .apk version
To build apk version run below command
cordova build --release android
You can find the apk file in
cordova > platforms > android > build > outputs > apk > android-arm7-release.apk
And here we go!! Our android version WORKS!!!!
Now, we will focus on IOS version. To create ios package You HAVE TO HAVE OS X System.  
Add ios platform
$ cordova platform add ios
Before running our app, please select physical attached device or installed simulator e.g. iPhone 7s Plus. You can list all names of devices and simulators  by following command
$ cordova run ios --list
Please take a look that first position it is physical iPhone connected to iMac machine – that means then we can running project also on our devices!!! 
To run  or deploy to physical device You have to have registered provisioning profile on https://developer.apple.com. It is necessary to signing our package
Run ios version on simulator.
$ cordova run ios --target="iPhone-7-Plus"
Run ios version on physical device e.g. iPhone.
$ cordova run ios --device
Build IOS .ipa version
Run ios version on physical device e.g. iPhone.
$ cordova run ios --device
Build .ipa package for physical device e.g. iPhone 7s Plus. If you are using cordova ios 3.9.0 or latest, you can use below command to create the .ipa directly from the CLI with no extra commands:
$ cordova build ios --device --release
You’ll need a build.json file on the root of your project
{
  "ios": {
    "debug": {
      "codeSignIdentity": "iPhone Developer",
      "provisioningProfile": "your-dev-provisioning-profile-UUID-here"
    },
    "release": {
      "codeSignIdentity": "iPhone Distribution",
      "provisioningProfile": "your-distribution-provisioning-profile-UUID-here"
    }
  }
}
If You are using Xcode 8 or latest version, the build.json needs developmentTeam field and packageType field, but not longer need the provisioning profile, also, the codeSignIdentity should be iPhone Developer for both debug and release:
{
    "ios": {
        "debug": {
            "codeSignIdentity": "iPhone Developer",
            "developmentTeam": "FG35JLLMXX4A",
            "packageType": "development"
        },
        "release": {
            "codeSignIdentity": "iPhone Developer",
            "developmentTeam": "FG35JLLMXX4A",
            "packageType": "app-store"
        }
    }
}
You can find the .ipa file in
cordova > platforms > ios > build > device
And here we go!! Our IOS version on iPhone 7 Plus  WORKS!!!!
In case of some problems / errors during running ios version You have to do:
– “Cannot read property ‘replace’ of undefined” – You must install ios-sim package
npm i -g ios-sim
– “The operation couldn’t be completed. (FBSOpenApplicationErrorDomain error 1.)” –  I suggest to use latest version of simulator eg. > ver 10.x, and problem will be solved
$ cd cordova
$ cordova plugin add cordova-plugin-crosswalk-webview
OR
1. Force quit the app in simulator
2. reset simulator

3. removed app from simulator
Conclusion: I have generated all packages without any problems. I saved a lot of time.  My applications works without any exceptions !!