sevenlab-boilerplate-app v2.0.0

Boilerplate project using Ionic + Capacitor + Vite + Vue 3 Typescript

Demo Link

Dev URL

Issues

There is a warning npm throws with this boilerplate:

The above dynamic import cannot be analyzed by vite.

This is only a warning that vite can not analyse the dynamic import, there is no breaking features or stuff that does not work. And it seems to be an issue of Rollup (this is what vite uses under the hood).

There should not be any other warnings or errors.

Installation

Set correct nvm version: (not needed if you followed this guide to do this automatically, please do it)

nvm use

Install packages:

Install fontawesome. Get authtoken from: FontAwesome Account

npm config set "@fortawesome:registry" https://npm.fontawesome.com/

npm config set "//npm.fontawesome.com/:_authToken" <AUTHTOKEN>

npm i

If U use ionic cli globally make sure it's up to date:

npm uninstall -g ionic
npm i -g @ionic/cli

Usage

To just serve on web:

npm run serve

To build and open in Xcode or Android Studio:

npm run sync:<ios | android>:prod && ionic cap open <ios | android>
npm run sync:<ios | android>:stag && ionic cap open <ios | android>
npm run sync:<ios | android>:dev && ionic cap open <ios | android>

Or if you don't use ionic cli globally:

npx cap sync <ios | android> && npx cap open <ios | android>

⚠️To Live reload⚠️

For iOS first make sure you run at least once:

ionic cap sync ios && ionic cap open ios

And do a cmd + r or just press the ▶️ icon to build the app once (this is needed for live reload)\ After this is successfull you can close Xcode and continue with this guide. (You probralby need to set Signing & Capabilities to 7Lab)

So to live reload for an external device:

ionic cap run <ios | android> -l --external

And to live reload for an simulator:

ionic cap run <ios | android> -l

Then do a cmd + r in Xcode (ctrl on windows) or ctrl + r for Android studio!