TrophyCustomer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

Preflight Tool Installation

You can contact our support team to get the Aurigma Preflight Tool. This distribution package contains the front-end and back-end components. When you unzip this application, you can find the following files and folders:

  • LicenseManager - a utility to register Customer's Canvas.
  • PreflightBackend - the back end.
  • PreflightClient - the front end.
  • readme.md - instructions to get started.

Prerequisites

The following components are required to deploy this application to a Windows Server:

Deploying the Back End to IIS

Deployment of the Aurigma Preflight Tool to IIS can be done as follows:

  1. In the File Explorer, navigate to the webroot directory (it is usually C:\inetpub) and create a new site's folder under it, for example, PreflightTool.
  2. Unzip the content of PreflightBackend to this folder (C:\inetpub\PreflightTool).
  3. Open the IIS manager.
  4. In the IIS manager, create a new site (right-click Sites and then click Add Website).

    Creating a new web site in IIS.

  5. Enter the Site name (PreflightTool) and its Physical path (C:\inetpub\PreflightTool) and click OK.

    Configuring the site.

  6. If you get the binding error shown in the following screenshot, then stop any other site that uses port 80. For example, Default Web Site uses this port by default, so it must be stopped.

    Binding error, caused by binding a site to the already used port.

  7. In IIS Manager, find the PreflightTool application pool in the list of Application Pools, right-click this pool, click Basic Settings, select .Net CLR Version v4, set the Integrated pipeline mode, and click OK.

    Configuring application pool.

  8. Register your license key.

Back-End Configuration

When you need to define custom color profiles or paths to fonts and storage, you need to configure the back end in the AppSettings.config file. For example, to apply a specific color profile to print files, use the CmykProfileFilePath and GrayscaleProfileFilePath keys.

AppSettings.config
<appSettings>
  <add key="FileSystemProviderPath" value="./App_Data/files"/>
  <add key="CacheDirectoryPath" value="./App_Data/Cache"/> 

  <add key="FontsDirectoryPath" value="./App_Data/fonts"/>
  <add key="ColorProfilesDirectoryPath" value="./App_Data/ColorProfiles/"/>

  <add key="GrayscaleProfileFilePath" value="./App_Data/colorProfiles/defaultGrayscaleProfile.icm"/>
  <add key="CmykProfileFilePath" value="./App_Data/colorProfiles/defaultCmykProfile.icm"/>

  <add key="ServerBaseUrl" value=""/>
  <add key="FallbackFonts" value=""/>

  <!-- Configure DesignManager as asset storage -->
  <add key="AssetStorageApiKey" value="ApiKey" />
  <add key="AssetStorageEndpoint" value="http://localhost:56416/" />
  <add key="AssetStorageTenantId" value="6" />
  <add key="AssetStorageColorProfiles" value="false" />
  <add key="AssetStorageFonts" value="false" />

  <add key="MessageBusRabbitMQ" value=""/>
  <add key="MessageBusAzureServiceBus" value=""/>
</appSettings>
Name Description Possible values
FileSystemProviderPath The storage of user files and the resulting JPG and PDF images. The default value is "./App_Data/files". folder path
CacheDirectoryPath The location of the application path. The default value is "./App_Data/Cache". folder path
FontsDirectoryPath The folder containing fonts that will be used for processing PSD files. The default value is "./App_Data/fonts". folder path
ColorProfilesDirectoryPath The folder containing color profiles. The default value is "./App_Data/ColorProfiles/". folder path
GrayscaleProfileFilePath The path to the grayscale profile. file path
CmykProfileFilePath The path to the CMYK profile. file path
ServerBaseUrl A direct URL to your server. You can specify this parameter if your server runs behind a firewall. This URL will be used in links to previews and hi-res images. By default, this value is an empty string, and the URL is retrieved from IIS settings. string
FallbackFonts The PostScript name of the font to substitute a missing font with. If this value is an empty string, then this tool throws an exception when it meets an unknown font in a user's file. string
AssetStorageApiKey A unique API key to access the asset storage. This value is an arbitrary string. string
AssetStorageEndpoint The link to the asset storage. For example, "http://localhost:56416/". string
AssetStorageTenantId The tenant identifier in the asset storage. number
AssetStorageColorProfiles If true, uses the color profiles defined in the asset storage. The default value is false. boolean
AssetStorageFonts If true, uses the fonts defined in the asset storage. The default value is false. boolean
MessageBusRabbitMQ Connection parameters of RabbitMQ. This string must be specified when you use the RabbitMQ message bus to get notifications about changing the content of the asset storage. For example, "Host=localhost;VirtualHost=/;Username=guest;Password=guest". string
MessageBusAzureServiceBus Connection parameters of AzureServiceBus. This string must be specified when you use the AzureService message bus to get notifications about changing the content of the asset storage. string

If you do not define color profiles that should be used in color management, then the Preflight Tool applies the following default profiles:

  • SWOP (Coated) 20%, GCR, Medium profile for CMYK
  • Dot Gain 30% profile

Deploying the Front End

In the PreflightClient folder, you can find:

Note

The Preflight Tool works with UI Framework 4.5.0 and higher.

Although this distribution package includes the UI Framework library, you can use its latest version from CDN or npm as described in the corresponding topic.

You can deploy the front end to either a separate server or the same server where your back end runs. If you want both components to be deployed on a single server, unzip the content of PreflightClient to the C:\inetpub\PreflightTool folder. The application structure will look as follows:

The Preflight tool structure.

To start working with the Preflight Tool, you need to set up the security permissions. If you deployed both front end and back end to the C:\inetpub\PreflightTool folder, set up permissions as follows:

  1. Open the File Explorer, browse to C:\inetpub, right-click C:\inetpub\PreflightTool, and click Properties. On the General tab, uncheck Read-only, then click Apply.

    Properties of the CustomersCanvas folder.

  2. On the Security tab, click Edit, then click Add. Type in IIS AppPool\PreflightTool, click Check Names, and after it finds the account (the account's name should be underlined: PreflightTool), click OK.

    Add the Network service account to the list of users.

  3. Select the Modify permission and click OK two more times.

    Giving permissions to the Network service account.

Running the Preflight Tool

This example represents a fragment of index.html and demonstrates how you can use the Preflight Tool in your application.

<!-- A container for the Preflight Tool. -->
<main class="main">
  <div class="editor-parent" id="editor-parent"></div>
</main>

<script type="module">
  // The link to the UI Framework included into the destribution package.
  import moduleLoader from "./ui-framework/4.5.3/moduleLoader.js";
  document.addEventListener('DOMContentLoaded', async () => {
    
    // See https://customerscanvas.com/support/ui-framework/ for the syntax explanation and widget reference.
    const product = {
      "id": 0,
      "sku": "DEFAULT-002",
      "name": "Demo",
      "description": "",
      "price": 0.16,
      "options": [],
      "attributes": []
    };

    // The configuration of the Preflight Tool.
    const config = await moduleLoader.loadJson("./config.json");
    // The address of your back end. It's an empty string or "./" when the back end and front end are deployed on the same server.
    config.vars.backendUrl = "";

    // Loading an ecommerceDriver and a multistep editor.
    const driverImportData = await moduleLoader.dynamicImport("ecommerceDriver", "./ui-framework/4.5.3/drivers/default-driver.js");
    const editorImportData = await moduleLoader.dynamicImportDefault("editor", "./ui-framework/4.5.3/editor.js");

    const editor = editorImportData.editor;
    const driver = driverImportData.ecommerceDriver;

    // Settings of the editor.
    const settings = { customersCanvasBaseUrl: "_" };
    const quantity = 1;
    const user = { id: "test-user" };

    // The driver initialization: a product definition, an editor instance, 
    // config, data returned by the editor, item quantity (if needed).
    const ecommerce = await driver.init(product, editor, config, settings, null, quantity, user);

    // Display the editor in the specified DIV element.
    ecommerce.products.current.renderEditor(document.getElementById("editor-parent"));

    // Subscribe to an event that will be called when the user finishes editing.
    ecommerce.cart.onSubmitted.subscribe(data => {
      alert('Open console to see URLs to the preview images and print files');
      // Links to previews and hi-res outputs.
      data.lineItems.forEach(function(order) {
        console.log("Print files: ", order.downloadUrls);
        console.log("Previews: ", order.images);
      });
    });

  });
</script>

In moduleLoader, driverImportData, and editorImportData, we use UI Framework scripts included in this distribution package. If you want to use the scripts from CDN or npm, you can refer to the Getting Started topic for more details.

In this example, we load the configuration of the Preflight Tool from the config.json file. Note that you can define this configuration as a variable in JavaScript code or read it from your database if needed. In the Config Reference topic, you can find details about the configuration parameters.

When you deploy the front end to a separate server, you must also specify a back-end URL in the config.vars.backendUrl variable, for example:

JavaScript
// The address of your preflight server.
config.vars.backendUrl = "https://pt.example.com";

See Also

Manual

Other