Mediafly Interactives
Install
Option 1: Global install (if you are not using build tools such as gulp)
Enter the following in the terminal
$ npm install -g mfly-interactive
Run in the folder where the Interactive is located.
$ mfly-interactive serve
Option 2: Local install (if you have gulp, grunt, etc. with a static file server)
This package can also be used as a node.js middleware. You can plug in this middleware in the static file server responsible for serving up your Interactive.
Enter the following in the terminal
$ npm install mfly-interactive --save-dev
Here is an example of how to set up a BrowserSync server. The same can be done with any connect server as well. Here, the middleware provided by mfly-interactive
can be supplied to your server.
var browserSync = require("browser-sync")
var options = require('./mfly-interactive.config.json')
//Viewer slug is required here
options.slug = '{VIEWER_SLUG}'
var viewerMiddleware = require('mfly-interactive')(options)
browserSync({
files: 'app/**',
https: true,
server: {
baseDir: './app',
middleware: [
viewerMiddleware
]
}
})
Initialize
- Upload the Interactive into Airship
- Run
mfly-interactive init
. See Explanation for required parameters for details on how to find information requested by this command.
Note: The init
command creates mfly-interactive.config.json
at the root of your Interactive. mfly-interactive.config.json
contains Airship user specific information. Be sure to add it to your .gitignore
file.
Please note that local changes to the Interactive will not update the uploaded Interactive. When finished making changes, you will need to upload the Interactive in Airship again.
Testing Interactives on iOS (Availability: iOS (662))
Note: Only the Interactives that leverage the new HTTP scheme are supported.
mfly-interactive can speed up testing of Interactives on iOS. Specifically it provides the following 2 features:
- Interactives will live reload in the iOS app upon file save.
- JavaScript
console
messages from the iOS WebView will be shown in the terminal.
Steps to set this up:
- Ensure
mfly-interactive serve
command is running. - Open the iOS app and tap
Settings > More > About
on the bottom. - You should see a
Select Server
dialog. Select the correct server based on your IP address. - Navigate to the specific Interactive you are working on.
- Open the Interactive.
Now you are set to test your Interactive on iOS. Turn off the debugging proxy by following the same steps above.
Packaging an Interactive
While the publish
command will package and upload the Interactive, mfly-interactive
can only package the Interactive as well by running:
$ mfly-interactive release
Publishing an Interactive
Once you are ready to test the Interactive on other platforms, or if you are ready to publish it for your users, you can publish it by using the following command.
$ mfly-interactive publish
Open Interactive in Airship or Viewer
You can navigate to the Interactive in Airship or Viewer by using the open
command by running:
mfly-interactive open airship
mfly-interactive open viewer
Using multiple config files (requires v1.7.1)
When you are using build tools such as Grunt, or Gulp, and compiling your single page application to a folder such as dist
, you may not want the mfly-interactive.config.json
file in your dist
folder.
This folder could be deleted and recreated during a file watch trigger that recompiles the whole app. In this case, you can put your config file in the parent folder of the dist
folder, and point mfly-interactive
at that config file.
You can supply a --config
option to mfly-interactive
.
Another use case for being able to use multiple config files is when you are managing multiple Interactives uploaded in Airship (for development, staging, production, etc.)
Below are some examples:
mfly-interactive serve --config ../mfly-interactive.config.json
mfly-interactive publish --config ../config/mfly-interactive-prod.config.json
Explanation for Required Parameters
- Airship User ID and Password: Credentials used to log into https://airship.mediafly.com
- Airship Item Id: This is the Id for the Interactive in Airship. You can locate it by navigating to the item in Airship and extractig it from the URL. In the following example, the Airship item Id is 0-265955-265962.
- Company Code: Company code used in Viewer.
Reconfiguring
It is possible that the Airship Item Id or the Viewer slug of the your Interactive changes. In this case, you will need to reconfigure the Interactive. You can do this by runninig mfly-interactive init
again.
A note on HTTPS
Your browser will show a warning about HTTPs. Ignore this warning.