Deploying Customer's Canvas to Windows Server

This topic tells you how to deploy Customer's Canvas to traditional IIS. There are also a few words on the hosted version of Customer's Canvas, prerequisites for using the Web API, and an elementary application to test whether the deployment is ok:

Although Customer's Canvas 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, or Ruby on Rails, or anything else, you can still use Customer's Canvas. The only ASP.NET platform you need to take care of is your hosting: you host Customer's Canvas in an ASP.NET environment and implement it into a product personalization page on your site using as little as an <iframe> tag. So, let us begin with reviewing the simplest variant, the hosted version of Customer's Canvas.

Hosted Version

The hosted version is the simplest way to start with Customer's Canvas, because it is already deployed on our servers, so you do not need to worry about maintaining it. The hosted version provides:

  1. A web file manager to upload your PSD templates and other images to your Customer's Canvas instance.
  2. The API URL used to integrate Customer's Canvas into your system. The URL appears as follows: http://h.customerscanvas.com/Users/xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx/SimplePolygraphy/Resources/SPEditor/Scripts/IFrame/IframeApi.js, where xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx is a unique identifier for your Customer's Canvas instance.

To build the web-to-print editor into the design page on your website add the IFrame API script (IframeApi.js) to the page, put an iframe on the page, and load the editor using the IFrame API. You can configure the editor through IFrame API or using the Configuration Parameters.

Later in this topic, you can find a simple design page suitable for testing purposes.

Deployment to IIS

The following components are required to deploy Customer's Canvas to IIS:

Deployment of Customer's Canvas to IIS can be done as follows:

  1. Go to the web root directory (usually it is C:\inetpub\) and create a new site's folder under it, for example, \Web2Print\.
  2. Open IIS manager.
  3. In IIS manager, create a new site (right-click Sites and then click Add Web Site...).

    Creating a new web site in IIS.

  4. Enter Site name (Web2Print), its Physical path (C:\inetpub\Web2Print\), and click OK.

    Configuring the site.

  5. If you get the binding error shown on the screenshot below, 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.

  6. Extract CustomersCanvasIISBin.zip to the new site's folder (C:\inetpub\Web2Print\).
  7. Copy your license file (Aurigma.GraphicsMill.lic) to C:\inetpub\Web2Print\bin\.
  8. In IIS Manager find the Web2Print application pool in the list of Application Pools, right-click it, click Basic Settings..., select .Net Framework version 4, set Integrated pipeline mode, and click OK.

    Configuring application pool.

  9. Right-click the pool again, click Advanced Settings..., and Set the pool's Identity to NetworkService.

    Configuring advanced settings of the application pool.

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

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

  11. Right-click the .NET v4.x, click Advanced Settings..., and Set the pool's Identity to NetworkService.
  12. Set up permissions for C:\inetpub\Web2Print\.
  13. Open file explorer, browse to C:\inetpub\, right-click C:\inetpub\Web2Print\, and click Properties. On the General tab, uncheck Read-only, then click Apply.

    Properties of the Web2Print folder.

  14. Go to 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 NETWORK SERVICE account to the list of users.

  15. Select Full control permissions and click OK two more times.

    Giving full control over the folder to the NETWORK SERVICE account.

  16. Browse the Web2Print site: right-click site's name, click Manage Web Site, and click Browse. You should see a page containing an image carousel allowing you to select a product and the web-to-print editor.
  17. Now Customer's Canvas is deployed on your server, and you can test it with a simple host page described below.

Use of Web API

The Customer's Canvas Web API allows manipulating design and mockup files. 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. You can follow the steps described at setting up an HTTPS service link.
  2. Make sure that you have a valid SSL-certificate for your domain. For example, Google Chrome shows this icon for invalid ones: Crossed out https.

    Install an internet server certificate if you have an invalid one (refer to installing a certificate).

To upload, delete, or replace files you must set ApiSecurityKey in web.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 X-CustomersCanvasAPIKey field to perform the file operations. The Web API works if a value of this key passed in the request matches the value defined in web.config. You can find more details in Web API for Manipulating Design and Mockup Files topic.

According to security reasons, it is a good practice when your back-end code proxies 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.

If your site and Customer's Canvas run on different domains, you can specify your site domain in web.config, in HttpHeaderAllowOriginDomains, to disallow unauthorized access to the web-to-print editor from other domains:

XML
<configuration>
    <appSettings>
        <add key="HttpHeaderAllowOriginDomains" value="http://example.com" />
    </appSettings>
</configuration>

Simple Customer's Canvas Host Page

After you have deployed Customer's Canvas, you can check if it is deployed successfully. It will take you a couple of minutes.

  1. Create an index.html file on your computer.
  2. Copy and paste one of the following code snippets to the file:
    • Hosted version:
      HTML
      <!DOCTYPE html>
      
      <head>
          <title>Simplest Design Page</title>
          <!-- The IFrame API script. IMPORTANT! Do not remove or change the id. -->
          <script id="CcIframeApiScript" type="text/javascript" 
          src="http://h.customerscanvas.com/Users/xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx/SimplePolygraphy/Resources/SPEditor/Scripts/IFrame/IframeApi.js">
          </script>
      </head>
      <body>
          <!-- The iframe to display the editor into. -->
          <iframe id="editorFrame" width="100%" height="800px"></iframe>
      </body>
      
      <script>
          //Initializing product with only one template – "businesscard2_side1.psd".
          productDefinition = { surfaces: ["businesscard2_side1"] };
          //Getting the iframe element to display the editor into.
          var iframe = document.getElementById("editorFrame");
          var editor = null;
          //Loading the editor.
          CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
              //If the editor has been successfully loaded.
              .then(function (e) {
              editor = e;
          })
              //If there was an error thrown when loading the editor.
              .catch(function (error) {
              console.error("The editor failed to load with an exception: ", error);
          });
      
      </script>
      </html>
      
    • Deployed under IIS:
      HTML
      <!DOCTYPE html>
      
      <head>
          <title>Simplest Design Page</title>
          <!-- The IFrame API script. IMPORTANT! Do not remove or change the id. -->
          <script id="CcIframeApiScript" type="text/javascript" 
          src="http://example.com/CustomersCanvas/Resources/SPEditor/Scripts/IFrame/IframeApi.js">
          </script>
      </head>
      <body>
          <!-- The iframe to display the editor into. -->
          <iframe id="editorFrame" width="100%" height="800px"></iframe>
      </body>
      
      <script>
          //Initializing product with only one template – "businesscard2_side1.psd".
          productDefinition = { surfaces: ["businesscard2_side1"] };
          //Getting the iframe element to display the editor into.
          var iframe = document.getElementById("editorFrame");
          var editor = null;
          //Loading the editor.
          CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
              //If the editor has been successfully loaded.
              .then(function (e) {
              editor = e;
          })
              //If there was an error thrown when loading the editor.
              .catch(function (error) {
              console.error("The editor failed to load with an exception: ", error);
          });
      
      </script>
      </html>
      
  3. In the file, edit the API URL accordingly to suit your instance of Customer's Canvas:
    • Hosted version: replace xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx with the identifier of your Customer's Canvas instance; the identifier is a part of the API URL, which can be found in your account and the confirmation e-mail.
    • Deployed under IIS: replace example.com with the domain name of the site where Customer's Canvas is deployed (if there is no domain name at the moment you can use the IP address of the server instead of the domain name for test purposes).
  4. Open the file in a browser. You should see the businesscard2_side1.psd business card template loaded into the web-to-print editor.

If you face a deployment problem, refer to Troubleshooting topic for a solution.

See Also

Manual

Other