******* DEPRECATED REPOSITORY *******

This repository has reached its EOL and has been deprecated and will be publicly removed in September 2023. Users will still be able to download the latest version under demand by sending a request message to [email protected].

We highly encourage our users to use the new integrations framework which supports the latest versions of the most used DCC and is much easier to customize and extend. You can find the latest downloadable version of the framework in the plugin manager of ftrack connect https://go.ftrack.com/connect-download.

Framework documentation: https://ftrackhq.github.io/integrations/libs/framework-core/

All our maintained code is now under a monorepo repository that as of the date of this message (26/05/2023) is still private as we are still doing some migration and setup jobs. We are working hard to open it publicly as soon as we can. You will be able to find the monorepo at: https://github.com/ftrackhq/integrations.

Don't hesitate on contact our support team if you have any inquiries: [email protected]

ftrack connect spark

ftrack-connect-spark provides a base to build ftrack integrations using web technologies and a shared interface which is used across integrations in supported applications.

Setting up node environment

You will need a recent version of node (5+) with npm installed. It is highly recommended that you also install a version manager for node, such as n (Mac OS) or nodist (windows). It enables you can use different node versions in different projects.

Mac OS

1. Install homebrew, unless already installed.

2. Ensure homebrew is installed correctly:

   brew doctor
   

3. Install latest node and npm versions:

   brew install node
   

4. Install n globally:

   npm install -g n
   

5. Install latest stable version:

   n stable
   

Windows

TODO

Setting up development environment

1. Checkout this repository

2. Install dependencies (will run for a few minutes for the first setup):

   npm install
   

3. Start development server

   npm start

Commands

Start for development:

npm start # or
npm run serve

Start the dev-server with the adobe entry in development mode:

npm run serve:adobe

Start the dev-server with the cinema4d entry in development mode:

npm run serve:cinema4d

Start the dev-server with the dist version:

npm run serve:dist

Just build the dist version and copy static files:

npm run dist

Run unit tests:

npm test

Run the unit tests continuously (repeat the test when code changes are saved):

npm run test:watch

Lint all files in source (also automatically done after tests are run):

npm run lint

Clean up the dist directory:

npm run clean

Just copy the static assets:

npm run copy

Configuring your editor

If your editor supports EditorConfig, the configuration should be picked up automatically. Plugins for several editors such as Sublime Text, Visual Studio Code and Atom exists.

Syntax highlighting for JavaScript extensions should be extended to add support for ES2015 and JSX language extensions through Babel. For sublime text, install the Babel package and change the default syntax used for .js files, by navigating to View -> Syntax -> Open all with current extension as -> Babel -> JavaScript (Babel).

Next up, you should make sure your editor supplies you with linting information. For Sublime Text, install the following packages:

• Sublime-Linter
• SublimeLinter-contrib-eslint

Technology used

• Webpack module loader with development server with loader for CSS Modules.
• Babel JavaScript compilter with es2015 and react presets.
• React, library for building user interfaces.
• Redux, a predictable state container.
• React router with react router redux provides a routing solution.
• React toolbox, component library implementing material design as react components.
• ESLint linter for JS and JSX with Airbnb JavaScript Style Guide configuration.
• Testing using karma, Mocha and Chai.

Project structure

The project directory structure looks like the following:

.
├── .babelrc               # Babel configuration file
├── .editorconfig          # Editor configuration to follow style guide.
├── .eslintrc              # Linter configuration, based on AirBnb's config.
├── config                 # Webpack configuration files
├── coverage               # Code coverage reports
├── dist                   # Built application for distribution.
├── karma.conf.js          # Karma test runner configuration.
├── yarn.lock              # Locked package dependencies.
├── package.json           # Package configuration and dependencies.
├── server.js              # Webpack dev server entry point
├── source                 # Application source code
│   ├── action             # Redux actions
│   ├── application        # Application-specific behavior and entry points
│   ├── component          # Presentational, "dumb", react components
│   ├── container          # Components that provide context (e.g. Redux Provider)
│   ├── layout             # Components that dictate major page structure
│   ├── reducer            # Redux reducers
│   ├── route              # Application route definitions
│   ├── store              # Redux store
│   ├── saga               # Sagas orchestrate asynchronous operations.
│   ├── static             # Static assets (images, etc..)
│   ├── style              # Application-wide styles
│   ├── view               # Components that live at a route
│   └── index.js           # Application bootstrap and rendering
├── test                   # Unit tests
└── webpack.config.js      # Loads webpack configuration based on environment.

Layouts, views and components

A Layout is something that describes an entire page structure, such as a fixed navigation, viewport, sidebar, and footer. Most applications will probably only have one layout, but keeping these components separate makes their intent clear. Views are components that live at routes, and are generally rendered within a Layout. What this ends up meaning is that, with this structure, nearly everything inside of Components ends up being a dumb component.

Webpack

The webpack configuration file, webpack.config.js will build a configuration for one of three environments: dev, dist or test. The actual configuration resides within the config directory.

In the configuration, we make use of resolve alias to enable you to import modules relative to source root.

Styles

Both .scss and .css file extensions are supported out of the box and are configured to use CSS Modules. After being imported, styles will be processed with PostCSS for minification and autoprefixing, and will be extracted to a .css file during production builds.

Testing

Any Javascript file starting with test_ in test/ will be treated as a unit test and be run by Karma.

When running tests, coverage information (provided via Istanbul) will also be written into the coverage/ directory.

Development

ftrack API credentials

Specify your API credentials in a file, source/ftrack_api_credentials.json. It should contain the following keys:

{
    "serverUrl": "",
    "apiUser": "",
    "apiKey": ""
}

Hot module replacement

React components, CSS styles and redux reducers will be replaced when modified when running in development mode. Hot module replacement is a feature provided with webpack and allows faster development iterations by replacing modules while an application is running without reloading. A babel preset, react hmr, provides transformations necessary to support replacing components.

Redux development tools

Redux DevTools Extension provides Redux DevTools as a Chrome extension. This allows you to inspect redux actions and states and go back in time and replay actions.