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
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.
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:
- 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 or higher.
- Both Microsoft Visual C++ 2017 Redistributable Package (x86) and Microsoft Visual C++ 2017 Redistributable Package (x64).
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:
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.
Although the web root directory is usually located on drive
C:, we recommend creating it on any non-system drive.
Unzip the content of CustomersCanvasServer.zip to this folder (D:\inetpub\cc\design-editor).
Open the IIS manager.
In the IIS manager, create a new site (right-click Sites and then click Add Website).
Enter the Site name (CustomersCanvas) and its Physical path (D:\inetpub\cc\design-editor\<version-number>) and click OK.
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.
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.
Right-click the pool again, click Advanced Settings, and set the pool's Identity to NetworkService.
Find the .NET v4.x (it could be 4.5 or higher) application pool in the list of Application Pools.
Right-click the .NET v4.x, click Advanced Settings, and set the pool's Identity to NetworkService.
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.
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.
Select the Modify permissions and click OK two more times.
Similarly to the previous step, set up the Modify permissions for the C:\Windows\Temp folder for NETWORK SERVICE.
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.
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:
- Set up an HTTPS service in IIS. For example, you can follow the steps described in setting up an HTTPS service.
- Make sure that you have a valid SSL-certificate for your domain, for example, Google Chrome shows this icon for invalid certificates: . 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.