Vue2 and Quasar Framework – one source code for browser and Mobile applications (.ipa – IOS and .apk – Android)

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 Weex at the top. But I focused on Quasar Framework (http://quasar-framework.org) and its unmatched possibilities that hit Weex’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. 

Why cordova works on quasar framework without any problems – because the secret lies in the well-written excellent qusar wrapper, that is responsible for generates of cordova source files project

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": "UUIDDevTeam",
            "packageType": "development"
        },
        "release": {
            "codeSignIdentity": "iPhone Developer",
            "developmentTeam": "UUIDDevTeam",
            "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 !!

September 6th, 2017

Tags:
  • I will check this out but when ever I see Cordova in these frameworks I think they can never be any good. All the ones that use Cordova never end up looking native. Great article though.

    • In the past I had also a lot of problems with cordova on ionic or another frmeworks – but on Quasar WORKS Excellent – According to me quasar wrapper is solidly written 🙂

  • Leave a Reply

    Your email address will not be published. Required fields are marked *