Installation


  1. Create a top level folder, for example, C:/node.
  2. Install Node (which includes NPM).
    https://nodejs.org/en/
  3. Open the Node console.

    In Windows, Start > Node.js > Node.js command prompt > Run as Administrator.
    Change to your dev folder, for example:

    cd ../../node
    4. Install Ionic
    npm install ionic -g
  4. Install Ionic Vue

    Required ON: Router, history mode, node-sass.
    Recommended OFF: lint.

    npm install @vue/cli -g npm install vue-router -g npm install @ionic/vue -g npm install @ionic/core -g npm install ionic cordova -g npm install cordova-cli -g npm install ionic-webpack -g npm install ionic-native -g npm install @ionic-native/core -g

    Note: Some installs not prefixed with ionic will fail. For example, ionic-cordova plugin seems to be required, rather than just installing cordova.

  5. Patch icons
    https://github.com/ionic-team/ionic/issues/18640

    Rollback to previous version of icons. May also need to be done in individual project folders.

    npm install ionicons@4.5.9-1 -g
  6. Create a project

    vue create yourProjectName cd yourProjectName ionic init yourCOMPANYname

    Note: Your folder/project name doesn't matter. You can rename & copy folders and they will still work (after you restart the server from within the correct folder).

    Note: You do not have to run init on every new folder, if you are using a copy of the files.

  7. View your project

    Start the server:
    This starts local server without mobile view available, so just run this as a 'hello world' test.

    npm run serve

    Running a 'build' would create manifests and other items needed by each OS. If you were creating a production build, you would instead type:

    npm run build

    In browser, open:

    http://localhost:8080/

    To start server in future, use the CLI (always run as admin):

    cd ../../node/yourProjectName npm run serve
  8. Add Capacitor (for device operations like storage, camera, etc)

    These probably can be skipped, and already exist in our Github version.

    Switch to your folder & add Capacitor.

    cd ../../node/yourProjectName npm install @capacitor/core @capacitor/cli -g ionic integrations enable capacitor npm run build

    Note: It is important to run build before proceeding further.

    Open 'capacitor.config.json' and change 'webDir' value from 'www' to 'dist'.

    { "appId": "io.ionic.starter", "appName": "yourCOMPANYname", "bundledWebRuntime": false, "npmClient": "npm", "webDir": "dist" } ionic cap add ios ionic cap add android npm install @ionic/pwa-elements ionic cordova plugin add cordova-sqlite-storage npm install -g @ionic-native/sqlite npm install -g rxjs npm install -g @ionic-native/sqlite@4 npm install -g nativescript-sqlite

    If error [sass is missing]:

    cd ../../node npm i sass-loader -g npm i node-sass -g

    For mystery errors, try 'npm list' or 'npm list -g' to look for missing dependencies.

  9. Add Chrome devtools plugin for your desktop.
    https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
  10. Install devApp on your phone.
    Reference: https://ionicframework.com/docs/appflow/devapp
    Reference: https://github.com/ionic-team/ionic-cli/issues/3819

    In AppStore or GooglePlay, download the devApp onto your phone.

    Run CLI as admin:

    cd ../../node/ ionic init Project type: @ionic/vue

    Inside your folder, modify file ionic.config.json. Change type to custom.

    { "name": "aynax", "integrations": {}, "type": "custom" }

    Inside your folder, modify file package.json:

    "scripts": { "ionic:build": "vue-cli-service build", "ionic:serve": "vue-cli-service serve", "serve": "vue-cli-service serve", "build": "vue-cli-service build" }

    Start mobile server:

    In CLI, use this to start servers. Your app should appear on desktop, and devApp viewer, available on both Android and iOS.

    ionic serve --devapp

    To open server in future:

    cd ../../node/yourProjectName ionic serve --devapp
  11. PLUGINS

    These files should already be in our Github because they are installed in the project folder.

    cd ../../node/yourProjectName npm install axios vue-axios --save npm install vuex --save

    Add Stripe and camera support (undone)

    npm install @ionic-native/stripe npm install @ionic-native/camera ionic cordova plugin add cordova-plugin-camera
  12. DEPLOYMENT

    Doublecheck your manifest and permission requests. See files:

    /ios/App/App/Info.plist /android/capacitor-cordova-android-plugins/src/main/AndroidManifest.xml

    These files may exist in Github. If not 'npm run build' to create them.