Installing Design Editor

  • 5 minutes to read

Although Design Editor is an ASP.NET application and requires an ASP.NET environment, you can integrate it into almost any system, no matter what platform it is built on. If you are using LAMP, Ruby on Rails, or anything else, you can still use this Design Editor. The only ASP.NET platform you need to take care of is your hosting: you host Design Editor in an ASP.NET environment and implement it into a product personalization page on your site using as little as the <iframe> tag.

This topic describes how to deploy Design Editor to Windows Server 2016 or Windows Server 2019. There are also a few words on the distribution package, application parameters, and using the Web API.

Prerequisites

You must install the Design Editor on a server that meets the System requirements. If you are installing this application to a clean Windows Server, make sure you have installed the following components:

Distribution Package

You can download a distribution package from your account. The Design Editor package represents a web application and data files in the CustomersCanvasServer.zip archive:

  • assets - such assets as designs, mockups, fonts, color profiles, etc.
  • cc-<version-number> - the Design Editor application.
  • LicenseManager - a utility to register Customer's Canvas.
  • userdata - user products and images.

This structure allows you to easily upgrade Design Editor or use multiple instances running at the same time. Another point when data files are located outside the application folder, they cannot be downloaded directly from a webserver.

Deployment to IIS

Deployment of Design Editor to IIS can be done as follows:

  1. In the File Explorer, navigate to the web root directory (for example, D:\inetpub) and create a new site's folder under it, for example, \cc\design-editor.

    Warning

    Although the web root directory is usually located on drive C:, we recommend creating it on any non-system drive.

  2. Unzip the content of CustomersCanvasServer.zip to this folder (D:\inetpub\cc\design-editor).

  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 (CustomersCanvas) and its Physical path (D:\inetpub\cc\design-editor\<version-number>) 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 CustomersCanvas 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. Right-click the pool again, click Advanced Settings, and set the pool's Identity to NetworkService.

    Configuring advanced settings of the application pool.

  9. Find the .NET v4.x (it could be 4.5 or higher) application pool in the list of Application Pools.

    The .NETv4.x application pool in the list of application pools.

  10. Right-click the .NET v4.x, click Advanced Settings, and set the pool's Identity to NetworkService.

  11. Set up permissions for D:\inetpub\cc\design-editor:

    • Open the File Explorer, browse to D:\inetpub\cc, right-click D:\inetpub\cc\design-editor, and click Properties. On the General tab, uncheck Read-only, then click Apply.

      Properties of the CustomersCanvas folder.

    • On the Security tab, click Edit, then click Add. Type in NETWORK SERVICE, click Check Names, and after it finds the account (the account's name should become underlined: NETWORK SERVICE), click OK.

      Add the Network service account to the list of users.

    • Select the Modify permissions and click OK two more times.

      Giving permissions to the Network service account.

  12. Similarly to the previous step, set up the Modify permissions for the C:\Windows\Temp folder for NETWORK SERVICE.

  13. Register your license key.

    • In the D:\inetpub\cc\design-editor\LicenseManager folder, run LicenseManager.exe.

    • Obtain an activation code and register your license key.

  14. Browse the CustomersCanvas site: right-click the site name, click Manage Website, and click Browse. You should see a page displaying a simple product in the Design Editor.

Configuring the Application

If you have unzipped assets and user files to the default location as described in the previous section, you can skip changing paths to these files. Otherwise, you must specify their location in D:\inetpub\cc\design-editor\<version-number>\Configuration\AppSettings.config:

  • DesignFolder - design templates.
  • DesignImagesFolder - images referenced in design templates.
  • MockupFolder - product mockups.
  • PublicGalleryFolder - images available to all users.
  • UserDataFolder - user files and images.
  • WatermarkFolder - watermark images.

And in the D:\inetpub\cc\design-editor\<version-number>\Configuration\Aurigma.DesignAtoms.config file:

  • ColorProfilesDirectory - color profiles.
  • FontDirectory - fonts.

If your site and the Design Editor run on different domains, you must specify your site domain in AppSettings.config, in CorsAllowOriginDomains, to disallow unauthorized access to the web-to-print editor from other domains.

<appSettings>
    <add key="CorsAllowOriginDomains" value="http://example.com" />
</appSettings>

The Use of the Web API

The Design Editor Web API allows you to render product templates, implement token-based authentication, and manipulate files, images, and fonts in the editor. It works based on the HTTPS requests. So, to use the Web API, you need to perform the following actions:

  1. Set up an HTTPS service in IIS. For example, you can follow the steps described in setting up an HTTPS service.
  2. Make sure that you have a valid SSL-certificate for your domain, for example, Google Chrome shows this icon for invalid certificates: An invalid SSL-certificate.. If you have an invalid one, install a new SSL web server certificate (you can refer to installing a certificate).

To use the Web API, you must set ApiSecurityKey in AppSettings.config. It is an arbitrary string, but it must be a unique value. You have to include this key in headers of HTTP requests as the X-CustomersCanvasAPIKey field to perform these requests. The Web API works if a value of this key passed in the request matches the value defined in AppSettings.config as the following example shows.

<appSettings>
    <add key="ApiSecurityKey" value="UniqueSecurityKey" />
</appSettings>

For security reasons, it is good practice when your back-end code, like a proxy, sends requests to an API controller. In this case, your code decides whether a user has enough rights to manipulate a mockup or template file or not, and if the user has enough rights, the code sends the HTTPS requests to the controller.

Back to top Copyright © 2001–2022 Aurigma, Inc. All rights reserved.