happyfox-web-addons v0.0.0

Happyfox Addons

Common happyfox components published as addons.

Installation

• git clone <repository-url> this repository
• change into the new directory
• Run yarn

Generating an addon

To generate or setup an addon using our custom blueprint

ember addon <addon-name> -b ./blueprints --skip-git --yarn

-b: generates ember addon using a custom blueprint. ./blueprints is the source of our custom blueprint.

--skip-git: Running ember addon is initializing the generated addon as a git repository. To prevent this we are using the --skip-git option available in ember addon command.

--yarn: Use Yarn to install addon dependancies

Writing an addon

• Add the component script and template files under addon/components/
• Inside the addon folder, go to components/{addon-name}.js file - prefix the export statement with @happyfoxinc/
• Re-export the addon components in app folder so that it is accessible in consuming application. If your addon uses any services/helpers/utilities and you want to access in consuming application, re-export them in app folder as well.
• Add the dependency packages if any in package.json
• To locally test the addon with consuming application check npm link or yarn link commands. If you are having trouble working with npm/yarn link, a better alternative is yalc
• For publishing the addon as package, Yarn Publish Write Packages permission should be enabled (Reference - https://github.com/happyfoxinc/happyfox-web/wiki/Creating-token-to-checkout-internal-packages)
• Once all changes are done and required permissions are enabled, go to your addon's root folder and do npm publish.
• The above steps just gives an overview on generating and developing an addon. Checkout resources section for more details on setting up, developing, and publishing an addon.

Note: While locally testing addon with consuming app, if you want the app to have addon changes reflected immediately instead of restarting the app server everytime, add isDevelopingAddon as true in addon's index.js

//addon/index.js
module.exports = {
  name: '<addon-name>',
  isDevelopingAddon: function() {
    return true;
  }
}; 

Remove isDevelopingAddon once changes are verified

Resources

• HappyFox Web - Writing and publishing an addon - Recorded session on setting up and writing an addon for usage across Happyfox
• Official Ember addon guides - Writing an Ember addon

Miscellaneous

• If you are using jquery in test cases, you should enable "jquery-integration": true in <addon>/tests/dummy/config/optional-features.json

• If you are using jquery in addon, you should enable "jquery-integration": true in <addon>/config/optional-features.json

• If you are using another happyfox addon in your addon, add .npmrc file in your addon root folder with content @happyfoxinc:registry=https://npm.pkg.github.com/ and then you can directly install it as a dependency.