runisland:ionic4

v5.4.0-rc.2Published last year

runisland:ionic4

Meteor Atmosphere package that automatically imports Ionic4 Web Components (i.e. @ionic/core) into your Client templates.

GitHub releases

Quick Guide

  1. Add this package to your Meteor project: meteor add runisland:ionic4

That is it!

Test on mobile device

If you want to access your development machine localhost from another machine (typically from a mobile device), you must explicitly specify the ROOT_URL environment variable:

Linux or macOS:

$ ROOT_URL="http://<ip-address>:<port>" meteor run

Windows:

$ set ROOT_URL="http://<ip-address>:<port>" && meteor run

where:

  • <ip-address> is the IP of your dev machine (e.g. 192.168.1.10)
  • <port> is the port of your localhost (typically 3000)

Example apps

  • With Blaze:

  • With Vue:

How does it work?

The package automatically bundles the @ionic/core loader into your Meteor App, exposes Ionic assets, and tells the loader where to find them.

Yep, starting with version 4, Ionic has its own lazy-loading mechanism.

Therefore there is nothing else to import in your app.

Ionic4 will Just WorkTM, whether you use Blaze, React, Vue, Angular, etc.

Custom tags configuration

Note that you may still need to configure your template engine so that it knows what to do with Ionic's custom tags (you probably just want the engine to ignore them).

For example in Vue:

1// Ignore tags that start with "ion-"
2Vue.config.ignoredElements = [/^ion-/];

Blaze uses a different component syntax ({{> myComponent}}), therefore it does not interfere with Ionic4 Web Components (like <ion-app>). As a consequence there is nothing to configure if you use Blaze.

Build

Go to the package subfolder and build:

$ cd package
$ npm run build

Overriding with a local version

Cf. Overriding published packages with a local version

  1. Create a packages folder at the root of your Meteor project.
  2. Create a subfolder in it to host your local version of this package. E.g. name it "meteor-ionic4".
  3. Copy the content of the package subfolder of the runisland:ionic4 package repository into this "meteor-ionic4" subfolder.
  4. Navigate to this subfolder and execute the build script, so that it retrieves the Ionic4 assets:
$ cd packages/meteor-ionic4
$ npm run build

If you want to load a different version of @ionic/core (e.g. if the package author no longer updates it in the Atmosphere registry), simply update the version in devDependencies field of the package.json file, then re-run the build script.

License

license

runisland:ionic4 is distributed under the MIT License (Expat type), like Ionic and Meteor.