---
title: "Preflight Tool Installation"
canonical: https://customerscanvas.com/docs/cc6/preflight-tool-install.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Preflight Tool"
    versions: ["1.15.3", "1.8.4-1.23.8 (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# Preflight Tool Installation

**Applies to:** Customer's Canvas On-Premises; Preflight Tool 1.15.3, 1.8.4-1.23.8 (may differ) · **Archived documentation**
 
You can contact our [support team↗](https://customerscanvas.com/account/cases/add) 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:
 
- IIS installed with ASP.NET 4.5 or higher (server roles *.NET Extensibility 4.5* and *ASP.NET 4.5*).
- [Microsoft .NET Framework 4.6.2↗](https://www.microsoft.com/net/download/thank-you/net462) or higher.
- Both [Microsoft Visual C++ 2017 Redistributable Package (x86)↗](https://go.microsoft.com/fwlink/?LinkId=746571) and [Microsoft Visual C++ 2017 Redistributable Package (x64)↗](https://go.microsoft.com/fwlink/?LinkId=746572).
 
## 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.](https://customerscanvas.com/docs/cc6/images/DeployIIS01.png)
5. Enter the **Site name** (PreflightTool) and its **Physical path** (`C:\inetpub\PreflightTool`) and click **OK**. 
    ![Configuring the site.](https://customerscanvas.com/docs/cc6/images/DeployIIS09.png)
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.](https://customerscanvas.com/docs/cc6/images/DeployIIS03.png)
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.](https://customerscanvas.com/docs/cc6/images/DeployIIS091.png)
8. [Register your license key](https://customerscanvas.com/docs/cc6/registering-production-license-keys.htm.md).
 
## 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>
  <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="MockupsDirectoryPath" value="./App_Data/mockups"/>
  <add key="TempDataDirectoryPath" value="./App_Data/temp"/>
  <add key="ApiSecurityKey" value=""/>

  <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 |
 |  MockupsDirectoryPath |  The folder containing mokup images. The default value is `"./App_Data/mockups/"`. |  folder path |
 |  TempDataDirectoryPath |  The temporary folder. The default value is `"./App_Data/temp/"`. |  folder path |
 |  ApiSecurityKey |  A unique API key for using the REST API. This value is an arbitrary string. |  string |
 |  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:
 
- `ui-framework` - the [front-end engine](https://customerscanvas.com/docs/cc6/product-editors.htm.md).
- `config.json` - the [preflight configuration](https://customerscanvas.com/docs/cc6/preflight-tool-config.htm.md).
- `index.html` - the demo page.

**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](https://customerscanvas.com/docs/cc6/getting-started-with-uif.htm.md).
 
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.](https://customerscanvas.com/docs/cc6/images/PreflightFiles.png)
 
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.](https://customerscanvas.com/docs/cc6/images/DeployIIS061.png)
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.](https://customerscanvas.com/docs/cc6/images/DeployIIS071.png)
3. Select the **Modify** permission and click **OK** two more times. 
    ![Giving permissions to the Network service account.](https://customerscanvas.com/docs/cc6/images/DeployIIS081.png)
 
## 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.23.15/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.23.15/drivers/default-driver.js");
    const editorImportData = await moduleLoader.dynamicImportDefault("editor", "./ui-framework/4.23.15/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](https://customerscanvas.com/docs/cc6/getting-started-with-uif.htm.md) 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](https://customerscanvas.com/docs/cc6/preflight-tool-config.htm.md) 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:
 
```
// The address of your preflight server.
config.vars.backendUrl = "https://pt.example.com";
```
 
## See Also
  
### Manual
 
- [Deploying Applications to Windows Servers](https://customerscanvas.com/docs/cc6/deploying-application-to-windows-server.htm.md)
- [Config Reference](https://customerscanvas.com/docs/cc6/preflight-tool-config.htm.md)
- [Preflight Tool F.A.Q.](https://customerscanvas.com/docs/cc6/preflight-tool-faq.htm.md)
- [Getting Started with the UI Framework](https://customerscanvas.com/docs/cc6/getting-started-with-uif.htm.md)

### Other
 
- [UI Framework Package↗](https://www.npmjs.com/package/@aurigma/ui-framework)