Using NPM Packages in Titanium

0 Flares 0 Flares ×

Let’s begin with the fact that the above – Using NPM Packages in Titanium – is possible. Yep, it truly is. I noticed a lot of people were unaware of the fact they could just plug in any NPM package they wanted.

So… how do we set this up?
  1. Run npm init in the app/lib folder in your Alloy project, or in your Resources folder if you use a classic app (if you still do, time to move to Alloy though!).
  2. Follow the steps NPM gives you when doing the init. You don’t have to fill out anything
  3. Run npm i [packagename] in the lib folder to install a package, let’s say to.imagecache, so npm i to.imagecache.
  4. Add the lib/node_modules folder and the package-lock.json file to your .gitignore folder. No need to commit all these files when they can be restored easily.
  5. On any other machine you want to set this up, just go to your lib folder, run npm install and all packages will be installed to your app.

Usage of Packages

The usage is like any other module or lib file. Assuming you’ve installed to.imagecache, you can just include it like this:
var imageCache = require('to.imagecache');
  Because node modules are automatically found, it’ll work just as expected.

How to Find the Packages?

A lot of Titanium packages are found using the titanium keyword. However, to get more organised I’ve created the titanium-module keyword. When you’re creating a commonjs module/lib file that you want to share, please please publish it using the titanium-module keyword. You can find the packages here: https://www.npmjs.com/search?q=keywords:titanium-module As of now, there are just a couple packages, all in my name, using the keyword. However, I hope (and expect) more will be following soon. So if you’re a writer of modules, use NPM and publish it with the titanium-module keyword!

Dependencies

Now comes a fun part. Dependencies! For the purpose of demonstration, I’ve created a package that extends to.imagecache for the purpose of having an ImageView that caches its own image with async loading. I’ve named this package to.cachedimageview and implementation is really simple.
  • Run npm i to.cachedimageview in your lib folder (or Resources for classic project).
  • This will install both to.cachedimageview and to.imagecache as the latter is dependent on the first.
  • Then all you need to do is use it in an ImageView like this:
    <ImageView id="myImage" module="to.cachedimageview" />

Your Turn

Now, it’s up to you. Start making awesome packages, extend the best packages out there and share them all below, on TiSlack and write blogposts about them!

Packages Available Now

And, if you are in the Amsterdam area next week, join us for the Titanium Netherlands Dev Meetup – where we’ll talk more about NPM and ES6 – RSVP
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×

10 Comments

  1. George

    I still prefer Classic over Alloy. Codebase in alloy is all over the place.

  2. Brian

    Does this work for including libraries like the latest moment.js? I tried to but get this error:

    [ERROR] Failed to parse /Dev/app/Resources/iphone/node_modules/moment/src/lib/create/check-overflow.js
    [ERROR] ‘import’ and ‘export’ may appear only with ‘sourceType: “module”’ (1:0)

    • Rene Pot

      Hi Brian, moment is included in Alloy by default, you can require it using require(‘/alloy/moment’)

      • Brian

        Alloy doesn’t always have the latest moment.js and we also use moment-timezone which is not included in Alloy. How can we get around this error?

        • Rene Pot

          If you look at the moment-timezone sourcecode (https://github.com/moment/moment-timezone/blob/develop/moment-timezone.js) you’ll see it does a require on moment.js

          If you replace require(‘moment’) with require(‘alloy/moment’) it works fine.

          If you want a more updated version, override moment by putting it in the folder like lib/alloy/moment.js and you’ll have a new version.

          • Brian

            How do we use only npm and not get errors like this? Will this be fixed in a future release?

  3. Steve

    Looks like this takes the complete node_modules dir and embeds it into the final javascript code including all the dist dir files- if there, the zips, read me etc, etc.

    If starting to use this as a means of adding libraries/modules could this not be a bit of an expensive overhead in terms of app size and redundant files ?

    Maybe if using this method the Titanium npm packages should be kept as lean as possible.

  4. Daniel

    This was news to me, so I like it. One thing I’ve been struggling to do is write an app that uses the OAuth2 client authorization. NPM has a solution ready for me to pull off the shelf: oauth20

    So, I made a fresh Appcelerator app, visited the lib directory, ran “npm init” on the empty directory, hit enter for all the prompts to get the defaults. Then did an “npm i oauth20” which indeed seemed to get a bunch of stuff. Added a oauth20 = require(‘oauth20’) to my index.js and saw what happens when I ran.

    The run failed, and I got little red Xs on app/ lib/ node_modules/ ajv/ dist/ and some source files to name a few.

    What am I doing wrong?

    • Rene Pot

      Red X’s usually mean javascript errors. Most likely the packages are ES6, for which you need to enable in your tiapp. Furthermore, looking at the dependencies of the module you linked, I think they depend on core-node modules, which isn’t supported (I haven’t checked the full list of dependencies, but there are a lot)

      Also try looking into this, might help you as well https://www.npmjs.com/package/titaniumifier

      • Daniel

        Thanks, I’ll have to see how much work that’ll take. 😉

        Any thoughts on how I can find a working OAuth2 client autorization implementation I can just use in Titanium? This was just a nice potential way to get there.

Comments are closed.

Sign up for our blog!

computer and tablet showing Appcelerator software
Start free, grow from there.
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×