ftrack spark base
This is base project which can be used as a starting point for building ftrack widgets using a React-based UI with components that are ready to be used.
Related projects and documentation:
- Webpack module loader with development server with loader for CSS Modules.
- React, library for building user interfaces.
- React toolbox, component library implementing material design as react components.
- Building dashboard widgets
- ftrack spark components,
- provides some ftrack-specific UI components based on react-toolbox.
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.
Setting up development environment
Fork this repository and check out the new fork.
Install dependencies (will run for a few minutes for the first setup):
Start development server
You can view the application on http://localhost:8001.
Start for development:
npm run start
Build the dist version and copy static files:
npm run build
You can append :dark to the start command to build the dark instead of the light theme. npm run build will build both themes, but you can specify either one or the other for a quicker build:
# Run the development server for the light theme npm run start # Run the development server for the dark theme npm run start:dark # Build only the light theme npm run build:light # Build only the dark theme npm run build:dark
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.
Next up, you should make sure your editor supplies you with linting information. For Sublime Text, install the following packages:
The project directory structure looks like the following:
. ├── .editorconfig # Editor configuration to follow style guide. ├── .eslintrc # Linter configuration, based on AirBnb's config. ├── config # Webpack configuration files ├── build # Built application for distribution. ├── source # Application source code │ ├── component # Presentational, "dumb", react components │ ├── container # Components that provide context (e.g. Redux Provider) │ ├── layout # Components that dictate major page structure │ ├── static # Static assets copied to dist (images, etc..) │ ├── style # Global styles and theme configuration │ └── index.js # Application bootstrap and rendering │ └── index.html # Template for index page. └── package.json # Package configuration and dependencies.
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.
Theme and styles
The base project is configured to use two different themes, a light theme and a dark theme. The build script will run twice, once for each theme:
npm run build
To build the project for a single theme, append the theme name to the command, e.g.:
npm run build:light npm run build:dark
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.
Mocked widget API
In development mode, the widget API is mocked using the following environment variables: