Codakey
Play
← Back to flightjs/flight

How to Deploy & Use flightjs/flight

Flight.js Deployment and Usage Guide

Important Notice: Flight is not under active development. New pull requests are only accepted for core bugs or security issues. Consider this for maintenance-mode projects or legacy compatibility needs.

Prerequisites

Runtime Dependencies

  • jQuery 1.7+ (Required): Flight is built on top of jQuery
  • AMD Loader: RequireJS or similar (for module-based development)
  • ES5-shim: Required for Internet Explorer 7-8 support

Development Tools

  • Node.js (v0.10+ recommended) and npm
  • Bower (optional, for client-side package management)
  • Yo (optional, for generators): npm install -g yo

Browser Support

  • Chrome, Firefox, Safari, Opera (latest versions)
  • Internet Explorer 7+ (with ES5-shim)

Installation

Method 1: CDN (Quick Start)

For prototyping or simple projects, use the pre-built UMD bundle:

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Flight release -->
<script src="http://flightjs.github.io/release/latest/flight.min.js"></script>

Access Flight via the global flight object:

var Component = flight.component(myComponent);

Method 2: npm (Recommended for Build Pipelines)

npm install --save flightjs

Method 3: Bower (Legacy Projects)

bower install --save flight

Method 4: Generator (Full Application Setup)

Install the Flight generator for scaffolding:

npm install -g generator-flight
yo flight my-app
cd my-app
npm install
bower install

For standalone component development:

npm install -g generator-flight-package
yo flight-package my-component

Configuration

AMD/RequireJS Setup

Configure paths in your require.config.js:

require.config({
  paths: {
    'jquery': 'path/to/jquery',
    'flight': 'path/to/flight/lib'
  }
});

Component Definition Pattern

Flight uses AMD modules. A typical component structure:

// components/my_component.js
define(function(require) {
  'use strict';
  
  var defineComponent = require('flight/lib/component');
  
  return defineComponent(myComponent);
  
  function myComponent() {
    this.attributes({
      foo: 'defaultValue'
    });
    
    this.after('initialize', function() {
      this.on('click', this.handleClick);
    });
    
    this.handleClick = function() {
      // implementation
    };
  }
});

Debug Mode

Enable debugging to trace component events and lifecycle:

// Enable debug mode
require(['flight/lib/debug'], function(debug) {
  debug.enable(true);
});

Build & Run

Development Workflow

1. Start a local server: Since Flight requires AMD modules, serve files via HTTP:

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# Node.js
npx http-server

2. Load your application: Create an index.html that bootstraps RequireJS:

<!DOCTYPE html>
<html>
<head>
  <script data-main="app/main" src="lib/require.js"></script>
</head>
<body>
  <div id="component-container"></div>
</body>
</html>

3. Bootstrap in main.js:

// app/main.js
require(['jquery', 'components/my_component'], function($, MyComponent) {
  $(document).ready(function() {
    MyComponent.attachTo('#component-container', {
      customAttr: 'value'
    });
  });
});

Testing Setup

Jasmine:

npm install --save-dev jasmine-flight

// spec/my_component_spec.js
describeComponent('components/my_component', function() {
  beforeEach(function() {
    setupComponent('<div id="test"></div>');
  });
  
  it('should handle click events', function() {
    spyOnEvent(this.component.node, 'customEvent');
    this.component.$node.click();
    expect('customEvent').toHaveBeenTriggeredOn(this.component.node);
  });
});

Mocha:

npm install --save-dev mocha-flight

Production Build

RequireJS Optimizer (r.js): Create a build.js configuration:

({
  baseUrl: '.',
  paths: {
    'jquery': 'empty:', // Exclude from build, load from CDN
    'flight': 'lib/flight/lib'
  },
  name: 'app/main',
  out: 'dist/main-built.js',
  removeCombined: true,
  findNestedDependencies: true
})

Run the build:

npm install -g requirejs
r.js -o build.js

Update HTML for production:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="dist/main-built.js"></script>

Deployment

Flight is a client-side framework requiring only static file hosting. No server-side runtime is needed.

Static Hosting Options

GitHub Pages:

# Build your project
r.js -o build.js

# Push to gh-pages branch
git subtree push --prefix dist origin gh-pages

Netlify:

  1. Build command: r.js -o build.js
  2. Publish directory: dist
  3. Deploy with drag-and-drop or git integration

AWS S3:

# Sync built files to S3 bucket
aws s3 sync dist/ s3://my-flight-app-bucket --acl public-read

Traditional Web Server: Upload the built files to any web server (Apache, Nginx, IIS):

# Nginx configuration
server {
    listen 80;
    server_name myapp.com;
    root /var/www/flight-app/dist;
    index index.html;
    
    location / {
        try_files $uri $uri/ =404;
    }
}

CDN Integration

For production, load jQuery from a CDN and your built Flight app separately:

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
          integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
          crossorigin="anonymous"></script>
  <script src="/js/app-built.min.js"></script>
</head>
<body>
  <!-- Your markup -->
</body>
</html>

Troubleshooting

Common Issues

"Component needs to be attachTo'd a jQuery object, native node or selector string"

  • Ensure jQuery is loaded before Flight
  • Check that your selector matches an existing DOM element
  • Verify the element exists before calling attachTo

"define is not defined" (AMD/RequireJS errors)

  • Ensure RequireJS is loaded before your Flight modules
  • Check data-main attribute points to correct entry file
  • Verify paths configuration includes jQuery and Flight locations

Events not triggering between components

  • Ensure both components are attached to the DOM
  • Check event names match exactly (case-sensitive)
  • Verify the event is being triggered on a DOM node, not just the component instance

IE 7/8 Compatibility Issues

  • Include ES5-shim before Flight: 
    <!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.9/es5-shim.min.js"></script>
<![endif]-->
  • Ensure jQuery 1.x is used for IE 6-8 support (jQuery 2.x+ drops IE 6-8)

Component methods not available

  • Remember that Flight uses mixins and this context
  • Ensure methods are defined on the component function, not outside
  • Check that initialize uses this.after or this.before correctly

Memory leaks

  • Always call teardown() when removing DOM nodes that have components attached
  • Use this.off() to remove specific event listeners if detaching manually
  • The registry automatically tracks instances, but manual cleanup is needed for dynamic UIs

Debug Mode

Enable debug mode to trace component lifecycle and events:

require(['flight/lib/debug'], function(debug) {
  debug.enable(true);
  debug.events.logAll(); // Log all events
});

Getting Help

Note: As Flight is in maintenance mode, consider modern alternatives like React, Vue, or native Web Components for new projects.

← Project overviewView alternatives to flightjs/flight →